JavaScript 温故： 制作一个sidebar

sidebar是一种常用类型的导航组件，它可从页面旁侧弹出，覆盖在正常内容上。

假设你的正常内容为：

    <div id="main">
         Placeholder<p>
         Placeholder<p>
         Placeholder<p>
    </div>

现在我们可以在内容内加入sidebar。其内有链接到Home和About。并加入一个按钮，可以打开sidebar，代码如下：

    <div id="mySidenav" class="sidebar">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#a">Home</a>
      <a href="#b">About</a>
    </div>
    
    <button onclick="openNav()">open sidebar</button><p>
    <div id="main">
         Placeholder<p>
         Placeholder<p>
         Placeholder<p>
    </div>
    <style>
    
    .sidebar {
        height: 100%; 
        width: 0; 
        position: fixed; 
        z-index: 1; 
        top: 0;
        left: 0;
        background-color: #111; 
        overflow-x: hidden;
        padding-top: 60px; 
        transition: 0.5s; 
    }
    .sidebar a {
        padding: 4px 4px 4px 32px;
        text-decoration: none;
        color: #818181;
        display: block;
        transition: 0.3s
    }
    
    .sidebar a:hover{
        color: #f1f1f1;
    }
    .sidebar .closebtn {
        position: absolute;
        top: 10px;
        right: 10px;
    }
    
    </style>
    <script>
        function openNav() {
        document.getElementById("mySidenav").style.width = "150px";
    }
    
    
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
    }
    
    </script>
    

要点在于：

1. 默认情况下，sidebar是一个div内置任何html，且width为0，因此不可见

2. 当需要使用sidebar时，可以使用函数设置其width为一个宽度，因此它变得可见

3. 虽然它变得可见，但是因为z-index为1，因此不会引发主要内容的重新渲染和计算新的位置，而是覆盖其上