网站侧拉菜单栏可以使用animata方法让click-bar块right变为0px,从而实现菜单隐藏到显示全过程。
引用js
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
PS:使用前先检测网站是否有jquery.js文件,一般网站都有,如果没有必须引用上方js文件。
js
var clickbar = $('.click-bar'),
buttonOn = $('.btn-on'),
buttonOut = $('.btn-out');
function showClickbar() {
clickbar.animate({
'right': 0
});
buttonOn.fadeOut();
buttonOut.fadeIn();
}
function hideClickbar() {
clickbar.animate({
'right': -clickbar.width()
});
buttonOut.fadeOut();
buttonOn.fadeIn();
}
buttonOn.on('click', showClickbar)
buttonOut.on('click', hideClickbar)
css
body {
margin:0;
background:rgb(120,194,196);
}
ul {
display:inline-block;
list-style:none;
width:100%;
}
li {
padding:10px;
}
ul a {
text-decoration:none;
color:rgb(255,255,255);
font-size:16px;
font-weight:700;
display:inline-block;
width:100%;
}
ul a:hover {
background:rgb(189,192,186);
}
.btn-on,.btn-out {
border:none;
background:rgb(110,117,164);
width:200px;
height:100px;
color:rgb(255,255,255);
font-size:16px;
font-weight:700;
position:absolute;
right:10px;
top:10px;
}
.btn-out {
display:none;
background:rgb(0,137,167);
}
.click-bar {
background:rgb(110,117,164);
width:400px;
position:fixed;
top:130px;
right:-400px;
}
html
<button class="btn-on">打开侧拉菜单</button>
<button class="btn-out">关闭侧拉菜单</button>
<div class="click-bar">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
</ul>
</div>
广告插入