45 jQuery Menu Tutorials Plugins
1. FormBox – A jQuery & CSS3 Drop-Down Menu With Integrated Forms
Today I’d like to share something new with you – I call it jQuery
FormBox. When designing the layout for a website there’s one thing that
we as designers are always conscious of – making things easier for
users. No matter what it is your site offers, you’re still going to need
to balance the interface in a way that keeps it very easy for users to
find and perform core site functions around your site or service,
ideally without having to load up a completely different page.
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. Having organized and
intuitive navigation is key — and while most drop down menus may look
aesthetically pleasing, developing them to degrade gracefully is also
essential. In this tutorial I would like to go over how to create a sexy
drop down menu that can also degrade gracefully.
3. Slick Drop down Menu with Easing Effect Using jQuery & CSS
Drop-down menus are an excellent feature because they help clean up a
busy layout. When structured correctly, drop-down menus can be a great
navigation tool, while still being an attractive design feature.
4. How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery
In this tutorial, we’ll take a look and see what we can achieve with
HTML5 and CSS3 when it comes to the staple of current web sites: the
humble drop-down navigation menu. We’ll also use jQuery to handle the
effects and add the finishing touches for us.
5. Slide Down Box Menu with jQuery and CSS3
In this tutorial we will create a unique sliding box navigation. 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.
6. Slide-Down Mega Drop-Down Menus with Ajax and jQuery
Here we have a group of social bookmarking dudes and chicks for your
websites, blogs and profiles. The set contains: RSS, 非死book, 推ter,
StumbleUpon, 油Tube, Digg, Delicious, Technorati and LinkedIn.
Downloading this package you get PNGs + AI file with fully editable
source for all characters. Enjoy and leave us a comment if you like 
7. 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. For users without javascript, it falls back on a CSS menu system
based on Matthew Carroll’s keyboard accessible flavor of Suckerfish
Dropdowns by Patrick Griffiths and Dan Webb.
8. Create Simple Dropdown Menu Using jQuery
In this post, we are going to create a simple dropdown menu with the
help of jQuery, take a look at the demo of it first. I assume you know
at least the basics of jQuery and CSS. The key to creating the dropdown
menu is to use the CSS’s properties: position, top, left, z-index.
9. Create Bounce out Vertical menu with jQuery
So here will create a simple bounce out vertical menu with the help
of little bit css3 and jquery framework. Beautiful navigation menu can
stand out your website from the crowd of creative navigations. That’s
why we tried to create vertical menu which on mouse hover give a nice
bounce out sliding effect. Lets begin..
10. How to Make a Smooth Animated Menu with jQuery
The menu has such a smooth animation because of a thing called
“easing”. Adobe’s definition in the Flash Developer Center is a little
more complete
11. “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.
12. 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.
13. Create The Fanciest Dropdown Menu You Ever Saw
Good evening web designers. I hope you have all had a great weekend,
and are ready to start the working week tomorrow. I have something very
special to share with you today.
14. jQuery Simple Drop-Down Menu Plugin
So, I present to you the simple drop-down menu. The peculiarity of
this menu is that these 20 lines of code and absence of various
cumbersome mouse events within html code. This script requires the
jQuery library. There’s a version that does not require jQuery.
15. 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. One example being horizontal navigation limits the
number of links you can have due to a limited page width. This is
usually solved by including a drop down system. However, if you are
attempting to make your particular site stand out, you might consider
thinking outside the “norm”.
16. Create a Good Looking Floating Menu with jQuery Easing
This tutorial will show you how to create a horizontal menu with
floating effect by using jquery.easing and jquery animate function. It’s
a simple effect but the final product is quite nice looking and
elegant. 
17. Create an apple style menu and improve it via jQuery
Since I wrote my last tutorial on how to create a CSS only multilevel
dropdown menu I got a lot of visitors who wanted to know how I created
the main navigation of kriesi.at. (a so called kwicks menu) The interest
in extraordinary menus seems to be high nowadays, so today I will teach
you how this is done.
18. Create Vimeo-like top navigation
I really like the top navigation implemented on Vimeo.com. First time
I saw it I wanted to recreate it. And this is exactly what I am going
to do in this tutorial. 
Hi there welcome to another tutorial, in this tutorial il show you
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.
20. Make a Mega Drop-Down Menu with jQuery
SitePoint’s Craig Buckler blogged yesterday about what he sees as the next big thing in web design: mega drop-down menus.
21. jGlideMenu
jGlideMenu is an updated version of the fastFind Menu that supports
inline and AJAX menu definitions and uses an easier syntax than the
original version.
22. jQuery iPod-style Drilldown Menu
We created an iPod-style drilldown menu to help users traverse
hierarchical data quickly and with control. It’s especially helpful when
organizing large data structures that don’t translate well into
traditional dropdown or fly-out menus.
23. Superfish v1.4.8 – jQuery menu plugin by Joel Birch
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:
24. 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. No more onmouseover or
onmouseout or, worse, multidimensional array of elements in a .js file.
25. 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).
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. Very
stripped down code and minimal styling, yet still have all the
functionality typically needed.
27. A Simple and Beautiful jQuery Accordion Tutorial
I was about running of ideas in tutorials, picking my own brain, and
finally, I’ve almost forgotten the awesomeness of accordion. Yes, we
will be creating a Accordion! Accordion has several characteristics
28. Vertical Scroll Menu with jQuery Tutorial
Just last week, I came accross to this website Narrow Design. His
scroll menu caught a lot of my attentions, I played with it for a while.
Yes, unfortunately, it’s built in flash. And, Yes, we are going to
implement it with jquery – javascript based scroll menu that will do the
same thing. Of course, it will not be 100% the same, because some of
the fancy features just not that practical to implement with javascript.
29. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready
30. mcDropdown jQuery Plug-in v1.2.10
31. jQuery Tabbed Interface / Tabbed Structure Menu Tutorial
Nowadays, a lot of websites are using tab based content as a way to
save spaces in a webpage. I have seen a lot of wordpress websites using a
tabbed interface for its category, posts, comments and random posts
content. It’s a good “space-saver” and if used it correctly, it can
boost your website usability as well. Right, first of all, we need to
have the ideas and the design structure for this tabbed interface.
This menu turns a nested UL list into a horizontal drop line tabs
menu. The top level tabs are rounded on each side thanks to the use of
two transparent background images, while the sub ULs each appear as a
single row of links that drop down when the mouse rolls over its parent
LI. The menu also manages to sneak in a little CSS3, making use of the
“border-radius” property to give each link within the sub ULs rounded
edges when the mouse hovers over them..
33. Cut & Paste jQuery Mega Menu
Mega Menus refer to drop down menus that contain multiple columns of
links. This jQuery script lets you add a mega menu to any anchor link on
your page, with each menu revealed using a sleek expanding animation.
Customize the animation duration plus delay before menu disappears when
the mouse rolls out of the anchor. Mega cool!
34. How to implement a perfect multi-level navigation bar
36. BySlideMenu
37. BySlideMenu
Today we will create a collapsing menu that contains vertical
navigation bars and a slide out content area. When hovering over a menu
item, an image slides down from the top and a submenu slides up from the
bottom. Clicking on one of the submenu items will make the whole menu
collapse like a card deck and the respective content area will slide
out.
38. Awesome Cufonized Fly-out Menu with jQuery and CSS3
In today’s tutorial we will create a full page cufonized menu that
has two nice features: when hovering over the menu items we will move a
hover-state item that adapts to the width of the current item, and we
will slide out a description bar from the left side of the page,
reaching towards the current menu item.
39. Little Boxes Menu with jQuery
Today we will create a menu out of little boxes that animate randomly
when a menu item is clicked. The clicked menu item expands and reveals a
content area for some description or links. When the item is clicked
again, the boxes will come back, reconstructing the initial background
image.
40. Scrollable Thumbs Menu with jQuery
In this tutorial we will create a fixed menu with scrollable thumbs.
The idea is to have a menu fixed to the bottom of the page and let a
vertical stack of thumbs appear when hovering over a menu item. The
thumbs are scrollable by moving the mouse up and down which makes a
really nice effect. We will add some CSS3 properties for spicing up the
looks.
41. Rocking and Rolling Rounded Menu with jQuery
In this tutorial we are going to make use of the incredibly awesome
rotating and scaling jQuery patch from Zachary Johnson that can be found
here. We will create a menu with little icons that will rotate when
hovering. Also, we will make the menu item expand and reveal some menu
content, like links or a search box.
42. A Fresh Bottom Slide Out Menu with jQuery
In this tutorial we will create a unique bottom slide out menu. This
large menu will contain some title and a description of the menu item.
It will slide out from the bottom revealing the description text and
some icon. We will use some CSS3 properties for some nice shadow effects
and jQuery for the interaction.
43. CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
Today I want to show you, how to create an Apple-style navigation
menu with a twist. Although “fancy” and “Apple-style” don’t really go
together, I thought that it’s time for something different.
44. CSS3 Styled jQuery Dropdown
Today I want to show you, how to create an Apple-style navigation
menu with a twist. Although “fancy” and “Apple-style” don’t really go
together, I thought that it’s time for something different.
45. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
Today I want to show you how to create an amazing slide out menu or
navigation for your website. The navigation will be almost hidden – the
items only slide out when the user hovers over the area next to them.
This gives a beautiful effect and using this technique can spare you
some space on your website. The items will be semi-transparent which
means that content under them will not be completely hidden.
ajax 
umltool