By
garmoni
Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.
<nav class="nav">
<div class="nav__btn">
<a id="nav-toggle" href="#"><span></span> </a>
</div>
<ul class="nav__list">
<li>
<a href="#" class="nav__link">Episodes</a>
</li>
<li>
<a href="#" class="nav__link">Characters</a>
</li>
<li>
<a href="#" class="nav__link">Park</a>
</li>
<li>
<a href="#" class="nav__link">Gallery</a>
</li>
<li>
<a href="#" class="nav__link">actors</a>
</li>
</ul>
</nav>
$(document).ready(function(){
$('#nav-toggle').click(function(){
$(this).toggleClass('active');
});
.nav__list {
display: none;
}
#nav-toggle {position: relative; display: inline-block; width:42px; height:25px;}
#nav-toggle span { position: absolute; left: 0; top: 10px; }
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
position: absolute;
display: block;
content: '';
height: 5px;
width: 42px;
background: #000;
border-radius: 2px;
cursor: pointer;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
/* Добавим анимацию всех свойств для блоков нашей иконки */
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
/* Центральный блок делаем прозрачным */
#nav-toggle.active span {
background-color: transparent;
}
/* Смещаем псевдо-элементы в центр иконки (на место основного блока) */
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
/* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}