一种jquery的菜单风格_jquery win10菜单风格-优快云博客

本文链接：https://blog.youkuaiyun.com/whyonly/article/details/8116086

本文介绍了一个使用HTML、CSS和jQuery实现的菜单栏淡入淡出效果。该效果通过鼠标悬停和点击事件来改变菜单项的透明度和边框宽度，从而达到视觉上的动态交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

截图如下，

完整代码

<!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>