jQuery 反转导航效果

 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
	margin:0px;
	padding:0px;
}

body{
	margin-top:20px;
	font-family:Arial, Helvetica, sans-serif;
	color:#51555C;
	height:100%;
	font-size:12px;
}

/* Navigation menu styles */

ul{
	height:25px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

ul li{
	border:1px solid #444444;
	display:inline-block;
	float:left;
	height:25px;
	list-style-type:none;
	overflow:hidden;
}

ul li a, ul li a:hover, 
ul li a:visited{
	text-decoration:none;
}

.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
	outline:none;
	padding:5px 10px;
	display:block;
}

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
	margin-top:-25px;
	background:url(img/grey_bg.gif) repeat-x #eeeeee;
	color:#444444;
}

.selectedMenu,.selectedMenu:visited {
	margin:0;
}

.normalMenu, .normalMenu:visited{
	color:white;
	background:url(img/dark_bg.gif) repeat-x #444444;
}
</style>
</head>

<body>





<div id="menu-container">

<ul id="navigationMenu">

<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>

</ul>

</div>




<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('#navigationMenu li .normalMenu').each(function(){

		$(this).before($(this).clone().removeClass().addClass('hoverMenu'));

	});
	
	$('#navigationMenu li').hover(function(){
	
		$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);

	},
	
	function(){
	
		$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);

	});
	
});

</script>

</body>
</html>

　　

 

 

 

 

 

posted @ 2012-08-17 13:48  赵小磊  阅读(301)  评论(0)    收藏  举报
回到头部