一种jquery的菜单风格

来源：互联网发布：招商重工软件著作权编辑：程序博客网时间：2024/05/02 06:29
截图如下，
完整代码
<!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>