In this example, i will show you how to create a jquery dropdown menu with google style, it also can be use as a "fixed" menu.
The most important thing on this menus is the css file , we are going to use jquery just to make appear o disappear the secundary options but all the magic is arround the css.
We are going to imitate the google style, if you check the google code you can see too many divs UL li and span elements, the idea is do the same without the extra elements, so we are going to use a simple ul li list, and everything will be wrapped there.
The HTML code
As we said we start with the clasical structure.
we have ul elements, li elements and links, every li element could have an ul element inside, that means it has a sub menu
also there is an span element that its optional due we are going to put an arrow there.
<div class="menu">
<ul>
<li><a href="#">More Examples</a>
<ul>
<li><a href="http://www.ajaxshake.com/en/JS/1111/jquery.html">Plugins and jQuery Examples</a></li>
<li><a href="http://www.ajaxshake.com/en/JS/1121/prototype.html">Prototype Examples</a></li>
<li><a href="http://www.ajaxshake.com/en/JS/12111/mootools.html">Mootools Examples</a></li>
<li><a href="http://www.ajaxshake.com/en/JS/12421/pure-javascript.html">Javascript Examples</a></li>
</ul>
</li>
</ul>
</div>
The CSS code
This code is a little larger , but the idea is create an horizontal menu, so we added some float to keep the options in one line.
we also can add some hover effects to the links, the colors are the colors used by google on their main site.
body{
padding:0;
margin:0;
}
.menu{
font: 13px/27px Arial,sans-serif;
color:#3366CC;
height:30px;
background: url(back.gif) repeat-x;
}
.menu a:hover{
background-color:#e4ebf8;
}
.menu a {
text-decoration: none;
padding: 4px 8px 7px;
color:#3366CC;
outline:none;
}
.menu ul{
list-style: none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin: 0 0 0 0px;
width:100%;
}
.menu ul li ul{
position: absolute;
border: 1px solid #C3D1EC;
box-shadow: 0 1px 5px #CCCCCC;
margin-top: -1px;
display:none;
padding: 0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.active a{
background-color: white;
border: 1px solid #C3D1EC;
border-bottom: 0;
box-shadow: 0 -1px 5px #CCCCCC;
display: block;
height: 29px;
padding: 0 8px 0 8px;
position:relative;
z-index: 1;
}
.active a:hover{
background-color:white;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border: 0 !important;
box-shadow: 0 0 0 #CCCCCC;
border:0;
width: 100%;
}
.arrow {
border-color: #3366CC transparent transparent;
border-style: solid dashed dashed;
margin-left: 5px;
position: relative;
top: 10px;
}
The javascript Code
In javascript we only add and remove the active class that shows the option selected by the user
(function($){
$.fn.fixedMenu=function(){
return this.each(function(){
var menu= $(this);
menu.find('ul li > a').bind('click',function(){
if ($(this).parent().hasClass('active')){
$(this).parent().removeClass('active');
}
else{
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
})
});
}
})(jQuery);
V2.0 Includes
Close the menu when you click away
Hi,
Great job!!
BM, DL, ... will use
Your home is valueble for me. Thanks!…
As Jim said... Can you help us to collapse the menu automatically when the user clicks in other place in the site.
below is fine for me, better idea?
(function($){
$.fn.fixedMenu=function(){
return this.each(function(){
var menulink = $(this).parent().find('.menu > ul > li > a');
menulink.bind('mouseout',function(){
var submenulink = menulink.parent().find('ul');
submenulink.hover(function(){
//
},function(){
menulink.parent().removeClass('active');
});
});
menulink.bind('mouseover',function(){
if(!$(this).parent().hasClass('active')) {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
});
});
}
})(jQuery);
Hello,
Thanks for the very cool tutorial.
I have a question related to dropdown lists and buttons used by Google. For example: http://translate.google.com, notice the drop down lists, tooltips, and buttons.
Is google using any JS/CSS library, that we can download and use in our websites?
Also, the two buttons "Demo" and "download" above. Are they using simple CSS? Any library to generate such buttons on the spot?
Thanks
Hi,
Cool !!!
How if an menu item has not submenu? Any example ?
My question is because a menu item without submenu is always drawed like if had submenu
BTW, an element for draw a separator will be also great.
Best regards.
Great tut --
You need to fix the SPAN CSS though -- As is will hide arrows in combination with CSS reset on SPAN.
Thank Again!
Sorry, I cant use it in Aspnet, can you help me?
Hi,
It's very useful, but does not handle submenus.
There are solutions to this?
Thanks,
Valeriano
In ie6 it's not working properly.
Thanks! nice menu style. hi, @Dileepa you can add like
/* ex. custom style for ie6 only */
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin: 0 0 0 0px;
width:200px;
}
/*more.. more.. bla blah*/
@jim
@alexspy
@mangsidi
$(function ($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
//close dropdown when clicked anywhere else on the document
$("html").click(function () {
menu.find('.active').removeClass('active');
});
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
} else {
//displaying the drop down menu
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
} else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.active').removeClass('active');
}
})
});
}
})(jQuery);
Also, I would remove href="#" from empty links and leave just
and add cursor:pointer;
in fixedMenu_style2.css
Hi there, maybe a stupid question...I'm using this menu but on click the submenu doesn't open. I put the js function into the $(document).ready function but it seems not to work. How could I load the function? Or there could be a conflict with other css properties?
Thanks in advance!
To have the menu auto-hide when clicking elsewhere on the page, this is working for me:
Under the following two lines inside the else clause:
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
Add:
var active = $(this).parent();
$('html').one('click', function () {
$(active).removeClass('active');
});
I haven't tested this extensively, but so far so good!
for mouseover / mouseleave events
(function($) {
$.fn.fixedMenu = function() {
return this.each(function() {
var menu = $(this);
menu.find('ul li > a').bind('mouseover', function() {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
var active = $(this).parent();
menu.find('ul li').one('mouseleave', function () {
$(active).removeClass('active');
});
}
})
});
}
})(jQuery);
thanks anon!
I've done a much more efficient way of doing it with hover or mouseover events.
JS
----------------
$('.dropdown').each(
function (){
$(this).parent().eq(0).hover(
function() {
$('.dropdown:eq(0)', this).show();
$(this).addClass('active')
},
function(){
$('.dropdown:eq(0)', this).hide();
$(this).removeClass('active')
}
);
});
HTML
---------------------
<a href="#" rel="nofollow">MENU 1</a>
<a href="#" rel="nofollow">SUB MENU 1</a>
<a href="#" rel="nofollow">SUB MENU 2</a>
<a href="#" rel="nofollow">MENU 2</a>
<a href="#" rel="nofollow">SUB MENU 1</a>
<a href="#" rel="nofollow">SUB MENU 2</a>
<a href="#" rel="nofollow">SUB MENU 3</a>
<a href="#" rel="nofollow">MENU 3</a>
<a href="#" rel="nofollow">SUB MENU 1</a>
<a href="#" rel="nofollow">SUB MENU 2</a>
<a href="#" rel="nofollow">SUB MENU 3</a>
thanks ! amazing job
is there a way to make it close when you click the page, all the examples dont work for me...
fixed, thanks for the comment.
Quick thing!
The links are not able to be clicked now :/ any ideas? Thanks for the awesome update! Live saver! 
Actually changed the menu to Menu Item
and the error seems to go away. I know its not to proper but I thought I would share... Thanks Lucas !
yes, fixed, sorry
how to make sub sub levels
IE Version: 8 does not display the "down arrow" for each menu as it does in Firefox. Any fix for this ? Thank-you.
I tried to float the menu to the right by changing float:left to float:right on .menu ul li That almost worked, but now when the top level is clicked, the sub-items seem to get clipped by the right side of the parent. Is it an option to float the menu to the right? I'll fiddle with it and try and make it work if there is not an easy way.
I changed the stopPropagation of place, so key combinations could work.
(function($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
//close dropdown when clicked anywhere else on the document
$("html").click(function () {
menu.find('.active').removeClass('active');
});
menu.find('ul li > a').click(function (event) {
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
} else {
//displaying the drop down menu
event.stopPropagation();
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
} else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.active').removeClass('active');
}
})
});
}
})(jQuery);
Click again over the the same option
Now . Version 2.0 . the menu collapses when you click away.
And is it possible to make it disappear clicking somewhere else (not only the same option)? Just like Google?