How to create a Drop-down menu using jquery
August - 12 - 2010 by
Arbaoui Mehdi
Hi, I'm Arbaoui Mehdi. I'm the editor of Depotwebdesigner and Codamaniacs,the Site Manager of both Tutoslinux, and Rabbitemplate. I spend too much time in front of the computer.
Contact Author : support@depotwebdesigner.com
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();
});
}
);
Related posts:
- How to create a jQuery Headline Changer
- JQuery Plugin to integrate delicious into any web site
- How to create a simple Lava Lamp Menu with jQuery
- horizontal menu style dropdown with jquery
- How to create a jQuery Vertical Scroll
Useful type of menu, I’ll use it in my future projects. Thanks Mehdi!
Reply
veru handy snippet mehdi, thank you for sharing
Reply
nice drop down…. perfect.. this work on ie. thx
Reply
Hi Mehdi, I’m really glade to see a man from my country doing this great job. well done
Reply
Thank’s Moroccan man
Reply