10 More Responsive Navigation Solutions

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:

Basic Responsive “Three Line” Menu (CSS & jQuery)

Basic Responsive Three Line Menu

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 Three Line Menu →

Responsive Multi-Level Navigation (CSS & jQuery)

Responsive Multi-Level Navigation

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 Multi-Level Navigation →Demo →

Responsive Toggle Menu (CSS & jQuery)

Responsive Toggle Menu

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.

Responsive Toggle Menu →Demo →

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.

jPanelMenu →Demo →GitHub →

CSS: Responsive Navigation Menu (CSS-only)

CSS - Responsive Navigation Menu

With this technique you will be shown how to create a responsive menu, without JavaScript, using clean and semantic HTML5 markup. The menu can be aligned left, center or right and this will toggle on hover, which is much more user-friendly than on click. This technique works on all mobile and desktop browsers including Internet Explorer.

Responsive Navigation Menu →Demo →

Smooth Responsive Dropdown Menu – Top Drawer (CSS & jQuery)

Smooth Responsive Dropdown Menu - Top Drawer

This tutorial demonstrates how to create a smoother reveal mobile menu using CSS3 rather than animating it with JavaScript. Once you click the menu icon, the click event will assign the class of active to the drawer container which alters the translate value to bring the drop-down menu nice and smoothly into view.
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.

Top Drawer →

Simple Responsive Navigation (CSS & jQuery)

Simple Responsive Navigation

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.

Simple Responsive Navigation →Demo →

Mobile Drawer-Style Menu (jQuery Plugin)

This jQuery Mobile Menu Plugin creates a drawer-style navigation on your mobile site, as seen on iOS.

Mobile Drawer-Style Menu →

MeanMenu – A Media Query Independent Navigation (jQuery Plugin)

MeanMenu - A Media Query Independent Navigation

MeanMenu jQuery Plugin →DemoGitHub →

CSS3 Responsive Menu (CSS-only)

Creating a CSS3 Responsive Menu

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.

CSS3 Responsive Menu →Demo →

Simple & Responsive Mobile First Navigation (CSS-only)

Simple & Responsive Mobile First Navigation

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.

Simple & Responsive Mobile First Navigation →Demo →

‘Stacking’ Responsive Menu (Proof of Concept)

Stacking Responsive Menu

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.

Stacking Responsive Menu →Demo →

You might also like…

10 Responsive Navigation Solutions and Tutorials →
15 Responsive CSS Frameworks Worth Considering →
15 More Responsive CSS Frameworks & Boilerplates Worth Considering →
20 Free Responsive HTML & CSS Templates →
15 Free WordPress Themes with a Responsive Layout →
25 jQuery Plugins to help with Responsive Layouts →
Responsive Image Techniques & Resources →

Speckyboy Design Magazine

Leave a Comment