In this tutorial you will learn how to create a cool drop down menu using jquery.
Code Html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" media="screen" type="text/css" href="css/style.css" />
<title>How to create a Drop-down menu using jquery</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/menu-jquery.js"></script>
</head>
<body>
<div align="center">
<h1>How to create a Drop-down menu using jquery</h1>
<br/>
</div>
<div class="principalBlock">
<ul id="main_box">
<li class="select_box"> <span>Lorem Ipsum Dolor</span>
<ul class="son_ul">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
</ul>
</div>
<div class="principalBlock">
<ul id="main_box">
<li class="select_box black"> <span>Lorem Ipsum Dolor</span>
<ul class="son_ul">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
</ul>
</div>
<div class="principalBlock">
<ul id="main_box">
<li class="select_box red"> <span>Lorem Ipsum Dolor</span>
<ul class="son_ul">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
</ul>
</div>
<div class="principalBlock">
<ul id="main_box">
<li class="select_box green"> <span>Lorem Ipsum Dolor</span>
<ul class="son_ul">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Code Css
body {
padding:10px;
margin:auto;
width:900px;
font:12px Tahoma, Geneva, sans-serif;
}
* {
margin:0;
padding:0;
}
ul, li {
list-style-type:none;
}
.principalBlock {
float:left;
width:190px;
}
.select_box {
width:150px;
border:1px solid white;
padding:0px 20px 4px 10px;
background:url("../images/rollover.jpg") no-repeat;
position:relative;
}
.black {
background:url("../images/rollover-black.jpg") no-repeat;
}
.red {
background:url("../images/rollover-red.jpg") no-repeat;
}
.green {
background:url("../images/rollover-green.jpg") no-repeat;
}
.select_box span {
cursor:pointer;
display:block;
line-height:25px;
width:100%;
height:25px;
overflow:hidden;
color:white;
font-weight:bold;
}
.select_box ul li {
cursor:pointer;
}
.son_ul {
width:178px;
position:absolute;
left:0px;
top:29px;
border:1px solid #ccc;
background:url('../images/background.jpg') no-repeat;
}
.son_ul li {
display:block;
line-height:25px;
padding-left:10px;
width:168px;
}
.hover {
background:#e7e7e7;
}
Code Javascript
$(document).ready(function(){
$('.son_ul').hide();
$('.select_box span').hover(function(){
$(this).parent().find('ul.son_ul').slideDown();
$(this).parent().find('li').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')});
$(this).parent().hover(function(){},
function(){
$(this).parent().find("ul.son_ul").slideUp();
}
);
},function(){}
);
$('ul.son_ul li').click(function(){
$(this).parents('li').find('span').html($(this).html());
$(this).parents('li').find('ul').slideUp();
});
}
);