右侧边栏实现(博客)
1.html
可以加一个遮罩层mask,nav如下:
<nav> <div class="logo"><a haref="#">生如夏花</a></div> <ul> <li class="active"><a href="" >首页</a></li> <li><a href="article.html" >简介</a></li> <li><a href="">关于</a></li> <li ><a href="">联系</a></li> <li id="sidebar_trigger"><i class="fa fa-bars "></i></li> </ul> </nav>
侧边栏如下:
<div class="mask"></div> <div id="sidebar"> <ul> <li><a href="#">list2</a></li> <li><a href="#">list2</a></li> <li><a href="#">list2</a></li> <li><a href="#">list2</a></li> </ul> </div>
2.css
#sidebar{ /*display: none;*/ position: fixed; right:-300px; top:0; bottom: 0; color:#fff; width :300px; background: #333; text-align: center; /*加出来的动画*/ transition: right 0.5s; } #sidebar ul{ list-style: none; padding: 0; margin: 0; width: 100%; } /*侧边栏打开后显示遮罩层,变现出层级效果*/ .mask{ display: none; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.5); } /*右侧边栏*/ #sidebar ul a{ padding:10px 20px; display: inline-block; text-decoration: none; color:#fff; width: 100%; } #sidebar ul a:hover{ background: #444;; width: 100% }
3.js
;$(function() { use strict; var sidebar = $(#sidebar); //选择侧栏 var mask=$(".mask"); //选择遮罩 var backButton = $(.back-to-top); //选择返回顶部 var sidebar_trigger=$(#sidebar_trigger);//选择侧栏触发器 function showSidebar(){ //显示侧栏 mask.fadeIn(); //显示mask sidebar.animate({right:0}); //调整侧栏css //sidebar.css(right,0);//两种写法都ok } function hideSideBar(){ //隐藏mask mask.fadeOut(); sidebar.css(right,-sidebar.width()); console.log("mask"); } sidebar_trigger.on(click,showSidebar); //监听侧栏触发器点击 mask.click(hideSideBar); //监听mask })效果:点击最右端的更多显示出侧边栏和遮罩层。点击遮罩层再隐藏这两个东西。