Блог

КОД БОКОВОЙ ПАНЕЛИ:

 <div class="sidenav" id="sidebar">
    <div class="sideheader">
    <a><img src="Dashboard_dark.svg" class="sidepanel">DashBoard</a>
    </div>
    <div class="sideheader">
    <a href="issues.html" target="_self"><img src="Issues_dark.svg"class="sidepanel">Issues</a>
    </div>
    <div class="sideheader">
    <a href="create.html" target="_self"><img src="Create_dark.svg" class="sidepanel">Create</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"></a>
    <i class="fa fa-bars"></i>
  </div>
</div>
 

Код JS:

 <script type="text/javascript">
  function myFunction() {
  var x = document.getElementById("sidebar");
  if (x.className === "sidenav") {
    x.className  = " responsive";
  } else {
    x.className = "sidenav";
  }
}
</script>
 

Код CSS:

     .sidenav {
  margin-top: 59px;
  width: 192.5px;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1D1F37;
  padding-top: 20px;
  align-items: center;
  position: fixed;
  height: 100%;
  border-top: 1px solid gray;
  align-self:stretch;
  background-color: #1D1F37;

}
.sidenav a {
  padding: 6px 8px 20px 16px;
  text-decoration: none;
  font-size: 17px;
  color: #818181;
  display: block;
}
    @media screen and (max-width: 600px) {
  .sidenav a:not(:first-child) {display: none;}
  .sidenav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .sidenav.responsive {position: relative;}
  .sidenav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .sidenav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
 
 

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

1 — В вашем исходном коде html нет тега с классом .topnav , но вы указываете этот класс в медиа-запросах. Я создал div с этим классом, сделав его основным.

2 — Не было близкого тега </a> для тега <a> . Этот тег был перенесен в тег из лассмо .topnav .

3 — Вы указываете разные медиа — запросы с одной и той же точкой останова-максимальная ширина: 600 пикселей. Я объединил их в один медиа-запрос.

4 — Добавьте это в свой css:

 .topnav a.icon {
    display: none;
}
 

5 — По умолчанию я скрыл .sidenav с left: -100% правилом, но после добавления класса я добавляю left: 0 правило (для отображения .sidenav ).

6 — Кроме того, произошла путаница с классами в медиа-запросе. Вы добавляете responsive класс для .topnav , но вам нужно добавить этот класс для .sidenav .

7 — И удален position: relative из .sidenav.responsive , в запросе СМИ.

 function myFunction() {
    var x = document.getElementById("sidebar");
    if (x.className === "sidenav") {
        x.className  = " responsive";
    } else {
        x.className = "sidenav";
    }
} 

 .sidenav {
    /*margin-top: 59px;*/
    width: 192.5px;
    z-index: 1;
    top: 0;
    left: -100%;
    background-color: #1d1f37;
    padding-top: 20px;
    align-items: center;
    position: fixed;
    height: 100%;
    border-top: 1px solid gray;
    align-self: stretch;
    background-color: #1d1f37;
}

.sidenav a {
    padding: 6px 8px 20px 16px;
    text-decoration: none;
    font-size: 17px;
    color: #818181;
    display: block;
}

.topnav a.icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .sidenav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .sidenav.responsive {
        /*position: relative;*/
        left: 0;
    }

    .sidenav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .sidenav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
} 

 <div class="topnav">
    <div class="sidenav" id="sidebar">
        <div class="sideheader">
            <a><img src="Dashboard_dark.svg" class="sidepanel" />DashBoard</a>
        </div>
        <div class="sideheader">
            <a href="issues.html" target="_self"><img src="Issues_dark.svg" class="sidepanel" />Issues</a>
        </div>
        <div class="sideheader">
            <a href="create.html" target="_self"><img src="Create_dark.svg" class="sidepanel" />Create</a>
        </div>
    </div>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i>TOGGLE </a>
</div>