CSS+JS实现侧边栏

2023-03-28 12:15:23

功能：

1、点击按钮弹出侧边栏，点击按钮关闭侧边栏；

2、侧边栏弹出时，其他部分变暗，点击变暗区域也可以收起侧边栏

首先

我这里采用两个div叠加作为基础框架。底层div显示内容，上方div显示侧边栏，因此需要将body固定一下，在body放置两个div。

css

html,body{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;

}
body{
    position: relative;
    overflow: hidden;
}

HTML

看一下大致结构

<body>


<!--主体-->
<div id="content" >



********   
这里放置网页主要内容
********



</div>

<!--侧边栏-->
<div class="sidebarback">
    <div class="sidebar">
        <button id="sideopenbutton">&lt;</button>
        <div id="sidebarbox">

        </div>
    </div>
</div>



</body>

CSS

这里开始正式的侧边栏样式。

/*主体*/
#content{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow-y:auto;
    overflow-x: hidden;
}


/*侧边栏总容器*/
.sidebarback{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;/*设置不产生点击事件，穿透到下层*/
    overflow: hidden;
    background: none;
    transition: all 0.3s linear;
}


/*侧边栏+按钮*/
.sidebar{
    position: relative;
    float: right;
    width: 320px;/*侧边栏+按钮宽度*/
    right: -300px;/*侧边栏隐藏在屏外宽度*/ 
    height: 100%;   
    transition: all 0.3s ease-out;
}


/*按钮*//*就是个普通按钮，这里属性不重要，自行设置即可，只要定好垂直居中的位置*/
#sideopenbutton{
    position:absolute;
    width: 20px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    pointer-events: visible;
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
    border-style: none;
    outline: none;
    float: left;
    background: black;
    color: white;
    padding-top: 4px;
    transition: all 0.3s linear;
    font-size: 20px;
    font-weight: bold;
}

/*侧边栏*//*这个是真正的侧边栏，放内容的主体框*/
#sidebarbox{
    width: 300px;
    height: 100%;
    float: right;
    background: white;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}


/*这里用于js调用，侧边栏弹出时，其余背景要变成半黑透明，突显侧边栏*/
.sideback-open{
     background: rgba(0,0,0,0.6);
 }

/*这里用于js调用，侧边栏开关动画*/
.sidebar-open{
    right: 0;
}

JS

处理点击事件

//添加属性标记，记录侧边栏状态//0收起，1展开
$("#sideopenbutton").attr("open1",0);
$("#sideopenbutton").click(function (e){
    e.stopPropagation();//阻止点击操作传到父元素上
    if($("#sideopenbutton").attr("open1")==0){
       open(); //打开
    }else{
      close();//关闭
    }
});
//-------------------------------------------------------------------------
//.sidebarback为侧边栏总容器，.sidebar为侧边栏
//侧边栏弹出时，界面=侧边栏总容器=半黑透明背景+侧边栏
// 设置单击侧边栏总容器关闭侧边栏+阻止侧边栏处的单击事件穿透（单击事件传不到侧边栏总容器）=只有单击半黑透明背景才能关闭侧边栏
$(".sidebarback").click(function () {
   close();
});
$(".sidebar").click(function () {
    event.stopPropagation();
});
//-------------------------------------------------------------------------
//打开侧边栏
function open() {
    $("#sideopenbutton").attr("open1",1);//0收起，1展开
    $("#sideopenbutton").html(">");//0收起，1展开
    $(".sidebar").toggleClass("sidebar-open");//切换css样式
    $(".sidebarback").toggleClass("sideback-open");
    $(".sidebarback").css("pointer-events","auto");//启动侧边栏总容器的点击事件，用于背景点击可关闭功能
}
//关闭侧边栏
function close(){
    $("#sideopenbutton").attr("open1",0);//0收起，1展开
    $("#sideopenbutton").html("<");//0收起，1展开
    $(".sidebar").toggleClass("sidebar-open");
    $(".sidebarback").toggleClass("sideback-open");
    $(".sidebarback").css("pointer-events","none");//侧边栏收起，取消侧边栏总容器的点击效果
}

 最后，以上涉及的图片等内容来源网络，仅做学习使用，如有侵权请联系作者删除。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--主体-->
<div id="content" >
    ********
    这里放置网页主要内容
    ********
</div>
<!--侧边栏-->
<div class="sidebarback">
    <div class="sidebar">
        <button id="sideopenbutton">&lt;</button>
        <div id="sidebarbox">

        </div>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    //添加属性标记，记录侧边栏状态//0收起，1展开
    $("#sideopenbutton").attr("open1",0);
    $("#sideopenbutton").click(function (e){
        e.stopPropagation();//阻止点击操作传到父元素上
        if($("#sideopenbutton").attr("open1")==0){
            open(); //打开
        }else{
            close();//关闭
        }
    });
    //-------------------------------------------------------------------------
    //.sidebarback为侧边栏总容器，.sidebar为侧边栏
    //侧边栏弹出时，界面=侧边栏总容器=半黑透明背景+侧边栏
    // 设置单击侧边栏总容器关闭侧边栏+阻止侧边栏处的单击事件穿透（单击事件传不到侧边栏总容器）=只有单击半黑透明背景才能关闭侧边栏
    $(".sidebarback").click(function () {
        close();
    });
    $(".sidebar").click(function () {
        event.stopPropagation();
    });
    //-------------------------------------------------------------------------
    //打开侧边栏
    function open() {
        $("#sideopenbutton").attr("open1",1);//0收起，1展开
        $("#sideopenbutton").html(">");//0收起，1展开
        $(".sidebar").toggleClass("sidebar-open");//切换css样式
        $(".sidebarback").toggleClass("sideback-open");
        $(".sidebarback").css("pointer-events","auto");//启动侧边栏总容器的点击事件，用于背景点击可关闭功能
    }
    //关闭侧边栏
    function close(){
        $("#sideopenbutton").attr("open1",0);//0收起，1展开
        $("#sideopenbutton").html("<");//0收起，1展开
        $(".sidebar").toggleClass("sidebar-open");
        $(".sidebarback").toggleClass("sideback-open");
        $(".sidebarback").css("pointer-events","none");//侧边栏收起，取消侧边栏总容器的点击效果
    }

</script>
<style>
    /*主体*/
    #content{
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow-y:auto;
        overflow-x: hidden;
    }


    /*侧边栏总容器*/
    .sidebarback{
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        pointer-events: none;/*设置不产生点击事件，穿透到下层*/
        overflow: hidden;
        background: none;
        transition: all 0.3s linear;
    }


    /*侧边栏+按钮*/
    .sidebar{
        position: relative;
        float: right;
        width: 320px;/*侧边栏+按钮宽度*/
        right: -300px;/*侧边栏隐藏在屏外宽度*/
        height: 100%;
        transition: all 0.3s ease-out;
    }


    /*按钮*//*就是个普通按钮，这里属性不重要，自行设置即可，只要定好垂直居中的位置*/
    #sideopenbutton{
        position:absolute;
        width: 20px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        pointer-events: visible;
        border-bottom-left-radius: 25px;
        border-top-left-radius: 25px;
        border-style: none;
        outline: none;
        float: left;
        background: black;
        color: white;
        padding-top: 4px;
        transition: all 0.3s linear;
        font-size: 20px;
        font-weight: bold;
    }

    /*侧边栏*//*这个是真正的侧边栏，放内容的主体框*/
    #sidebarbox{
        width: 300px;
        height: 100%;
        float: right;
        background: white;
        border-bottom-left-radius: 15px;
        border-top-left-radius: 15px;
    }


    /*这里用于js调用，侧边栏弹出时，其余背景要变成半黑透明，突显侧边栏*/
    .sideback-open{
        background: rgba(0,0,0,0.6);
    }

    /*这里用于js调用，侧边栏开关动画*/
    .sidebar-open{
        right: 0;
    }

</style>
</body>
</html>

  • 作者：学习使我快乐——玉祥
  • 原文链接：https://blog.csdn.net/qq_43319748/article/details/115805430
    更新时间：2023-03-28 12:15:23