Navigation
A jQuery plugin that adds an off-canvas navigation to the page. Uses CSS transitions to perform the animation.
Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.
If button is not present as the first child of the navigation, the plugin will automatically add one to act as a trigger.
Adding the class .pull to the navigation will render it at the opposite side of the page.
Opening the navigation locks the page to prevent double scrollbars appearing on certain viewport sizes.
Accessibility
On initialisation a clone of the navigation landmarks is placed, hidden at the bottom of the page to ensure that the landmarks from the landmarks list dialog are registered and accessible. The appropriate roles and aria attributes are also added to the button and navigation elements.
When open pressing tab or will focus elements within the menu only shift + tab Will allow you to exit from the top. Pressing esc will close the menu.
Right-to-Left Language Support
Adding the attribute dir="rtl" to the html tag will reverse the position of the navigation.
Examples
This website uses the navigation plugin as its main navigation.
Markup
<nav data-navigation>
<button>Menu</button>
<ul><li><a href="LINK_1_URL">Link 1</a></li></ul>
</nav>Methods
The navigation plugin exposes the following method signatures.
- .navigation()
- Initialises the plugin.
- .navigation("show")
- Show the navigation.
- .navigation("hide")
- Hide the navigation.
Events
The navigation plugin exposes the following events allowing the developer to tap into its behaviour.
- show.r.navigation
- This event is fired immediately when the plugins
showinstance method is invoked. - shown.r.navigation
- This event is fired when the plugins
showninstance method is invoked once the target has completed the animation and is shown. - hide.r.navigation
- This event is fired immediately when the plugins
hideinstance method is invoked. - hidden.r.navigation
- This event is fired when the plugins
hiddeninstance method is invoked once the target has completed the animation and is hidden.
Binding to these events is as follows:
// Bind to the show event.
$("YOUR_SELECTOR").on("show.r.navigation", function(event) {
// Your custom behaviour...
});
// Bind to the shown event.
$("YOUR_SELECTOR").on("shown.r.navigation", function(event) {
// Your custom behaviour...
});
// Bind to the hide event.
$("YOUR_SELECTOR").on("hide.r.navigation", function(event) {
// Your custom behaviour...
});
// Bind to the hidden event.
$("YOUR_SELECTOR").on("hidden.r.navigation", function(event) {
// Your custom behaviour...
});Data API
The navigation plugin's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so.
// Disable the default loading behaviour
$(document).off(".r.navigation.data-api");