网页侧滑菜单
浏览数：25 /
时间：2015年06月09日
使用jquery-panelslider插件。侧滑效果：
example.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侧滑菜单</title>
<style type="text/css">
body { font-family: Arial; background: #eee; }
h1, h2 { margin-top: 0; }
p { color: #ccc; line-height: 1.5; }
#page { width: 940px; height: 400px; padding: 20px; margin: 0 auto; background: white; }
.panel {
display: none;
width: 220px;
padding: 20px;
background-color: #333;
color: #fff;
box-shadow: inset 0 0 5px 5px #222;
}
</style>
</head>
<body>
<!-- Centered page -->
<div id="page">
<h1>侧滑菜单</h1>
<a id="left-panel-link" href="#left-panel">左侧菜单</a> |
<a id="right-panel-link" href="#right-panel">右侧菜单</a>
<hr />
<p>我像狗一样自由</p>
</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>这里是右菜单，点击关闭按钮关闭</p>
<button id="close-panel-bt">关闭</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>
<script>
$(‘#left-panel-link‘).panelslider();
$(‘#right-panel-link‘).panelslider({side: ‘right‘, clickClose: false, duration: 200 });
$(‘#close-panel-bt‘).click(function() {
$.panelslider.close();
});
</script>
</body>
</html>可以修改jquery-panelslider源码改变侧滑细节
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
