JQuery Animated Hover Menu

Hover is used to provide more detail on the link to be addressed. And can also to beautify the look of the menu. Components used are: jquery, CSS, HTML. Here are the steps – steps to create a menu hover:

JQuery Script :

<script type="text/javascript">
$(document).ready(function(){
	$(".menu a").hover(function() {
	$(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
	}, function() {
	$(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
	});
});
</script>

CSS Script :

<style type="text/css">
body {
	margin: 10px auto;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
	margin: 100px 0 0;
	padding: 0;
	list-style: none;
}
.menu li {
	padding: 0;
	margin: 0 2px;
	float: left;
	position: relative;
	text-align: center;
}
.menu a {
	padding: 14px 10px;
	display: block;
	color: #000000;
	width: 144px;
	text-decoration: none;
	font-weight: bold;
	background: url(images/button.gif) no-repeat center center;
}
.menu li em {
	background: url(images/hover.png) no-repeat;
	width: 180px;
	height: 45px;
	position: absolute;
	top: -85px;
	left: -15px;
	text-align: center;
	padding: 20px 12px 10px;
	font-style: normal;
	z-index: 2;
	display: none;
}
</style>

And HTML script :

<body>
<ul class="menu">
	<li>
		<a href="http://www.codeveriday.com">CodeVeriday</a>		
		<em>A wall of design ideas, web trends, and tutorials</em>
	</li>
	<li>
		<a href="http://www.codeveriday.com">Tutorials Web</a>
		<em>Tips and Tricks Web Development</em>
	</li>
	<li>
		<a href="http://www.codeveriday.com">HTML, JQuery, CSS, PHP</a>
		<em>Tutorial Free Web Development</em>
	</li>
</ul>
</body>

JQuery Animated Hover Menu

Leave a Reply

Javascript text input numeric/number only

Recent Comments

Tags