Facebook like drop down menu using jQuery
January 24, 2013 Leave a comment
Today we will see a drop down menu like a facebook notification. We are using a jquery here. The code we use here is very easy and short.
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
body {
margin: 0;
font-family:tahoma;
font-size:12px;
font-weight:bold;
}
.image-box{
width:30px;
margin:10px 0 0 10px;
padding:10px 10px;
background:#8ecf02;
border:2px solid #618d03;
}
.expand-box{
padding:3px 5px;
margin:12px -12px;
background:#f0cc3c;
border:1px solid #cfa602;
width:150px;
display:none;
position:absolute;
}
.expand-box ul{
clear:right;
margin:0;
padding:0;
list-style:none;
float:left;
width: 85%;
}
.expand-box ul li{
clear:both;
margin:0 0 0 7px;
padding:5px;
border-bottom:1px solid #cfa602;
list-style:none;
}
.expand-box ul li a{
color:#cfa602;
text-decoration:none;
}
.expand-box span{
float:left;
}
</style>
</head>
<body>
<div class="image-box">MENU
<div class="expand-box">
<span><img src="user_female.png" width="20" height="20"></span>
<ul>
<li><a href="#">My Profile</a></li>
<li><a href="#">Setting</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div></div>
</body>
<script type='text/javascript'>
$(".image-box").mouseover(function() {
$(".expand-box").show();
}).mouseout(function() {
$(".expand-box").hide();
});
</script>
</html>
Hope this will help you in your projects.
Please share/recommend if you like this post.
Thanks,
Nikhil U.
UI Designer
Pune[MH,India]
About Nikhil
Comments