右侧边栏实现（博客）

快来打我* 2021-10-09 03:52 433阅读 0赞

1.html

可以加一个遮罩层mask，nav如下：

侧边栏如下：

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

效果：点击最右端的更多显示出侧边栏和遮罩层。点击遮罩层再隐藏这两个东西。

![SouthEast][]

![SouthEast 1][]

[SouthEast]: /images/20211009/b91004cf039f4aaf9a00f317707cdeab.png
[SouthEast 1]: /images/20211009/770a1ae1c0754b0bac26b9a72ce839eb.png