Web Toolbar by Wibiya 15 Responsive Navigation jQuery Plugins »

15 Responsive Navigation jQuery Plugins

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

jquery_menu_01

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.

Demo

Download

Navgoco

jquery_menu_02

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.

Demo

Download

FlexNav

jquery_menu_03

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

Demo

Download

SmartMenus

jquery_menu_04

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.

Demo

Download

jQuery Menu Aim

jquery_menu_05

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.

Demo & Download

Side Toggle Menu

jquery_menu_06

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.

Demo & Download

jQuery slimMenu

jquery_menu_07

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

Demo

jPanelMenu

jquery_menu_08

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.

Demo

Download

Flaunt.js

jquerymenub

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

Demo & Download

Naver

jquery_menu_10

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

Demo

Download

TinyNav.js

jquery_menu_11

TinyNav.js is a lightweight plugin (362 bytes) that converts

    and

      menus into a select dropdown. It also automatically selects the current page and adds selected=”selected” for that item.

      Demo

      Download

      Responsive-Menu

      Demo & Download

      HorizontalNav

      jquery_menu_12

      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.

      Demo

      Download

      jQuery.mmenu

      jquerymenua

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

      Demo & Download

      MeanMenu

      jquery_menu_13

      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.

      Demo

      Downlaod

, , , , , ,

No comments yet.

Leave a Reply