10 Responsive Navigation Solutions and Tutorials

As responsive design rapidly increases in popularity, we felt we would take a look at some of the varied solutions and techniques that are being adopted for managing the navigation/menu on smaller screened devices.

Planning and building your menu for mobiles will perhaps be the trickiest aspect of your responsive layout, not just with the coding but also having to decide what will stay and what will have to go to fit everything into the smaller screen. It is a juggling act between both readability and the desire to show as much on the screen as possible.

Hopefully the solutions we have for you below will help get you on your way.

You might also like to check out these related articles:
10 More Responsive Navigation Solutions →
15 Responsive Navigation jQuery Plugins →

Progressive And Responsive Navigation Tutorial

Progressive And Responsive Navigation tutorial

This tutorial, from Smashing Magazine, takes you through the steps for coding your navigation using a little forethought and considering the principles of progressive enhancement from the beginning and applying some responsive practices at the end, allowing your navigation to easily accommodate less-capable browsers and modern browsers in both desktop and mobile environments.

Progressive And Responsive Navigation →Demo →

Responsive Navigation Menu Tutorial

code a simple and effective responsive navigation menu

With this tutorial you will learn how to code a simple and effective responsive navigation menu, with a grid layout, that you will be able to easily modify and reuse in your own projects.

Responsive Navigation Menu →Demo →

TinyNav.js jQuery Plugin

TinyNav.js navigations to a select dropdowns for small screens

TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screens. It also automatically selects the current page and adds selected="selected" for that item.

TinyNav.js →Demo →

Responsive Drop Down Navigation Menu Tutorial

Responsive Drop Down Navigation Menu tutorial

The code for this menu is based on the famous Suckerfish Dropdown menu, restyled to make it responsive. It will work great in all modern desktop browsers without Javascript.

Responsive Drop Down Navigation Menu →Demo →

HorizontalNav jQuery Plugin

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of container

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container. It comes with an option to make it responsive, allowing the navigation to auto-adjust when the window is resized.

HorizontalNav →

Responsive, Mobile-First Navigation Menu Tutorial

Responsive tutorial Mobile-First Navigation Menu

This tutorial demonstrates how to develop a complex responsive navigation menu using the "Mobile-First Approach". The aim is to present mobile users with a pseudo-native, touch-conducive and interactive interface that enables them to navigate the website with ease.

Responsive, Mobile-First Navigation Menu →Demo →

SelectNav.js Javascript Plugin

SelectNav.js a JavaScript plugin that lets you convert your website navigation into a select

SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a <select> drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.

SelectNav.js →Demo →

Convert a Menu to a Dropdown for Small Screens Tutorial

Convert a Menu to a Dropdown for Small Screens

Convert a Menu to a Dropdown for Small Screens →Demo →

Simple Responsive Menu

Simple Responsive Menu convert it to a small menu button for smaller screens that only appears when pressed

This tutorial takes a typical desktop menu and shows you how to, using Modernizr, jQuery and media queries, convert it to a small menu button for smaller screens that only appears when pressed, and pressing it again will retract it.

Simple Responsive Menu →

Mobile Menu jQuery Plugin

Mobile Menu a jQuery plugin that turns site navigation into a dropdown

Mobile Menu is a jQuery plugin that turns your site's navigation into a dropdown (<select>) when your browser is at mobile widths. It comes with a handful of options, including the really useful "combine", that allows you to convert multiple navigation lists into a single dropdown.

Mobile Menu →

Further Reading & Resources…

  • Responsive Navigation Patterns →
    Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. This detailed article, from Brad Frost, takes a look at the various ways of handling navigation for small screen sizes and discusses how mobile navigation must strike a balance between quick access to a site’s information and unobtrusiveness.
  • Scalable Navigation Patterns in Responsive Web Design →
    Here are some of the lessons learned by Michael Mesker, from palantir.net, while working on a recent real-life, large-scale project. Specifically, this post focuses on how they chose to deal with deep navigation in the landscape of a templated environment.
  • 7 Responsive Navigation Patterns →

Author: (921 Posts)

This post has been written by the team here at Speckyboy Design Magazine.

Comments