Last August we published our original post on responsive navigation solutions, and even after only six months that post seems out-dated and almost reduntant. RWD techniques are moving on so fast that we felt we had to publish an up-to-date post for you.
Last year converting your navigation into a
<select> drop-down menu was all the rage. Now, its all about the “three line” toggle menu, drawer-style nav and animated side panels (Facebook-a-like). Hope these resources help you:
10 Responsive Navigation Solutions and Tutorials →
15 Responsive Navigation jQuery Plugins →
Basic Responsive “Three Line” Menu (CSS & jQuery)
This tutorial shows you how to, with a relatively short amount of code, progressively enhance a responsive site and build a “three line” responsive menu without adding additional markup to the page. All additional markup will be included dynamically using jQuery.
Responsive Multi-Level Navigation (CSS & jQuery)
With this approach to responsive navigation, you’re shown how to accommodate large, multi-level menus using media queries and jQuery, whilst trying to keep the markup as simple as possible and any external resources kept a minimum.
The aim is to build, on larger screens, a horizontal drop-down menu, with up to two levels of sub-menus that appear when the parent element is hovered over. And on smaller screens, a menu button that will display the menu vertically, displaying sub-menus when the parent element is clicked or touched.
Responsive Toggle Menu (CSS & jQuery)
This tutorial with show you how to, when the browser window is at mobile sizes, build a navigation bar that will “magically” transform into a dropdown list at mobile sizes and at tablet sizes and up, will remain as the horizontal menu bar.
Animated jPanelMenu (jQuery Plugin)
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. For browsers that do not support CSS transitions, the jQuery animation engine is used as a fallback.
CSS: Responsive Navigation Menu (CSS-only)
Smooth Responsive Dropdown Menu – Top Drawer (CSS & jQuery)
Modernizr will detect whether the user's device is capable of CSS transforms, if it isn't the menu will simply show and hide the menu after the button is pressed.
Simple Responsive Navigation (CSS & jQuery)
With this tutorial, you will be shown a very simple approach for building a responsive menu from the ground up using CSS3 media queries and a little jQuery to display the menu on a smaller mobile screen.
Mobile Drawer-Style Menu (jQuery Plugin)
This jQuery Mobile Menu Plugin creates a drawer-style navigation on your mobile site, as seen on iOS.
MeanMenu – A Media Query Independent Navigation (jQuery Plugin)
CSS3 Responsive Menu (CSS-only)
This tutorial offers a step by step instructions to building a responsive navigation menu that adapts to varying screen sizes (in a block-style), using media queries.
Simple & Responsive Mobile First Navigation (CSS-only)
In this tutorial you will learn how to build a simple and straight-forward mobile layout and navigation, then progressively enhance the design for larger screens, using media queries that detect steadily increasing screen sizes, adding style and features as you go.
‘Stacking’ Responsive Menu (Proof of Concept)
Please note that this solution is a proof of concept and should not be used in production. Having said that, go ahead and view the demo (link below) and resize your window and you will see the amazing ‘stacking effect’ of each of the pages sections.