javascript - 如何在小屏幕上折叠侧边栏？

Question

我在做一个固定的侧边栏，但它不会崩溃..我真的不知道该怎么做。
我在互联网上搜索过.. 仍然找不到任何结果。

这是我的 sidebar.html

<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
    <div class="pt-5 text-center pb-2 ">
        <a href="../index.php" class="logo-normal pr-3">
            <img src='../assets/img/favicon.ico' width="50px">
        </a>
        <a href="../index.php" class="logo-normal">
            Fitness Addict 
        </a>
    </div>
    <hr style="border-color:white; width:90%" align=center>
    <ul class="nav pl-4">
        <li >
            <a href="../home/myhome.php">
                <i class="fa fa-home icon pr-4"></i>
                My Home
            </a>
        </li>                
        .
        .
        .
    </ul>
</div>

CSS:

.sidebar{
  height: calc(100vh - 90px);
  width: 230px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  display: block;
  background: #408000;
  box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
  margin-top: 80px;
  margin-left: 20px;
  border-radius: 5px;
}

.sidebar .nav {
 margin-top: 20px;
 display: block;
}

我曾尝试通过 JavaScript 来实现，但我不知道如何实现。 任何人都可以帮忙吗？

Answer 1

您的 JavaScript 可能如下所示:

/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */

function openNav() 
{
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */

function closeNav() 
{
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}

然后您需要使用相关代码将此 JS 作为源添加到 HTML 中。通过W3Schools有关创建可折叠侧边栏的教程。

您可能还想在这里看看很棒的响应式侧边栏 tutorial on W3Schools .