html5仿星巴克手机网站侧边栏导航源码



186 742 248



特效描述:html5 仿星巴克 手机网站 侧边栏导航源码,html5手机端侧边栏导航菜单代码,星巴克侧边栏导航菜单。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/main.css">

2. 引入JS

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

3. HTML代码

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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 收缩导航菜单 二级导航菜单 滑动选项卡切换 文字收缩展开 下拉导航菜单 图片滑动 图片收缩展开 竖直导航菜单 文字滑动 图标导航菜单 滑动手风琴 固定导航菜单 滑动星星打分 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 收缩收起展开 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到