15 Responsive Navigation jQuery Plugins

For the most of us, the most difficult aspect of building a responsive layout is the planning and coding of the 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 responsive navigation jQuery plugins.

Sidr

Sidr is an easy to use jquery plugin that will create a responsive Facebook-a-like side menu

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).

Sidr →GitHub →

Navgoco

Navgoco is a simple  plugin that can turn a nested unordered list of links into a beautiful vertical multi-level slide navigation

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.

Navgoco →GitHub →

FlexNav

FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down 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’.

FlexNav →GitHub →

SmartMenus

The SmartMenus jquery plugin will create a horizontal or vertical responsive and accessible list-based menu

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.

SmartMenu →GitHub →

jQuery Menu Aim

jQuery 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

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.

jQuery Menu Aim →

Side Toggle Menu

Side Toggle Menu allows you to add a side bar menu to your layout that slides in from the left or right

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.

Side Toggle Menu →

jQuery slimMenu

slimMenu which is made to create responsive and multi-level navigation menus on the fly

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

jQuery slimMenu →GitHub →

jPanelMenu

jPanelMenu is a jQuery plugin that creates an animated paneled-style menu

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.

jPanelMenu →GitHub →

Flaunt.js

Flaunt.js is a plugin that allows you to create a responsive nested navigation

Flaunt.js is a plugin that allows you to create a responsive, nested navigation out of the box.

Flaunt.js →

Naver

Naver is a simple plugin that will automatically turn a basic navigation system into a mobile friendly system

Naver is a simple plugin that will automatically turn a basic navigation system into a mobile friendly system.

Naver →GitHub →

TinyNav.js

TinyNav.js is a lightweight plugin that converts ul and ol menus into a select dropdown

TinyNav.js is a lightweight plugin (362 bytes) that converts <ul> and <ol> menus into a select dropdown. It also automatically selects the current page and adds selected="selected" for that item.

TinyNav.js →GitHub →

Responsive-Menu

Responsive-Menu is tiny plugin that will turn your site's navigation into a dropdown (<select>) when your browser is at mobile widths.

Responsive-Menu →

HorizontalNav

The HorizontalNav plugin will span a horizontal navigation to fit the full width of its container

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.

HorizontalNav →GitHub →

jQuery.mmenu

jQuery.mmenu is a plugin for creating slick app look-alike sliding menus

jQuery.mmenu is a plugin for creating slick, app look-alike sliding menus for you mobile website with only one line of Javascript:

[js]$(“#nav”).mmenu();[/js]

jQuery.mmenu →

MeanMenu

MeanMenu is a media query independent plugin for converting a standard menu into a mobile responsive menu

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.

MeanMenu →GitHub →

Author: (582 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments