JavaScript 温故： 制造一个sidebar

2024年3月28日 195次阅读 来源: 1000copy

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，因而不会激发主要内容的从新衬着和盘算新的位置，而是掩盖其上

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000008156487
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞