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;
}
此代码为较简易实现侧拉菜单的功能,在css的 click-bar块中的right:-400px 让侧拉菜单隐藏在网页外。在js代码中,使用 animate 的方法 让 click-bar块中的 right 变为0px,即显示在网页中,这便是从隐藏到显示的全过程,也是此代码实现功能的核心部分。学会使用这几句,便可以实现简单的侧拉出菜单。(: