Боковая панель выглядит так, как показано ниже. Что я должен добавить в этот код, например обертку, чтобы он реагировал на экране мобильного устройства?

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

Это моя боковая панель. Как превратить его в значок гамбургера на экранах мобильных устройств, который при нажатии или перетаскивании перемещается слева направо вместе со всей боковой панелью.

0
Akash p 12 Фев 2021 в 09:21

1 ответ

Лучший ответ

Что я могу сделать, так это использовать медиа-запрос. Если вы хотите, чтобы это была просто иконка с маленьким значком гамбургера, сделайте иконку выше или ниже того места, где вы сделали эту боковую панель. В вашем css, который у вас есть, дайте ему другой класс, возможно, примерно так:

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

Затем медиа-запрос (вы можете сделать более одного) делает что-то вроде этого:

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

Конечно, измените медиа-запрос, чтобы он соответствовал размеру экрана, для которого вы хотите настроить, и настройте его так, как вы хотите.

2
Cindy 12 Фев 2021 в 07:01