html5手机网站侧边栏导航代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5手机网站侧边栏导航代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>html5手机网站侧边栏导航代码</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.simplesidebar.js"></script>

</head>
<body>

<div class="toolbar">
	<div id="open-sb" class="menu-button menu-left"></div>
</div>

<section class="sidebar">
	<div class="subNav"><h5>程序员设计师联盟淘宝店</h5></div>
	<hr />
	<div class="subNav"><h6> 首页</h6></div>
	<div class="subNav"><h6>新品推荐</h6></div>
	<ul class="navContent">
		<li><a href="#">当季新品</a></li>
	</ul>
	<div class="subNav"><h6>星享俱乐部</h6></div>
	<div class="subNav"><h6>星巴克中国官应用</h6></div>
	<div class="subNav"><h6>咖啡文化</h6></div>
	<ul class="navContent">
		<li><a href="#">咖啡文化</a></li>
		<li><a href="#">星巴克甄选咖啡</a></li>
		<li><a href="#">如何冲泡咖啡</a></li>
	</ul>
	<div class="subNav"><h6>饮品美食</h6></div>
	<ul class="navContent">
		<li><a href="#">饮品</a></li>
		<li><a href="#">星巴克美食</a></li>
		<li><a href="#">星巴克咖啡</a></li>
		<li><a href="#">星巴克免煮咖啡</a></li>
	</ul>
	<div class="subNav"><h6>星礼卡</h6></div>
	<div class="subNav"><h6>关于我们</h6></div>
	<ul class="navContent">
		<li><a href="#">使命宣言</a></li>
		<li><a href="#">星巴克责任</a></li>
		<li><a href="#">星巴克责任</a></li>
		<li><a href="#">星巴克责任</a></li>
		<li><a href="#">星巴克责任</a></li>
	</ul>
	<div class="subNav"><h6>帮助中心</h6></div>
	<ul class="navContent">
		<li><a href="#">常见问题</a></li>
		<li><a href="#">联系我们</a></li>
		<li><a href="#">使用条款</a></li>
		<li><a href="#">隐私权政策</a></li>
	</ul>
</section>

<script type="text/javascript">
$( document ).ready(function() {
	$( '.sidebar' ).simpleSidebar({
		settings: {
			opener: '#open-sb',
			wrapper: '.wrapper',
			animation: {
				duration: 500,
				easing: 'easeOutQuint'
			}
		},
		sidebar: {
			align: 'left',
			width: 200,
			closingLinks: 'a',
		}
	});
});
</script>

<script type="text/javascript">
$(function(){
$(".subNav").click(function(){
			// 修改数字控制速度， slideUp(500)控制卷起速度
			$(this).next(".navContent").slideToggle(500);
	})	
})
</script>
</body>
</html>

CSS代码(main.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;color:#fff;text-decoration:none;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
h5,h6{font-size:14px;}
section{margin:4em 0;}
.toolbar{position:fixed;top:0;left:0;right:0;background-color:transparent;line-height:68px;border-top:2px solid #b0120a;}
.menu-button{position:relative;margin:5px;height:36px;width:36px;cursor:pointer;}
.menu-button:before{content:"";position:absolute;top:5px;right:3px;border-bottom:17px double #b0120a;border-top:6px solid #b0120a;width:30px;height:5px;}
.menu-left{float:left;margin-right:1.5em;}
.sidebar{margin:0;padding-top:1em;color:white;background-color:#b0120a;}
.sidebar h6{margin:0 .8em;padding:0;font-weight:300;}
.sidebar li{margin:.5em 0;padding:0 1em;line-height:32px;}
.sidebar li:hover{background-color:#e84e40;}
.sidebar hr{margin:2em auto;border:0;padding:0;width:80%;height:1px;background-color:white;}
/*主要样式*/
.subNav{cursor:pointer;}
.navContent{display:none;color:#999;}

附件:下载该文件资源,减少时间成本(增值服务)