День добрый!
Подскажите как правильно написать js.
есть код меню HTML
<nav class="menu_top">
<div class="container">
<div class="row">
<div class="menu_ico">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu">
<li><a href="" alt="Главная">Главная</a></li>
<li><a href="" alt="О проекте">О проекте</a></li>
<li><a href="" alt="Организаторы">Организаторы</a></li>
<li><a href="" alt="Фильмы">Фильмы</a></li>
<li><a href="" alt="Отзывы">Отзывы</a></li>
<li><a href="" alt="Работа с проектом">Работа с проектом</a></li>
<li><a href="" alt="Контакты">Контакты</a></li>
</ul>
</div>
</div>
</nav>
есть кусок стилий css
.menu_top.op_m .menu_ico span:nth-child(1){
top: 18px;
width: 0%;
left: 50%;
}
.menu_top.op_m .menu_ico span:nth-child(2){
transform: rotate(45deg);
}
.menu_top.op_m .menu_ico span:nth-child(3){
transform: rotate(-45deg);
}
.menu_top.op_m .menu_ico span:nth-child(4){
top: 18px;
width: 0%;
left: 50%;
}
.menu.op_m a{
opacity: 1;
}
}
.menu_ico {
width: 45px;
height: 35px;
display: none;
position: relative;
cursor: pointer;
}
.menu_ico span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #333333;
border-radius: 6px;
left: 0;
transform: rotate(0deg);
transition: .30s ease-in-out;
}
.menu_ico span:nth-child(1){
top: 0px;
}
.menu_ico span:nth-child(2), .menu_ico span:nth-child(3){
top: 13px;
}
.menu_ico span:nth-child(4){
top: 26px;
}
подключила JQ
и слизала код для меню который будет при клике отображать меню
(function ($) {
$(function(){
$('.menu_ico').on('click', function(){
$(this).closest('.menu_top').toggleClass('op_m');
});
});
})(jQuery);
не работает =(((
Подскажите кто знает.
Знаю что много разных других решений, но хочется понять это!
