Facebook like drop down menu using jQuery

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 these ads

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 259 other followers

%d bloggers like this: