Home » Featured » Responsive navigation solutions and tutorials

Responsive navigation solutions and tutorials

au1

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.

Responsive Navigation Menu (Tutorial)

au2

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.

Demo Responsive Navigation Menu

TinyNav.js (jQuery Plugin)

au3

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.

DemoDOWNLOAD

HorizontalNav (jQuery Plugin)

au4

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)

au5

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.

Demo Responsive, Mobile-First Navigation Menu

Simple Responsive Menu

au6

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)

au7

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

SelectNav.js (Javascript Plugin)

au8

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.

Demo SelectNav.js

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top