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可能如下所示：

#networkaddress.cache.ttl=-1

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

您可能还想在这里查看出色的响应式侧边栏tutorial on W3Schools。

Answer 2

折叠：

max-width: 0;

未折叠：

max-width: auto;

Answer 3

您可以将属性添加到侧边栏

tranform:translateX(-100%);

当侧边栏处于活动状态时，使用js添加活动的类并添加CSS

sidebar.active{
    tranform:translateX(0%);
}

向侧边栏的父项添加属性

.parent{
    overflow-x:hidden;
}

Answer 4

未折叠：

separate

通过添加“ hide”类而崩溃：

convert = TRUE

-295px，因为宽度为230px，左边距为20px，盒子阴影的模糊度为45px

Answer 5

您可以使用css和transition属性。

.css中的

.sidebar {
  // your current code
  left: -210px; // example
  transition: left 2s ease;
}

.sidebar:hover{
  left: 0px;
}

这将使您的div在2秒钟内滑动并在不再悬停时消失。
请参见示例here。

Answer 6

试试Bootstrap，它是为所有设备创建响应式网站而设计的，几乎没有麻烦，您还可以找到许多其他不错的选择！ check out their documentation

Answer 7

您可以使用媒体查询来检测屏幕尺寸，然后以较小的尺寸隐藏边栏：

.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;
}

@media (max-width: 400px) {
  .sidebar {
    display: none;
  }
}

<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>

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

7 个答案: