一种jquery的菜单风格
截图如下，
完整代码
[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>
<title>Menu Fader from CSS-Tricks</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
@import url(http://fonts.googleapis.com/css?family=Lobster);
#nav{position:relative; margin:0 0 0 10px; padding:0; font-family:'Lobster', Arial, Helvetica, sans-serif; font-size:18px; }
#nav .clear{clear:both;}
#nav ul{padding:0 0 0 0px; margin:0; list-style:none;}
#nav li{float:left;opacity: 0.5; border-bottom: 0px solid black; margin:0 10px 0 0px; }
#nav li a{text-decoration:none; color:black; display:block; padding:0 10px 0 15px;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$nav_li=$("#nav li");
$nav_li.css({opacity: 0.3});
$nav_li_selected=$("#nav li.selected");
$nav_li_a=$nav_li.children("a");
var animSpeed=450; //fade speed
//init selected
$nav_li_selected.animate({opacity: 1, borderWidth: 3}, animSpeed );
$nav_li_a.hover(function() {
var $this=$(this);
if(!$this.parent().is(".selected")){
$this.parent().animate({ opacity: 1 }, 100);
}
},function() {
var $this=$(this);
if(!$this.parent().is(".selected")){
$this.parent().animate({ opacity: 0.5 }, 100);
}
});
//selected state
$nav_li_a.click(function(){
var $this=$(this);
$this.parent().animate({opacity: 1,borderWidth: 3}, animSpeed );
$this.parent().addClass("selected").siblings(".selected").removeClass("selected").animate({ opacity: 0.5,borderWidth: 0 }, 100);
});
});
</script>
</head>
<body>
<div id="nav">
<ul>
<li class="selected"><a href="#about">Center System</a></li>
<li><a href="#portfolio">CRM</a></li>
<li><a href="#recent">CMR</a></li>
<li><a href="#experiments">HCM</a></li>
<li><a href="#contact">Setup</a></li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
补充：web前端 , JavaScript ,
