1

У меня есть меню, которое по нажатию кнопки, выезжает вправо на 250px, сдвигая основной контент на такое же значение. Я не могу правильно обработать нажатие кнопки, чтобы при нажатии она тоже отъезжала на 250px вместе с sidebar-ом (она стоит на месте).

HTML-код кнопки:

<button type="button" id="sidebarCollapse" class="btn btn-info toggleBtn">
    <span>☰</span>
</button>

CSS-код кнопки:

/* кнопка схлопывания */
#sidebarCollapse {
    position: absolute;
    left: 5px;
    top: 60px;
}

введите сюда описание изображения

2
  • добрый день! Есть ли пример для просмотра? 7 мар 2021 в 12:39
  • @DjangoStudent, я добавил 1 фотографию. Если этого не достаточно, я еще скину 7 мар 2021 в 13:10

1 ответ 1

2

Я такую задачу делаю с помощью Checkbox. Вот Мой код

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
body {
  font-family: 'Roboto', sans-serif;
}
.sidebar {
  position: fixed;
  left: -250px;
  width: 250px;
  height: 100%;
  background: #bdbddb;
  transition: all .5s ease;
}
.sidebar header {
  font-size: 22px;
  color: white;
  line-height: 70px;
  text-align: center;
  background: #bdbdff;
  user-select: none;
}
.sidebar ul a{
  display: block;
  height: 100%;
  width: 100%;
  line-height: 65px;
  font-size: 20px;
  color: white;
  padding-left: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid black;
  border-top: 1px solid rgba(255,255,255,.1);
  transition: .4s;
}
ul li:hover a{
  padding-left: 50px;
}
.sidebar ul a i{
  margin-right: 16px;
}
#check{
  display: none;
}
label #btn,label #cancel{
  position: absolute;
  background: #bdbdbd;
  border-radius: 3px;
  cursor: pointer;
}
label #btn{
  left: 40px;
  top: 25px;
  font-size: 35px;
  color: white;
  padding: 6px 12px;
  transition: all .5s;
}
label #cancel{
  z-index: 1111;
  left: -195px;
  top: 17px;
  font-size: 30px;
  color: white;
  padding: 4px 9px;
  transition: all .5s ease;
}
#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #cancel{
  left: 195px;
}
#check:checked ~ section{
  margin-left: 250px;
}
section{
  background: url(bg.jpeg) no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
  transition: all .5s;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
    <input type="checkbox" id="check">
    <label for="check">
      <i class="fas fa-bars" id="btn"></i>
      <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
    <header>Сим-сим</header>
  <ul>
<li><a href="#"><i class="fas fa-qrcode"></i>Мужские )))</a></li>
<li><a href="#"><i class="fas fa-link"></i>Легкие</a></li>
<li><a href="#"><i class="fas fa-stream"></i>Средные</a></li>
<li><a href="#"><i class="fas fa-calendar-week"></i>Сложные</a></li>
<li><a href="#"><i class="far fa-question-circle"></i>Для Гениев</a></li>
</ul>
</div>
<section></section>
  </body>
</html>

3
  • 1
    иконка зачем то зависает. При перезагрузке она появится 7 мар 2021 в 13:44
  • 1
    Огромное спасибо. Я адаптировал под себя немного элементов. P.S. Там было написано Детские)) 7 мар 2021 в 14:16
  • 1
    Не за что. Я рад, что помог 7 мар 2021 в 17:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.