Html jQuery左右伸缩侧边导航菜单栏
2015-07-01 12:50:56  By: dwtedx

分享一个类似于百度地图的左边菜单栏的收缩和展开功能、并附有动画郊野、Demo里实现了从左边展开和从右边展开两种方式、很方便的就可以集成到自己的项目中、非常方便

菜单栏左右伸缩


HTML代码

<div id="page">
	<h1>板滑块的例子</h1>
	<a id="left-panel-link" href="#left-panel">打开左面板</a> |
	<a id="right-panel-link" href="#right-panel">打开右面板</a>
	<hr />
</div>

<!-- Left panel -->
<div id="left-panel" class="panel">
	<h2>左侧面板</h2>
	<p>点击任何外部面板关闭它。</p>
</div>

<!-- Right panel -->
<div id="right-panel" class="panel">
	<h2>右侧面板</h2>
	<p>单击该面板不会关闭它,因为外面 <code>clickClose = false</code></p>
	<button id="close-panel-bt">关闭</button>
</div>


JS代码

$(document).ready(function(){
	
	$(´#left-panel-link´).panelslider();

	$(´#right-panel-link´).panelslider({side: 
		´right´, clickClose: false, duration: 200 });
	
	$(´#close-panel-bt´).click(function() {
		$.panelslider.close();
	});
	
});


最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1eQ1w5hC 密码: 1w2j

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+