侧边栏的实现（二）

最新推荐文章于 2022-09-30 11:58:51 发布

WittyLu

最新推荐文章于 2022-09-30 11:58:51 发布

阅读量1.5k

点赞数 1

分类专栏： js css 文章标签： js css

本文链接：https://blog.csdn.net/baidu_28479651/article/details/62037488

版权

js 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

本文将接着上部分来实现侧边栏的动态效果，开始侧边栏是不显示的，点击侧边栏菜单显示侧边栏，并呈现遮罩效果。点击遮罩，隐藏侧边栏。

1、在html中建立遮罩的div

<div class="mask"></div>

2、css

/*点击侧边栏时，变暗的效果*/
.mask{
    display: none;
    position: fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background: rgba(0,0,0,0.3);
}
#sidebar{
    position: fixed;
    top:0;
    /*right:0;*/
    right:-300px;/*侧边栏隐藏在屏幕右边*/
    bottom:0;
    width:300px;
    background: #333;
    padding:20px 0;
    transition:right 0.5s;
}

3、js

;$(function () {
    'use strict';
    var sidebar = $('#sidebar'), /*选择侧栏*/
        mask = $('.mask'),
        sidebar_trigger = $('#sidebar_trigger');

    function showSideBar() {
        mask.fadeIn();
        sidebar.css('right', 0);
    }
    function hideSideBar() {
        mask.fadeOut();
        sidebar.css('right', -sidebar.width());
    }

    sidebar_trigger.on('click',showSideBar);
    mask.on('click', hideSideBar);
})

fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。

fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是隐藏的。