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

【问题标题】：How can I convert an already created sidebar into a responsive design?如何将已创建的侧边栏转换为响应式设计？
【发布时间】：2021-02-12 15:01:28
【问题描述】：

侧边栏看起来像下面的 sn-p。我应该在此代码中添加什么，例如包装器以使其在移动屏幕中响应？

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

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

【问题讨论】：

标签： javascript html css responsive-design

【解决方案1】：

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

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

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

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

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

【讨论】：