Добрый день.
Делаю выдвигающееся меню с анимацией на css. Функция js меняет стиль блока, показывает его. Хочу чтобы при клике на кнопку/ссылку меню открывалось (выполнялась функция) и после второго клика закрывалось, тоже с изменением стилей.
Пока только блок при нажатии на ссылку мигает - появляется и исчезает. Нужно, я так понимаю, что-то из html. Обратную анимацию добавлю. Направьте меня, пожалуйста, в нужное русло.
С js только начинаю знакомиться, поэтому гуглится трудновато.
Код
<body>
<a onclick="openMenu()" href=""> Меню</a>
<div id='menu' class="menu slide-in-left">
<nav>
<a href="">menu 1</a>
<a href="">menu 2</a>
</nav>
</div>
<script src="script.js"></script>
</body>
function openMenu() {
let menu = document.getElementById('menu');
menu.style.display = 'block';
}
.menu {
display: flex;
width: 200px;
height: 500px;
border: solid red;
}
#menu {
display: none;
}
.slide-in-left {
-webkit-animation: slide-in-left 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s ;
animation: slide-in-left 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s ;
}
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
Простой
