码迷,mamicode.com
首页 > 移动开发 > 详细

导航菜单(移动出现子菜单)

时间:2014-07-22 00:15:36      阅读:361      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   java   color   

bubuko.com,布布扣
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta name="Keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
	/* 
	这以下是重置样式 
	Remove margin padding */
	body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; }

	/* Default Font */
	body,button,input,select,textarea { font:12px/1.5 \5b8b\4f53,arial,sans-serif; }
	h1,h2,h3,h4,h5,h6 { font-size:100%; }
	address,cite,dfn,em,var { font-style:normal; }
	code,kbd,pre,samp { font-family:courier new,courier,monospace; }
	small { font-size:12px; }
	ul,ol { list-style:none; }
	a { text-decoration:none; }
	a:hover { text-decoration:underline; }
	sup { vertical-align:text-top; }
	sub { vertical-align:text-bottom; }
	legend { color:#000; }
	fieldset,img { border:0; }
	button,input,select,textarea{ font-size:100%; }
	table { border-collapse:collapse; border-spacing:0; }

	/* Remove Float */
	.clear { display:block; height:0; overflow:hidden; clear:both; }
	.clearfix:after { content:‘\20‘; display:block; height:0; clear:both; }
	.clearfix { *zoom:1; }
	/* 重置样式结束 */
	
	</style>
</head>
<body style="padding-top:50px;">


	<style type="text/css">
		.nav { height:25px; font-family:"Microsoft Yahei"; }
		.nav ul li { position:relative; float:left; display:inline; margin-left:1px; width:100px; text-align:center; height:25px; line-height:25px; }
		.nav ul li a { transition:background 500ms linear; text-decoration:none; display:block; text-shadow:0px 1px 0px #000; width:100%; height:100%; text-align:center; background-color:#089478; color:#FFF;  }
		.nav ul li a:hover, .nav ul li a.current { background-color:#076451; text-decoration:none; }
		.nav .sub-nav { display:none; position:absolute; top:24px; left:0px; padding-top:10px; }
		.nav .sub-nav li { float:none; display:block; width:100px; height:30px; line-height:30px; }
		.nav .sub-nav .triangle { position:absolute; left:50%; top:5px; margin-left:-3px; display:block; width:0; height:0; overflow:hidden; line-height:0; font-size:0; border-bottom:5px solid #089478; border-top:none; border-left:5px solid #FFF; border-right:5px solid #FFF; }
	</style>

	<div class="nav">
		<ul class="clearfix">
			<li>
				<a href="#">导航1</a>
				<ul class="sub-nav">
					<span class="triangle"></span>
					<li><a href="#">子导航1</a></li>
					<li><a href="#">子导航2</a></li>
					<li><a href="#">子导航3</a></li>
					<li><a href="#">子导航4</a></li>
					<li><a href="#">子导航5</a></li>
				</ul>
			</li>
			<li>
				<a href="#">导航2</a>
				<ul class="sub-nav">
					<span class="triangle"></span>
					<li><a href="#">子导航1</a></li>
					<li><a href="#">子导航2</a></li>
					<li><a href="#">子导航3</a></li>
					<li><a href="#">子导航4</a></li>
					<li><a href="#">子导航5</a></li>
				</ul>
			</li>
			<li>
				<a href="#">导航3</a>
				<ul class="sub-nav">
					<span class="triangle"></span>
					<li><a href="#">子导航1</a></li>
					<li><a href="#">子导航2</a></li>
					<li><a href="#">子导航3</a></li>
					<li><a href="#">子导航4</a></li>
					<li><a href="#">子导航5</a></li>
				</ul>
			</li>
			<li>
				<a href="#">导航4</a>
				<ul class="sub-nav">
					<span class="triangle"></span>
					<li><a href="#">子导航1</a></li>
					<li><a href="#">子导航2</a></li>
					<li><a href="#">子导航3</a></li>
					<li><a href="#">子导航4</a></li>
					<li><a href="#">子导航5</a></li>
				</ul>
			</li>
			<li>
				<a href="#">导航5</a>
				<ul class="sub-nav">
					<span class="triangle"></span>
					<li><a href="#">子导航1</a></li>
					<li><a href="#">子导航2</a></li>
					<li><a href="#">子导航3</a></li>
					<li><a href="#">子导航4</a></li>
					<li><a href="#">子导航5</a></li>
				</ul>
			</li>
		</ul>
	</div>

	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
		$(‘.nav ul li‘).hover(function(){
			$(this).children(‘a‘).addClass(‘current‘);
			$(this).children(‘ul‘).stop(true,true).fadeIn(400);
		}, function(){
			$(this).children(‘ul‘).stop(true,true).fadeOut(400);
			$(this).children(‘a‘).removeClass(‘current‘);
		});
	</script>

</body>
</html>


导航菜单(移动出现子菜单),布布扣,bubuko.com

导航菜单(移动出现子菜单)

标签:des   style   blog   http   java   color   

原文地址:http://blog.csdn.net/xtqueen/article/details/38017135

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!