Html
    Css
    Js

    
                        
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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

一看就会的 侧拉菜单栏

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

0