侧栏导航

侧栏说明:

侧栏一般存放导航或者购物车等等,这里的侧栏只提供了侧栏的动态效果,并没有提供导航,因为导航可以根据class类来相互组合。下面给出一个完整的带导航的侧栏例子!

参数作用:

调用参数 默认值 备注
hasmask true 是否拥有阴影遮罩
width 100% 侧栏定义的宽度
position left 侧栏位置,left或者right
sidertime 300 动画时间,可调整动画的快慢
.toggle() -- 调用asideUi之后,默认返回一个对象,该对象拥有.toggle()函数,用来切换侧栏显示隐藏
注意:因为是touchend事件,所以在开发者模式中启动触摸模拟才会触发该事件查看效果!

建议新窗口打开,使用Chrome浏览器或Firefox浏览器的开发者模式查看!
》 新窗口打开

实现代码


<aside class="ui-aside w40 bg-color-success f30">
	<div class="user p3 color8 clearfix">
		<div class="fl w10">
			<img src="img/user.jpg" class="w10 h10 radius-o" />
		</div>
		<div class="fr w22">
			<span>狂奔的蜗牛!</span><br />
			<font class="state f28">12</font>
		</div>
	</div>
	<ul class="f30 mt2">
		<li>
			<a href="" class="pl3 color8">首页</a>
		</li>
		<li>
			<a href="" class="pl3 color8">关于我们</a>
		</li>
		<li>
			<a href="" class="pl3 color8">新闻中心</a>
		</li>
		<li>
			<a href="" class="pl3 color8">产品中心</a>
		</li>
		<li>
			<a href="" class="pl3 color8">联系我们</a>
		</li>
	</ul>
</aside>
<style>
	/*只针对侧栏内容部分做简单的样式*/	
	.ui-aside {line-height: 1.5em}	
	.ui-aside ul {border-top: 0.02rem solid #017da7}
	.ui-aside li {line-height: 0.8rem;border-bottom: 0.02rem solid #017da7}	
	.ui-aside a {display: block}
</style>
<script type="text/javascript">
	var aside = $(".ui-aside").asideUi({
		hasmask: true,
		width: "4rem",
		position: "left",
		sidertime: 300
	});
	$(".ui-header-l").on('touchend', function() {
		aside.toggle();
	});
</script>