Html jQuery左右伸缩侧边导航菜单栏

分享一个类似于百度地图的左边菜单栏的收缩和展开功能、并附有动画郊野、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