If you are looking for a navigation drawer that is accessible to those with disabilities then look no further. Offcanvas jQuery plugin & CSS3 based off-canvas navigation that uses JavaScript to dynamically add WAI-ARIA roles to make your site navigation more accessible. Here are some of the many features in this well crafted plugin:

• ARIA Design pattern for Dialogs
• The tab key loops through all of the keyboard focusable items within the offcanvas.
• You can close it using Esc.
• Buttons Open/Close with Space & Enter
• BEM Syntax
• Package managers Bower & NPM

A JavaScript library to make navigation menus highlight the item based on currently in view section.

It could not be easier to use, just include the script in your page and initialize it. The items in your menu will get active class when the section referenced in your anchor is visible. It’s got a really small footprint and uses requestAnimationFrame to monitor scroll position.

A light-weight, responsive, mobile-like menu plugin.

It’s an update to a previously submitted plugin; http://www.unheap.com/navigation/horizontal-tabbed/sliding-menu/

Illustration by akselkreis

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

The plugin requires jQuery 1.7 or higher, and Modernizr.

Illustration by minnix

Mmenu makes it easy for you to create a native-style mobile sliding menu for your website (including WordPress). The menu has a stylish look and feel behind a hamburger icon and works with almost any type of design.

Mmenu is an easy to use but customizable jQuery plugin. It includes a wide range of options, extensions and add-ons to fit your needs. No matter how large your nested menu structure is, everyone already is familiar with the sliding submenus used in native apps. The fixed header, search field and sub-item counters make navigating your menu even easier.

Customize everything about this plugin to make it your own. Choose from options such as:

• Background color
• Menu position
• Navigation style and flow
• Search fields
• Header or footer buttons
• Include photos, logo or other images

And what’s great about this little jQuery tool is that it looks great. With so many options — and in a style users are familiar with — this might be the only tool you need to finish up your mobile website design.

Tabslet is a jQuery plugin for tabs. It is lightweight, easy to use, compatible with all modern web browsers and is mobile-friendly. It supports custom events, rotation animation and controls. Simply, it does pretty much everything you will need.

Here are some of the features that go beyond standard tab controls:

• Flexible HTML structure
• Custom events
• Data attribute initialization and configuration
• Controls (next, previous)
• Rotation (useful for banner rotators/carousels)
• Deep linking support
• Change tabs on mouse over
• Use animation effect for tabs’ changing
• Ability to use either href or alt attribute to target tab
• Destroy and control (next, prev, show) methods

Check out the documentation to learn more about Tabslet and see it in action.

Zozo Tabs is a user-friendly, fully responsive and customizable jQuery tabs plugin to take any HTML content, including images, videos and display it in a clean, organized and responsive tabbed navigation.

It works out of the box, making it simple to create beautiful but powerful enough to build branded and highly customized tabs. This plugin features plenty of layouts, vertical tabs, horizontal tabs, responsive tabs, deep-linking, a flat theme pack extension, powerful API, CSS transitions and animations, more than six sizes, more than 30 themes, more than 35 templates, 10 positions, 65 options and much more.

Zozo Tabs is designed for WordPress but can be integrated in other frameworks as well and works with all modern browsers. See the documentation for details on how it can be integrated with other content management systems.

The regular license for this plugin is $8 and includes quality checks by the Envato marketplace, future updates and six months of support from ZozoUI. (You can buy an extended support option as well for just a couple dollars more.)

This plugin provides simple slide-out mobile navigation that’s fully responsive. The little plugin comes packed with options for basic, breakpoint or off-canvas navigation in multiple styles.

With each type of navigation, there are plenty of styling possibilities as well, so you really can make this plugin look like part of your overall design. All of the options are outlined in the documentation and include elements such as custom class, push or overlay navigation, closed and open state text, auto-width displays and type of navigation.

With a little CSS knowledge, this plugin is relatively easy to install, configure and use. All of the CSS element types and descriptions are included with easy to understand descriptions.

Shifter includes almost any type of slide-out navigation that you might want for a variety of mobile projects. And because it is customizable, you can get a lot of use from this lightweight little plugin.

Midnight is a jQuery plugin to switch fixed headers on the fly.

What this means in practical application, is that a header can change color, weight or size based on the background. It works on scroll so that your header text or image is always optimized for on-screen environment.

Plus Midnight is pretty easy to use. Create your fixed navigation (or header) as you typically would, using whatever markup suits you, just make sure the header works well with position:fixed. Then take sections of your page that need a different aesthetic and add data-midnight=”your-class” to it, where .your-class is the class you are going to use to style that header.

Add a little styling and you are done. Use whatever CSS or markup you like for each one. They will be switched automatically when necessary. To make it all work, just load Midnight (and jQuery) and initialize. A little developer “magic” takes care of the rest.

You can further add customization with custom markup for each header as well.

There are a few known issues with this plugin and older browsers, so if you have a large user based operating in the pre-iOS 7 era, beware.

The scroll up bar jQuery plugin hides the top bar when scrolling down, and shows it when scrolling up. It’s especially useful on mobile interfaces to save space. The effect is similar to what using sticky navigation that later hides during the scrolling process.

There are multiple uses for the plugin — simple, bar with offset and viewport callbacks. All are available for preview and usage in the demo.

There are a handful of available options to work with. You can pass callback functions in initialization to handle bar visibility events.

• enterViewport – when the bar enters the viewport
• fullyEnterViewport – when the bar is completely in the viewport
• exitViewport – when the bar completely leaves the viewport
• partiallyExitViewport – when the bar goes from being fully in the viewport to only partially

Install is simple with a script and call or installation using Bower. The plugin is also supported by all major browsers including Chrome, Firefox, Safari, Opera and Internet Explorer.

This is a simple JavaScript plugin for a hashchange-driven tabbed content switcher.

Here are the features of HashTabber:

• SCSS stylesheet
• Switching tabs with #foo=bar links
• Multiple simultaneous HashTabbers
• Flexible -nav & -data structure

The plugin also works on most browsers that users would come in contact with including Chrome 4+, Firefox 4+, Opera 12+, Safari 5+ and Internet Explorer 8+.

You need two files to start using HashTabber:

• hashTabber.js – with a single object inside and four helper functions; so you could as well just paste it to your script.js to avoid an unnecessary HTML request
• _hashTabber.scss – 20-something lines of code that would be best to just @include in your global.scss

Following the setup instructions is vital to making this plugin work, so pay close attention to the documentation. There’s an additional theme class as well for those sites running on a theme. (This will make everything come together a lot easier.)

This plugin has a few “hidden features” as well:

• Both ols could contain countless different nodes (h2 for example), as the script takes into account only lis inside of them
• Both ols could be placed within completely different HTML nodes, as the script uses the data-hashtabber-id attribute to pair them
• You can chain parameters in links: #foo=2&bar=1&fum=baz&qux=2&zot=3, to switch tabs for all instances of HashTabber simultaneously

Tendina allows you to rapidly build dropdown side menus using jQuery.

Here’s what the plugin can do for your website:

• Provides an easy way to set up side menus in a matter of minutes
• Supports infinite levels of nesting
• Hides nested submenus and manages interactions
• Handles dynamically added elements (nice when building a menu from JSON)
• Supports multiple menu initializations on the same page
• It’s lightweight – just 3kb minified

This plugin is designed just for menu interactions and does not come with styles. That way you can use the plugin and not have to worry that it will override design decisions that you have already made.

Options that you can control include animation, speed, hover action, menu creation, callbacks, and hide and show functions.

Plus, this plugin is easy to install. It takes just three steps:

1. Include jQuery and Tendina in your page
2. Set the menu markup
3. Summon the plugin

Tendina works with most browsers including Internet Explorer 7+. You can find more in the extensive documentation available.

The mobile-like, list-style, responsive sliding navigation menu is aptly named Sliding Menu. And it does exactly what you might expect.

This tool creates sliding menus for your website designs. You can create as many (or as few) layers to your menu slider as you like.

On on-demand sticky header.