You probably heard how popular jQuery became in the last period and this is mainly because of its flexibility and because many developers like working with it. In the past years these developers have been creating a lot of tools with jQuery and today we take a look at a specific category: jQuery and CSS3 dropdown menus.
They can always come in handy and they have always been popular because they help you spare a lot of space and are fancy, if they are designed by people with flair. The ones we will showcase today look very good and we hope you will want to use them.
Free jQuery and CSS3 Dropdown Menus for Websites
jQuery Drop Down Menu
jQuery Menu Slide
Our second example comes from the same developer, only with a different style. It still comes in six different colors and free for non-commercial projects, as well as for $49.95 for the full product. It has a great animation and some very cool transition effects on hover and I think this is something you might be able to implement in many different kinds of designs.
CSS3 Mega Drop-Down Menu
Mega Menus are usually used on corporate/e-commerce websites, but they become more popular because they are a great way to display/organize content.
jQuery Horizontal Menu
Again, from the same developer, we have this third menu as well. You already know the trick, six different colors, free for non-commercial purposes as long as you link back to it and comes with a quite cool transition and really nice effects on hover.
Lightweight, Simple, Styleable jQuery + CSS Dropdown Menu Plugin
A very simple dropdown menu can be downloaded from here. The advantage of choosing this one is that it comes both as horizontal and vertical navigation and it is quite simple, so it can be integrated in every design because it is very easy to customize.
Drop Down Menu with Search Box
In this tutorial, we will be creating a flat style navigation with a search box and dropdown menu from the Square UI.
Dropit is the next on the list and it is here because, again, it is very easy to implement and use, as well as very easy to customize thanks to its simple, minimalistic design. You can get a demo of how the dropdown works on the page, but I can tell you already now that there are some nice standard effects on it.
Fancy Drop Down Menu
This next one is free and comes with a very cool design, works for Firefox, Safari and Chrome and has a great effect on hover, when a lower level menu appears. It would be cool if this would be a multi-level dropdown menu, but it is unfortunately not. However, still a good choice.
Slide Down Box Menu with jQuery
This one has been around for quite some time, but it still is one of the most popular jQuery dropdown menus out there, probably because it is quite unique and looks like high quality work. When hovering on a menu item, a thumbnail you chose when installing it pops up, as well as the sub-level menu items.
CSS3 Dropdown Menu
In this tutorial we will code in pure CSS3 the Navigation Menu that you can find in Impressionist UI.
Our next example is very good for menus with lots of items, as you can actually scroll within the dropdown area by just hovering the mouse up and down. While this is impossible to work on mobile and tablets, it is a good solution for websites made for desktop in case there are lots of menu items on the sub-level domains. You can download the archive here.
jQuery menu plugin
What I like mostly about this other example is that it comes in different versions, as horizontal, vertical and even as a nav-bar. It supports multiple lower level items, which can only be a positive thing, and comes in a relatively simple design, which can be adjusted quite easily.
Simple Drop Down Menu
We also had to find something very special for today’s showcase, and we have with this example. Not only it works as a normal dropdown menu, but it can be implemented differently as well, by filling in the dropdown areas with sign-up or log-in forms. This is something that you might find useful in case you are not willing to use a lot of space for all those forms you have on your site.
jQuery Vertical Drop-Down Menu
You can get this one for only $5 from Code Canyon, which is always a guarantee of high quality work. The script is a complex jQuery horizontal menu and it is very easy to implement in WordPress as well, if that’s what you are running. Different effects can be mixed (fade and slide) and the appearance is easy to adjust in CSS.
Responsive Mega Menu Complete Set
For another $5 you can get this amazing jQuery complex menu that is compatible with all major browsers and comes in different versions (on hover, on click or on toggle). What is good about this is that the dropdown areas are not only for menu items, but also for whole sections of content, as well as media such as images and video. Oh yeah, and let’s not forget that the tool is also responsive!
Metro Style Dropdown Menus
If you are a fan of flat (or, to be more specific, of Metro style UI), this dropdown menu is definitely one for you, as it looks exactly like Windows 8, including with the specific colors. It is easy to use, fully jQuery and CSS compatible, it comes with two different styles of dropdown animation and is compatible with all major browsers. And all this for only $4. I think it is definitely worth the fee.
jQuery CSS3 DropDown Menu Plugin
Today’s last example comes from Code Canyon as well and only costs $4, just like the one above. Its animation is driven by CSS3, it is lightweight and works on smartphones too, not only on desktop devices. You can purchase the package from here.
We spent a lot of time to try finding the best examples of free jQuery & CSS3 dropdown menus on the web for you and we believe we did a quite good job. However, as always, we would love to hear your opinion on these examples and hear if you would use some of them on your websites.