Simple drop down menu using jQuery

Creating the drop down menu is very simple using jQuery when compared to javascript. By just adding a small piece of jQuery code you can do a lot of things within drop down menu. Using this you can able to implement multilevel drop down menus

Refer the following source code to create a drop down menu

EXAMPLE:

1. Create a HTML file with unordered list and save them as dropdownmenu.html

<html>
<head>
<title>Learnwebdevelopment</title>
<link rel="stylesheet" type="text/css" href="dropdownmenu.css">
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="dropdownmenu.js"></script>
</head>
<body>
<ul class="Menu">
<li><a href="#">menu item 1</a></li>
<li><a href="#">menu item 2</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li><a href="#">menu item 3</a>
<ul>
<li><a href="#">sub menu item 1</a></li>
<li><a href="#">sub menu item 2</a></li>
<li><a href="#">sub menu item 3</a></li>
<li><a href="#">sub menu item 4</a></li>
</ul>
</li>
<li><a href="#">menu item 4</a></li>
<li><a href="#">menu item 5</a></li>
</ul>
</div>
</body>
</html>

2. Create the CSS file and save them as dropdownmenu.css

.Menu { margin:0; padding:0; }
.Menu li { list-style:none; float:left; font:12px Arial, Helvetica, sans-serif #111; }
.Menu li a:link, .Menu li a:visited { display:block; text-decoration:none; background-color:#000; padding: 0.5em 2em; margin:0; border-right: 1px solid #fff; color:#FFF; }
.Menu li a:hover { background-color:#FFF; color:#000;}
.Menu li ul { position:absolute; visibility:hidden; border-top:1px solid #fff; margin:0; padding:0; }
.Menu li ul li { display:inline; float:none; }
.Menu li ul li a:link, .Menu li ul li a:visited { background-color:#000; width:auto; }
.Menu li ul li a:hover { background-color:#FFF; color:#000;}

3. Create the jQuery file and save them as dropdownmenu.js

$(document).ready(function(){
$(‘.Menu > li’).bind(‘mouseover’, openSubMenu);
$(‘.Menu > li’).bind(‘mouseout’, closeSubMenu);
function openSubMenu() { $(this).find(‘ul’).css(‘visibility’, ‘visible’); };
function closeSubMenu() { $(this).find(‘ul’).css(‘visibility’, ‘hidden’); };
});

TEST YOURSELF:

Try to implement the drop down menu as a slide show using jQuery

Posted in jQuery Tagged with: ,