Developer News, More

Awesome JQuery Plugins For Navigation And Menus

Sidr-
jQuery is a very powerful tool. With a jQuery menu plugin your site visitors may have the best and most dynamic navigation available. jQuery is a lightweight, cross-browser compliant, incredibly awesome and extremely powerful JavaScript framework (library) that emphasizes and simplifies interaction between JavaScript, CSS and HTML. With jQuery, you can change the look and feel of your website into something extraordinary, and it is easier than you think.

Awesome JQuery Plugins For Navigation And Menus

1.Slidebars

Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.

 

Slidebars

[button url=”http://plugins.adchsm.me/slidebars/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”https://github.com/adchsm/Slidebars” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

2.Pushy

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions. This project was inspired by the off-canvas navigation menu seen on Medium.

 

Pushy

[button url=”http://www.christopheryee.ca/pushy/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”https://github.com/christophery/pushy” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

3.Sidr

Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive

Sidr-

[button url=”http://www.berriart.com/sidr/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]live Demo[/button]

[button url=”https://github.com/artberri/sidr” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

4.JQuery Square Menu

Create a Square-like Menu Animation for Website using jQuery and CSS3.

jQuery-Square-Menu

[button url=”http://www.thepetedesign.com/demos/square_menu_demo.html” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”https://github.com/peachananr/square_menu” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

5.Mashable Style Ajax Drop Down Menu

Mashable style dynamic drop down menu using Php, Mysql & jQuery Ajax. In mashable, you can able to see all posts from the category from their header drop down menu.

 

Mashable-Style-Ajax-Drop-Down-Menu

[button url=”http://w3lessons.info/demo/dynamic-dropdown/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”http://w3lessons.info/2013/12/26/mashable-style-ajax-drop-down-menu-using-php-mysql-jquery/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

6.Perspective Page View Navigation

Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects.

 

Perspective-Page-View-Navigation

[button url=”http://tympanus.net/Development/PerspectivePageViewNavigation/index3.html” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

7.Navgoco

Navgoco is a simple JQuery plugin which turns 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.

 

Navgoco1

[button url=”http://apps.komposta.net/jquery/navgoco/demo/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”https://github.com/tefra/navgoco” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

8.JQuery And CSS3 Awesome Slide Down Box Menu

The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left or to the right depending on which menu item we are hovering.

 

jQuery-and-CSS3-Awesome-Slide-Down-Box-Menu1

[button url=”http://www.htmldrive.net/items/demo_show/199″ postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”http://www.htmldrive.net/items/show/199/jQuery-and-CSS3-Awesome-Slide-Down-Box-Menu.html” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

9.Image Menu With Jquery

Image-Menu-with-Jquery1

[button url=”http://www.alohatechsupport.net/examples/image-menu-1.html” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

10.Create Vimeo-Like Top Navigation

Create-Vimeo-like-top-navigation1

[button url=”http://www.jankoatwarpspeed.com/wp-content/uploads/examples/vimeo_navigation/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Live Demo[/button]

[button url=”http://www.jankoatwarpspeed.com/create-vimeo-like-top-navigation/” postid=”” style=”btn-primary” size=”btn-default” target=”_blank” fullwidth=”false”]Download[/button]

 

 

 

 

You Might Also Like

One comment

Leave a Reply