jquery导航栏

leaphong

浏览: 7752 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jQuery CSS 游戏 HTML UP

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>宏飞软件</title>
		<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){ 
				$("ul.subnav").parent().append("<span></span>");
				$("ul.oneul li").mouseenter(function(){
					$(this).css({"background-color":"#8a2bee"});
				//	$("a#" + this.id + "li").css("color","#7B68EE");
				});
				$("ul.oneul li").mouseleave(function(){
					$(this).css({"background-color":"#7B68EE"});
				//	$("a#" + this.id + "li").css("color","#FFF");
				});
				$("ul.subnav li").mouseenter(function(){
					$(this).css({"background-color":"#87CEFA"});
				});
				$("ul.subnav li").mouseleave(function(){
					$(this).css({"background-color":"#8a2bee"});
				});
				$("ul.oneul li span").click(function(){
					 //淡出$(this).parent().find("ul.subnav").fadeIn(2000); 
					 $(this).parent().find("ul.subnav").slideDown('slow').show(); 
					 $(this).parent().hover(function() {   
				        }, function(){
				           $(this).parent().find("ul.subnav").slideUp('slow'); 
				           //When the mouse hovers out of the subnav, move it back up   
				       }); 
				}).hover(function() {
			           $(this).addClass("subhover"); //On hover over, add class "subhover"   
		        }, function(){  //On Hover Out   
		            $(this).removeClass("subhover"); //On hover out, remove class "subhover"   
		    	});  
			});
		</script>
		<style type="text/css">
			p{
				margin: 0px;
				padding:0px;
			}
			#one{
				width:100%;
				height:35px;
				background-color: #7B68EE;
			}
			#oneCd{
				width:800px;
				height:35px;
			}
			body{
				margin: 0px;
				padding:0px;
			}
			#oneCd ul{
				list-style-type: none;
				margin: 0px;
				padding:0ppx;
				height: 100%;
			}
			#oneCd ul li{
				float:left;
				margin: 0px;
				padding:0px;
				margin-left:20px;
				height:35px;
				position: relative; /*让下面的菜单在下面*/
			}
			#oneCd a{
				text-decoration: none;
				font-size: 15px;
				font-weight: bold;
				color: #fff;
				position: relative;
				top:9px;
			}
			.lispan{
				margin-left: 5px;
				padding:0px;
				position: relative;
				height:14px;
				top:15%;
			}
			.subnav{
				margin:0px;
				padding:0px;
				list-style: none;
				display: none;
				position: absolute;
				left:0px;
				top:35px;
				width:80px;
			}
			.subnav li{
				margin: 0px;
				padding: 0px;
				width:80px;
				clear:both;
				border-width:0px 0px 1px 0px;
				border-color: red;
				border-style: solid;
				background-color: #8a2bee;
			}
			.subnav li span{
				position: relative;
				top:3px;
			}
			#oneCd ul li ul li{
				margin:0px;
				padding:0px;
				height:25px;
			}
			#two{
				width:800px;
				height:500px;
				border:1px solid red;
			}
			ul.oneul li span{
				width:17px;
				height:35px;
				float:right;
				background: url(./img/subnav_btn.gif) no-repeat center top;
			}
			ul.oneul li span.subhover {
				background-position: center bottom; 
				cursor: pointer;
			} 
		</style>
	</head>
	<body>
		<div align="center">
			<div id="one">
				<div id="oneCd">
					<ul class="oneul">
						<li>
							<a href="#">毛冰</a>
							<ul class="subnav">
								<li>吹水</li>
								<li>游戏</li>
								<li>程序</li>
								<li>发呆</li>
							</ul>
						</li>
						<li>
							<a href="#">龙猫</a>
						</li>
						<li>
							<a href="#">鲤鱼</a>
						</li>
						<li>
							<a href="#">飞宏</a>
							<ul class="subnav">
								<li>程序</li>
								<li>羽毛</li>
								<li>吹水</li>
								<li>喝茶</li>
							</ul>
						</li>
					</ul>
				</div>
				<div id="two">
				
				</div>
			</div>
		</div>
	</body>
</html>

效果图：