How to create Simple Drop-Down Menu using jQuery?

Hi all,
In this Blog, I’m going to tell you, How to create Simple Drop-Down Menu using jQuery?

Drop-down menus is nothing but hiding the sub-menus using css by giving visibility as hidden/visible and when the mouse enter and leaves the menu it toggles by using jquery..

Step 1: we need to create three files (.php,.css and .js)
Step 2: we must save the menu.js files into the js Folder and also download the jQuery file and save as jQuery.js in js folder
Step 3: Insert the .js, .css and jQuery.js files into .php

Step 1:

Here we going to create the files.
.html and .js are the important one to create the drop- down menu.
The need of .css file is to add the style elements whatever we just want to enlighten the menus.(its just for adding the style elements)

1. .php Code :
Now going to write the html code. Menus are working with ul and li tags only most of the time.

<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title> Selectors</title>
</head>
<link rel="stylesheet" type="text/css" href="css/style.css"> 

<ul class="myMenu"> 
<li><a href="#">Menu 1</a></li> 
<li><a href="#">Menu 2</a> 

<ul> <li><a href="#">Sub menu 2_1</a></li> 
<li><a href="#">Sub menu 2_2</a></li> 
<li><a href="#">Sub menu 2_3</a></li> 
<li><a href="#">Sub menu 2_4</a></li></ul> </li>
 
<li><a href="#">Menu 3</a> 

<ul> <li><a href="#">Sub menu 3_1</a></li> 
<li><a href="#">Sub menu 3_2</a></li></ul> </li> 
<li><a href="#">Menu 4</a></li> 
<li><a href="#">Menu 5</a></li> </ul>
 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>

</body>
</html>

2. style .css :

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

3. menu .js
we using two functions called ‘mouseeneter()’ and ‘mouseleave()’ to show and hide the submenus .
this can be done by ‘bind()’ function

$(document).ready(function() { 
$('.dropdown_menu > li').bind('mouseenter', openSubMenu); 
$('.dropdown_menu > li').bind('mouseleave', closeSubMenu); 
function openSubMenu() { 
$(this).find('ul').css('visibility', 'visible'); }; 
function closeSubMenu() { 
$(this).find('ul').css('visibility', 'hidden'); }; 
});

Thus the Drop-Down menu has been created.
Now its ready to use, its a very basic menu you can also include many features in this menu.
Happy coding !!!
Thanks for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *