35 Excellent jQuery and CSS3 Navigation Menus

Posted in Coding, HTML & CSS, JS & AJAX2 years ago • Written by 14 Comments

Navigation is one of the most important elements of web design. Poor navigation will always take away from great content. Good navigation must possess both aesthetics and usability. That’s where jQuery and CSS3 navigation menus come handy.

With the features and customization level that jQuery and CSS3 offers, you can easily create the perfect navigation for your website. Yet it’s kind of difficult if you aren’t familiar with these. Fortunately there are people who have already written the code for you.

For this roundup we’ve prepared 35 fresh (most of them are from 2012), beautiful and straight away usable jQuery and CSS3 navigation menus. All you have to do is customize them for your specific needs!

35 Excellent jQuery and CSS3 Navigation Menus:

Are you ready to dip your hands into this amazing roundup? So are we!

1. jMenu

Jmenu-jquery-css-navigation

jMenu is a jQuery plugin that enables us to create horizontal navigation with unlimited sub-menus. Besides jQuery, it also requires jQuery UI and supports all the effects of this library (like fadeIn or slideDown). The markup of the menu is pretty clean as it makes use of nested lists.

2. Ascensor

Ascensor-jquery-css-navigation

Ascensor is a jQuery plugin which aims to train and adapt content according to an elevator system.

3. jQuery Dropdown Login Form

Login-jquery-css-navigation

A simple jQuery dropdown login form, it’s easy to implement and lightweight and does everything you need it to.

4. HorizontalNav

Horizontalnav-jquery-css-navigation

HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect, you’ll know it’s pretty annoying to do. This plugin makes it easy, even if you’ve created a responsive design.

5. jQuery Navigation Plugin

Dansdom-jquery-css-navigation

A simple jQuery navigation plugin with two possible nav effects so far: ‘fade’ and ‘slide’.

6. Automatic Ajax jQuery Navigation

Ajax-jquery-css-navigation

The goal of the jQuery plugin Ajax-Navigation is to automatically transform regular links into Ajax calls, for mobile browsers, avoid showing address bar on link clicks, improving the user experience, enable onLoad and onUnload function for each “page” navigated for having cool transition and more.

7. Kwicks Extended Navigation

Kwicks-jquery-css-navigation

Kwicks for jQuery started off as a port of the insatiably attractive Mootools effect, but has evolved into a highly customizable and versatile widget.

8. CasperJS

Casper-jquery-css-navigation

CasperJS is an open source navigation scripting and testing utility written in Javascript and based on PhantomJS — the scriptable headless WebKit engine. It eases the process of defining a full navigation scenario and provides useful high-level functions, methods and syntactic sugar for doing common tasks.

9. Bootstrap Image Gallery

Bootstrap-jquery-css-navigation

Bootstrap Image Gallery is an extension to the Modal dialog of Twitter’s Bootstrap toolkit, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionality.

10. Flipboard Layout

Flipboard-jquery-css-navigation

Flipboard Layout is an experimental page layout that let’s you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.

11. TinyNav

Tinynav-jquery-css-navigation

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

12. stack.js

Stack-jquery-css-navigation

stack.js is a presentation library with intuitive, scroll-based navigation.

13. flexnav

Flexnav-jquery-css-navigation

flexnav offers a device agnostic approach to complex site navigation.

14. jQuery Keyboard Navigation Plugin

Keynav-jquery-css-navigation

The jQuery Keyboard Navigation Plugin provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

15. Menutron

Menutron-jquery-css-navigation

Menutron is a jQuery plugin for responsive navigation menus.

16. jlnav

Jlnav-jquery-css-navigation

jlNav is a jQuery plugin which creates a nice little CSS-driven navigation menu from nested unordered lists.

17. Simple Responsive jQuery Navigation

Responsive-jquery-css-navigation

A framework that is both small and simple to use,  jQuery plugin for responsive (and multi-level) navigation.

18. Scrollpath

Scrollpath-jquery-css-navigation

Scrollpath is a plugin for defining custom scroll paths. It uses canvas flavored syntax to draw lines and arcs.

19. filtrify

Filtrify-jquery-css-navigation

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu. Advanced because you can search tags within tags and filter items by multiple tags from different categories and get live feedback on the number of items containing related tags.

20. Curtain.js

Curtain-jquery-css-navigation

Curtain.js transforms your website into an animated scrolling masterpiece.

21. PageSlide

Pageslide-jquery-css-navigation

PageSlide is a jQuery plugin which slides a webpage over to reveal an additional interaction pane.

22. Smooth Div Scroll

Div-scroll-jquery-css-navigation

Smooth Div Scroll is a simple jQuery plugin that scrolls content horizontally left or right.

23. HTML5/CSS3 Gray Navigation Menu

Html5-navigation-jquery-css-navigation

A simple HTML5 and CSS3 navigation menu.

24. Responsive CSS Navigation Menu

Responsive-2-jquery-css-navigation

This responsive CSS navigation menu uses media queries to achieve a fluid, responsive design that easily adapts to any size viewport and device. Three color variations are included, each with animated hover styles.

25. Pro CSS Menu

Pro-jquery-css-navigation

Pro CSS Menu is a versatile CSS menu, ready to be dropped into your own design. Coming in a number of different colour schemes, it’s also very easy to customize with a few CSS tweaks.

26. Bold CSS3 Navigation (premium – $4)

Bold-jquery-css-navigation

Bold CSS3 Navigation is a modern looking menu with beautiful typography and some really bold color combinations. It has two versions (horizontal and vertical) and eight color schemes which will make your page stand out. It is simple and really easy to use thanks to its semantic markup.

27. Modern Vertical Menu (premium – $2)

Vertical-jquery-css-navigation

Modern Vertical Menu is a clean looking navigation coming in two colour schemes. It can handle dropdown menus and it uses smooth slide effects to display them.

28. Modern Menu (premium – $2)

Modern-jquery-css-navigation

Modern Menu was designed and developed to be a modern, flexible, easy to use and customize menu. It is perfect for creating a quick and dynamic menu to use for your site.

29. Metro (premium – $3)

Metro-jquery-css-navigation

Metro is a CSS3 Menu inspired by the new Microsoft Metro UI. It comes with 4 different “box” layouts, 5 images animations and more nice features. Is very easy to use and install, well documented and no JavaScript/jQuery.

30. jQuery jPList Plugin (premium – $5)

Jplist-jquery-css-navigation

jPList is a flexible jQuery plugin for sorting, pagination and filtering of any HTML structure (DIVs, UL/LI, tables, etc).

31. Mega Menu Reloaded (premium – $5)

Mega-jquery-css-navigation

This Mega Menu Reloaded comes with awesome options and is the most complete solution to build mega menus. It also works without JavaScript and when disabled most of the content remains accessible. Optionnal features like the contact form or the tabs can be safely removed.

Tutorials

1. Animated Text and Icon Menu with jQuery

Animated-text-jquery-css-navigation

This tutorial is going to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

2. Animated Content Menu with jQuery

Animated-context-jquery-css-navigation

This tutorial is going to show you how to create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, the background image is going to change according to which menu item was clicked.

3. How to spice up your menu with CSS3

Css3-jquery-css-navigation

Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover.

4. Create a Dark Web Menu Navigation with Pseudo-elements

Dark-jquery-css-navigation

Learn how to recreate a dark menu navigation based on a PSD.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

111 Written ArticlesWebsite

Works at 1stwebdesigner, studies photography at ISSPand seeks to enjoy life. You can check out his photography blog and follow him on twitter.

14 Comments Best Comments First
  • Nik

    Thursday, July 5th, 2012 04:53

    5

    Good list, I never know that g talk can do so much things . really intresting

    http://www.Lightrans.com

    +8
  • Paul Weston

    Friday, July 13th, 2012 03:52

    10

    Thought this was a great article with some inspiring examples and great tutorials. This article will be a valuable resource for me going forward with my design and developments projects and something I will keep going back to. I loved all the examples you have included but the one I really liked was the Ascensor jQuery plugin with its smooth transitions. Great article and I look forward to more from you.

    +2
  • Christopher

    Saturday, July 14th, 2012 16:44

    11

    Very helpful collection with nice ideas of navigation menus.

    +2
  • Rakesh Suryavardhan

    Wednesday, July 4th, 2012 02:29

    2

    Awesome Collection, Special thanks for all those responsive plugins!

    +2
  • George

    Friday, July 6th, 2012 06:36

    6

    Yeah, thanks for that. I especially like the Menutron, cause I was looking for an easy way to implement a responsive navigation.

    0
    • Dainis Graveris

      Saturday, July 7th, 2012 10:07

      8

      Thank you, George! Hah, everything now is looked with responsive in mind :)

      0
  • Carl Potts

    Friday, July 6th, 2012 11:41

    7

    I’ll definitely be giving that jmenu a try soon, I’ve wanted to make a decent drop down menu for quite some time

    0
  • Kevin

    Thursday, September 6th, 2012 20:49

    12

    Great list, very useful resource :)

    0
  • jmy

    Monday, July 9th, 2012 04:39

    9

    Could you tell me what is the menu related to the first image illustrating the whole article at the very top of the page ? Thanks

    0
    • Alex

      Monday, September 24th, 2012 07:31

      13

      I want to know that too. Thanks

      -8
  • The Office Escape

    Wednesday, July 4th, 2012 06:29

    4

    Great list you have. A brilliant list that is useful. I can’t believe that’s the work of jQuery and CSS3 but its real. Great! No doubt that jQuery plus CSS3 is the unbeatable combo in Web designing.

    -1
  • membro

    Sunday, September 30th, 2012 17:56

    14

    Really awesome, great job.
    Thanks for share.

    -2
  • Awais Raza

    Tuesday, July 3rd, 2012 22:49

    1

    Good list, Now I can not imagine web designing without the power of jquery and css3. Thanks Daniels.

    -3
  • justwordpress

    Wednesday, July 4th, 2012 04:30

    3

    love the collection, but i have one big question: what to go for? css or jquery menu? while css is easier to customize i find it a bit tricky to tweak everything to work on all browsers… especially for Internet Explorer.. on the other hand jquery offers full compatibility even for IE, but it’s harder to tweak, especially when you are trying to create a responsive version of your menu…

    -4
  • membro

    Sunday, September 30th, 2012 17:56

    14

    Really awesome, great job.
    Thanks for share.

    -2
  • Kevin

    Thursday, September 6th, 2012 20:49

    12

    Great list, very useful resource :)

    0
  • Christopher

    Saturday, July 14th, 2012 16:44

    11

    Very helpful collection with nice ideas of navigation menus.

    +2
  • Paul Weston

    Friday, July 13th, 2012 03:52

    10

    Thought this was a great article with some inspiring examples and great tutorials. This article will be a valuable resource for me going forward with my design and developments projects and something I will keep going back to. I loved all the examples you have included but the one I really liked was the Ascensor jQuery plugin with its smooth transitions. Great article and I look forward to more from you.

    +2
  • jmy

    Monday, July 9th, 2012 04:39

    9

    Could you tell me what is the menu related to the first image illustrating the whole article at the very top of the page ? Thanks

    0
    • Alex

      Monday, September 24th, 2012 07:31

      13

      I want to know that too. Thanks

      -8
  • Carl Potts

    Friday, July 6th, 2012 11:41

    7

    I’ll definitely be giving that jmenu a try soon, I’ve wanted to make a decent drop down menu for quite some time

    0
  • George

    Friday, July 6th, 2012 06:36

    6

    Yeah, thanks for that. I especially like the Menutron, cause I was looking for an easy way to implement a responsive navigation.

    0
    • Dainis Graveris

      Saturday, July 7th, 2012 10:07

      8

      Thank you, George! Hah, everything now is looked with responsive in mind :)

      0
  • Nik

    Thursday, July 5th, 2012 04:53

    5

    Good list, I never know that g talk can do so much things . really intresting

    http://www.Lightrans.com

    +8
  • The Office Escape

    Wednesday, July 4th, 2012 06:29

    4

    Great list you have. A brilliant list that is useful. I can’t believe that’s the work of jQuery and CSS3 but its real. Great! No doubt that jQuery plus CSS3 is the unbeatable combo in Web designing.

    -1
  • justwordpress

    Wednesday, July 4th, 2012 04:30

    3

    love the collection, but i have one big question: what to go for? css or jquery menu? while css is easier to customize i find it a bit tricky to tweak everything to work on all browsers… especially for Internet Explorer.. on the other hand jquery offers full compatibility even for IE, but it’s harder to tweak, especially when you are trying to create a responsive version of your menu…

    -4
  • Rakesh Suryavardhan

    Wednesday, July 4th, 2012 02:29

    2

    Awesome Collection, Special thanks for all those responsive plugins!

    +2
  • Awais Raza

    Tuesday, July 3rd, 2012 22:49

    1

    Good list, Now I can not imagine web designing without the power of jquery and css3. Thanks Daniels.

    -3

Comments are closed.

54.197.87.25 - unknown - unknown - US