Как сделать плавную анимацию бокового меню . How to create animation of burger menu

Question

Перепробовал много вариантов, ничего не работает. Нужно сделать плавную анимацию слева на право для бокового меню

Мой код

.left-menu {

display: block;

background-color: white;

width: 250px;

margin-left: 0;

height: 100%;

color: black;

text-align: left;

padding: 0;

margin: 0;

overflow: hidden;

transition: all 0.5s ease;
}

.left-menu ul {

padding-top: 10px;

overflow: hidden;

list-style-type: none; /* Забираємо маркери списку */
}

.left-menu ul li a {

overflow: hidden;

margin-left: 10px;

text-decoration: none; /* Прибираємо підкреслення з посилання */

color: black; /* Колір тексту чорний */

display: flex; /* Робимо, щоб посилання займало весь рядок */

padding: 10px;

font-size: 20px;

margin-bottom: 0;

line-height: 1;

transition: all 0.5s ease;
}

.left-menu ul li a:hover {

padding-left: 25px;

transition: all 0.5s ease;
}

.left-menu ul li {

overflow: hidden;

margin: 0; 

padding: 0;
}

Также есть кнопка которая отвечает за открытия и закрытия

Открытия

#burgerMenuBtn {

background-color: transparent;

border: none;
}

Закрытия <button id="closeOverlay">

То при открытии и закрытии нужно сделать анимацию

Боковое меню скрито по умолчанию с помощью display: none; То нужно чтобы анимация была сразу при нажатии кнопки, то есть чтобы она вилетала слева в право и наоборот при закрытии.

Буду рад если поможете, очень срочно надо???

В результате у меня была без анимации, пробовал юзать transform, transition, @keyframes не помогло

Answer 1

Вы хотели этого я так понял. Здесь я простой пример привёл через hover. Делается это при помощи абсолюта и смещения влево, а исчезает он, потому что у его родителя(в данном случае body) overflow-x:hidden выставлен.
Вам же нужно убрать display:none и сделать как у меня на смещении. Код на JS вы сказали у вас готов. display: none не работает, так как на него не работает transition, а вот на смещение он реагирует.

body {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

button {
  
}
button + .menu {
  position: absolute;
  left: -200px;
  top: 0;
  bottom: 0;
  display: block;
  width: 200px;
  height: 100vh;
  background-color: orange;
  transition: 0.5s;
}
button:hover + .menu {
  left: 0;
}

<body>
  <button>Кнопка</button>
  <div class="menu">
  
  </div>
</body

БЛОГ НА HUSL

Как сделать плавную анимацию бокового меню . How to create animation of burger menu

Ответы (1 шт):