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,即显示在网页中,这便是从隐藏到显示的全过程,也是此代码实现功能的核心部分。学会使用这几句,便可以实现简单的侧拉出菜单。(: