当前位置：首页 > 网页特效 > 导航菜单 >

jQuery响应鼠标背景变化的动态菜单

时间：2013-04-01 20:43 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态导航菜单效果</title>
<style type="text/css" media="screen">
			body{
				background-color: #333; color:#FFFFFF
			}
			a{ color:#FFCC00;}
			#menuBar{
				overflow:hidden;
				width:503px;
				height:102px;
				background: transparent url(http://www.codefans.net/jscss/demoimg/201303/bar.jpg) no-repeat scroll left top;
				margin:0 auto;
				border:10px solid #111;
			}
			
			#menuBar ul{
				width:380px;
				margin:0 auto;
				list-style-type: none;
			}
			#menuBar ul li{
				float:left;
				padding-right:40px;
			}

#menuBar a{
				width:55px;
				height:102px;
				display:block;
				background: transparent url(http://www.codefans.net/jscss/demoimg/201303/logos.jpg) no-repeat scroll left top;
				padding-top:100px;
				color:#ddd;
				font-family: Arial, "MS Trebuchet", sans-serif;
				text-decoration: none;
				font-size:10pt;
				font-weight:bold;
				outline:none;
			}
			#menuBar a:hover{
				background-image:url(http://www.codefans.net/jscss/demoimg/201303/logos-over.jpg);
			}
			#menuBar a#Home{
				background-position:-67px top;
			}
			#menuBar a#About{
				background-position:-166px top;
			}
			#menuBar a#Gallery{
				background-position:-266px top;
			}
			#menuBar a#Contact{
				background-position:-373px top;
			}
		</style>
	</head>
	<body>
		<div id="menuBar">
			<ul>
				<li><a href="#" id="Home">Home</a></li>
				<li><a href="#" id="About">About</a></li>
				<li><a href="#" id="Gallery">Gallery</a></li>
				<li><a href="#" id="Contact">Contact</a></li>
			</ul>
		</div><br />

</body>
	<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$("a").mouseover(function(){
			var selected = "#"+$(this).attr("id");
			$(selected).animate({paddingTop:"78px"}, 100);
		}).mouseout(function(){
			var selected = "#"+$(this).attr("id");
			$(selected).animate({paddingTop:"100px"}, 100);
		});
	});
	</script>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

jQuery响应鼠标背景变化的动态菜单，菜单的背景在鼠标放上后有所变化，这款菜单的实现主要是使用了图片，修改菜单的时候要修改图片，有些麻烦，不过效果不错，引入的jquery插件是1.7版本，高版本jQuery未测试，应该也可以啦。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/994.html

网页特效

jQuery响应鼠标背景变化的动态菜单

导航菜单下载排行

最新文章