• Pin It

CSS3 jQuery Dropdown Menus Collection

One of the most important thing when you create a website is the navigation section. It has to be intuitive to use and placed in a hotspot area of your design so the user can find it easily. It helps the visitor to access a specific topic that is on your website. Below will find a great selection of 40 jQuery CSS3 drop down menus and tutorials that will inspire you and help you in the process of creating an amazing drop down menu for your website.

1. A Different Top Navigation

When designing a new site, web designers usually face the age-old question: vertical or horizontal navigation? There are pros and cons to both solutions.


2. Sexy Drop Down Menu w/ jQuery & CSS

Studies show that top navigations tend to get the most visual attention when a user first visits a site.


3. Create Vimeo-like top navigation

The base for this tutorial is simple CSS drop down menu based on unordered list.


4. “Outside the Box” Navigation with jQuery

Just about every website uses the regular navigation concepts we’re all used to. After awhile this can get pretty boring, especially for designers who thrive on creativity. While mimicking the OS X dock and stacks isn’t new, it’s certainly not common.


5. Sliding Jquery Menu

This tutorial will show how to create a sliding menu button using jQuery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.


6. Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

Drop down menu navigation using HTML5 and CSS3. Also jQuery is used to handle the effects and add the finishing touches.


7. CSS3 Dropdown Menu

View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.


8. Build a Kick-Butt CSS3 Mega Drop-Down Menu

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout.


9. Simple CSS3 Dropdown Menu

As we know, CSS3 has many good features for help us creating more sweet User Interface. One of them is box shadow, it helps us adding shadow effect on each styled element. You must be familiar with drop down menu with shadow effect on it, I usually add the effect using some images but now we’ll create that one using pure CSS.


10. Designing the Digg Header: How To & Download

The design of Digg is full of smart ideas. The site identity is strong but doesn’t take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus.


11. Create a Slick Tabbed Content Area using CSS & jQuery

One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently.


12. Mega Drop Down Menus w/ CSS & jQuery


13. Create The Fanciest Dropdown Menu You Ever Saw


14. A circular menu with sub menus

A follow on from the simple single level circular menu, this one adds a sub menu level of smaller icons in a circular pattern within the top level circle. There is also the facility to add a simple description of each icon.


15. CSS3 dropdown menu

Today you’ll learn how to create your own CSS dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup. Let’s see how is made.


16. jQuery mb.Menu

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.


17. jdMenu Hierarchical Menu Plugin for jQuery

The jdMenu plugin for jQuery provides a clean, simple and elegant solution for creating hierarchical drop down menus for websites to web applications. View the feature list below to see if jdMenu is the solution for you.


18. Perfect signin dropdown box likes Twitter with jQuery

Twitter’s running a new homepage with clean and easy design. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. Today, I will make an entry to show you how to create a login drop down with Twitter style using jQuery.


19. Animated Navigation with CSS & jQuery

Flash navigation effects, done with CSS and jQuery.


20. Smooth Navigational Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that’s a good thing given the important role of this element in any site.


21. Make a Mega Drop-Down Menu with jQuery

The best mega drop-down menus contain simple, logical groups of information — so they’re easy to scan and navigate.


22. Fancy Sliding Menu for Mootools


23. CSS Droplist suitable for the iPad, iPhone and iPod Touch

This is a follow on from the previous menu which adds the ability to have all the top level items to be links to other pages. There are no images used in this menu which makes it very light weight and easy to change colors to suit your layout.


24. Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.


25. Professional dropdown menu


26. Dynamic PHP/CSS menu

Dynamic PHP menu that will allow you to play with lots of options and situations. The application required some special code because it’s based on member groups and so, the menu was supposed to reflect the permissions attached to each group in part.


27. Vertical navigation bar


28. jQuery Simple Drop-Down Menu Plugin


29. Solution For Very Long Dropdown Menus

The problem with long dropdowns is that the dropdown itself can go below the “fold” of the website. That is, below the visible area of the browser window. So in order to access those menu items down below, you need to scroll your browser window.


30. Creating an Outlook Navigation Bar using the ListView and Accordion Controls


31. Superfish – jQuery menu plugin

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements.


32. Reinventing a Drop Down with CSS and jQuery

For me, standard HTML Select element is pretty much annoying. It’s ugly. It can’t be styled properly in Internet Explorer. And it can’t contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).


33. Vertical / Horizontal MenuMatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.


34. jQuery Drop Down Menu

Full cross-browser compatibility. Fantastic animation and transition effects. Completely customizable styling with CSS. Powered by jQuery.


35. HoverAccordion

A jQuery Plugin for no-click two-level menus (or whatever else you want to do with it).


36. jQuery & CSS Example – Dropdown Menu

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit.


37. Simple jQuery Dropdowns

There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible.


38. Longed-For Multi-Level Drop-Down Menu Script

The main feature of this menu is the clear separation between the HTML code, software code and visual appearance.


39. mcDropdown jQuery Plug-in


40. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles

We got lots of fantastic feedback on our earlier iPod-style menu, and decided to upgrade it for jQuery 1.3. In the process of refining the script, we morphed it into more of a menu system, which can be used to create a simple dropdown menu for a single list of options.


Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+