如何将已创建的侧边栏转换为响应式设计？

Question

边栏看起来像下面的代码片段。我应该向这段代码添加什么，比如包装器以使其在移动屏幕上响应？

.sidebar{
    position: fixed;
    left: 0px;
    width: 314px;
    height: 100vh;
    background-color: #002438;
    box-shadow: hsl(0, 0%, 75%) 7px 2px 15px;
}

.sidebar li{
    margin-top: 45px;
    font-size: 24px;
    color: white;
    text-align: center;
    text-decoration: none;
}
.sidebar a{
    color: white;
    text-decoration: none;
}
.sidebar li :hover{
    color: #00fff2;
     
}
.sidelist{
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    margin-top: 40px;
    text-align: center;
}
.active a{
    width: 230px !important;
    display: block;
    margin: 10px auto;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 50px;
    background: #fff;    
}

<div class="sidebar">
      <ul class="sidelist">
          <li><a href="index.html">DASHBOARD</a></li>
          <li class="active"><a href="#" style="color:  #002438; font-weight: bolder;">CUSTOMER</a></li>
          <li><a href="leads.html">LEADS</a></li>
          <li><a href="reports.html">REPORTS</a></li>
          <li><a href="sms.html">SMS</a></li>
          <li><a href="profile.html">PROFILE</a></li>
      </ul>
</div>

这是我的侧边栏。我如何将它变成移动屏幕中的汉堡包图标，当单击或拖动时，它与所有侧边栏一起从左侧移动到右侧。

Answer 1

我可能会做的是使用媒体查询。如果您希望它只是一个带有小汉堡包图标的图标按钮，请将图标按钮设置在您制作此侧边栏的位置上方或下方。在你的 css 中，给它另一个 class 可能是这样的：

.menuIcon {
  display: 'none';
  /* your other styles here */
}

然后媒体查询（你可以做多个）做这样的事情：

@media only screen and (max-width: 1000px) {
  .menuIcon {
    /* styles */
  }
  .sidebar {
    display: 'none';
    /* styles */
  }
}

当然可以更改媒体查询以匹配您要调整的屏幕尺寸，以及您想要的样式。

如何将已创建的侧边栏转换为响应式设计？

How can I convert an already created sidebar into a responsive design?

html

javascript

css

responsive-design