折叠式侧边栏dem

Html代码

boby部分：

<nav class="navbar">
        <span class="open-side">
            <a href="#" onclick="openSideMenu()">
                <!-- 绘制面包片 -->
                <svg width="30" height="30">
                    <path d="M0,5 30,5" stroke="#fff" stroke-width="5"></path>
                    <path d="M0,14 30,14" stroke="#fff" stroke-width="5"></path>
                    <path d="M0,23 30,23" stroke="#fff" stroke-width="5"></path>
                </svg>
            </a>
        </span>
        <!-- 设置横向导航栏 -->
        <ul class="navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <!-- 侧边距构造 -->
    <div id="side-menu" class="side-nav">
        <a href="#" class="btn-close" onclick="closeSideMenu()">&times;</a>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </div>
    <!-- 主体部分 -->
    <div id="main">
        <h1>南舍的折叠式侧边栏demo</h1>
    </div>
    <!-- 
        简单的js代码说明：
        1. 第一个函数的目的是当鼠标点击面包片的时候 使其side-menu增加宽度 main向右移
        2.第二个函数的目的是当鼠标点击叉号时 将side-memu隐藏 main向左移
     -->
    <script>
        function openSideMenu(){
     
     
            document.getElementById('side-menu')
            .style.width = '250px';
            document.getElementById('main')
            .style.marginLeft= '250px';

        }
        function closeSideMenu(){
     
     
            document.getElementById('side-menu')
            .style.width = '0';
            document.getElementById('main')
            .style.marginLeft= '0';

        }
    </script>

js部分：

代码过于简单我就将其写道html便签中

<script>
        function openSideMenu(){
    
    
            document.getElementById('side-menu')
            .style.width = '250px';
            document.getElementById('main')
            .style.marginLeft= '250px';

        }
        function closeSideMenu(){
    
    
            document.getElementById('side-menu')
            .style.width = '0';
            document.getElementById('main')
            .style.marginLeft= '0';

        }
    </script>

css部分

/*去除浏览器的默认格式*/
*{
    
    
    margin: 0;
    padding: 0;
}
boby{
    
    
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;

}
.navbar{
    
    
    background-color: #3b5998;
    overflow: hidden;
    height: 63px;
}
.navbar a{
    
    
    float: left;/*通过设置浮动并就将a标签设置为块状元素达到横向排列*/
    display: block;
    text-align: center;/* 文本居中*/
    text-decoration: none;/*去除下划线*/
    font-size: 17px;
    padding: 14px 16px;
    color: white;
}
.navbar ul{
    
    
    margin: 8px 0 0 0 ;
    list-style: none;/* 将列表的点去除 */
}
.navbar a:hover{
    
    
    background-color: #f4f4f4;
    color: black;
}
/* 侧边栏css*/
.side-nav{
    
    
    height: 100%;
    width: 0;
    position: fixed;/* 1.固定定位 2.因为设置了定位使其脱离文档流 所以在展开是main里面的字体并不会下移而是往右移*/
    z-index: 1;/*设置层级为最高级*/
    top: 0;
    left: 0;
    background-color: #111;
    opacity: 0.9;
    overflow-x: hidden;/* 通过宽度为零+overflow-x: hidden; 将其隐藏*/
    padding-top: 60px;
    transition: 0.5s;   
}
.side-nav a{
    
    
    padding: 10px 10px 10px 30px;
    text-decoration: none;/* 去除下划线 */
    font-size: 22px;
    color: #ccc;
    display: block;/* 设置为块元素使其垂直分布*/
}
.side-nav a:hover{
    
    
    color: orange;
}
.side-nav .btn-close{
    
    
    position: absolute;/*设置绝对定位使其在右上角显示*/
    top: 0;
    right: 0;
    font-size: 36px;
}
#main{
    
    
    transition: margin-left 0.5s;/*设置平滑过渡*/
    padding: 20px;
}
/*设置媒体查询，使其在窗口宽度小于560px 将横向nav隐藏*/
@media(max-width:568px){
    
    
    .navbar-nav{
    
    
        display: none;
    }
}

注：
1.我已将关键内容及其注意事项写到注释里
2.本次涉及到一点点js代码但很容易理解，请不要担心