For the most of us, the most difficult aspect of building a responsive layout is the planning and coding of its navigation. As there is no truly tried and tested universal solution, the style of the menu you use will depend on the type of site you are building.
If it is a small site, a
<select> drop-down menu or a basic “three line” toggle menu will probably be suffice. But if it is a larger site (an ecommerce store for example) that relies upon a mega-menu for navigation on its desktop version, then a drawer-style navigation or an animated side panel menu will most likely help you.
So, no matter what type of site you are building, in this post we will hopefully have the solution for you in the form of these jQuery plugins.
10 Responsive Navigation Solutions and Tutorials →
10 More Responsive Navigation Solutions →
Sidr is an easy to use plugin that will create a responsive Facebook-a-like side menu. It allows you to create multiple sidrs menus on either side of your layout.
(We use Sidr on Speckyboy).
Navgoco is a simple plugin that can turn a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu.
FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu. From the developer: It is a ‘device agnostic approach to complex site navigation with support for touch and keyboard accessibility’.
The SmartMenus is a feature-rich plugin that will create a horizontal or vertical responsive and accessible list-based menu that works on all devices.
Menu-Aim is a plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents.
This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user's mouse movement. This can make for quicker transitions when navigating up and down the menu.
Side Toggle Menu allows you to add a side bar menu to your layout that slides in from the left or right edge of the browser window. It can work by either moving the page over and making room for itself, or by overlaying the page.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.
jPanelMenu is a jQuery plugin that creates an animated paneled-style menu (like the type seen in the mobile versions of Facebook and Google). Animation is handled by CSS transitions for browsers that support it and are hardware-accelerated on supporting devices, so the animations are silky smooth.
Flaunt.js is a plugin that allows you to create a responsive, nested navigation out of the box.
Naver is a simple plugin that will atuomatically turn a basic navigation system into a mobile friendly system.
TinyNav.js is a lightweight plugin (362 bytes) that converts
<ol> menus into a select dropdown. It also automatically selects the current page and adds
selected="selected" for that item.
Responsive-Menu is tiny plugin that will turn your site's navigation into a dropdown (
<select>) when your browser is at mobile widths.
The HorizontalNav plugin will span a horizontal navigation to fit the full width of it's container and comes with an option to either make it responsive or not.
MeanMenu is a media query independent plugin for converting a standard menu into a mobile responsive menu. It is not a menu system replacement, but simply some lightweight JS to convert a standard menu into a mobile version.
You might also like…
- 10 Responsive Navigation Solutions and Tutorials
- 10 More Responsive Navigation Solutions
- 50 Most Useful jQuery Plugins from 2012
- Top 50 Useful jQuery Plugins from 2011
- Our 50 Favorite Web Developers Resources and Tools from 2011
- 50 Free Tools and Apps for Web Designers and Developers