О Битрикс

Адаптивное многоуровневое меню с использованием jquery

Адаптивное многоуровневое меню с использованием jquery

Не забываем подключить jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Стили:

body {font-family: Arial; margin: 0; padding: 0;}
.container {max-width: 920px; margin: 0 auto}
nav {background: cornflowerblue;}
.ham {
display: none;
background: none;
position: absolute;
min-width: 40px;
min-height: 24px;
padding: 0;
border: 0;
outline: none;
cursor: pointer;
top: 15px;
right: 15px;
z-index: 3;
}
.ham > .bar {
display: block;
background: #818285;
position: absolute;
left: 0px;
width: 70%;
height: 4px;
border-radius: 6px;
-webkit-transition: all 350ms;
transition: all 350ms;
}
.ham > .bar:first-child {
top: 0;
-webkit-transform-origin: top right;
transform-origin: top right;
}
.ham > .bar:nth-child(2) {
top: 10px;
}
.ham > .bar:last-child {
bottom: 0;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.ham.opened > .bar {
background: #fff;
left: 0px;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.ham.opened > .bar:nth-child(2) {
opacity: 0;
width: 0;
}
.ham.opened > .bar:last-child {
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}

.nav-header {text-align: center}
.nav-header ul{list-style: none; padding: 0; margin: 0;}
.nav-header ul li {position: relative}
.nav-header a {padding: 15px; display: block; color: #fff; font-size:16px; text-decoration: none}
.child {display: none; background: cornflowerblue; text-align: left}
@media(min-width: 761px){
.nav-header>ul>li {display: inline-block;}
.child {position: absolute; top: 100%; width: 150%}
.nav-header span {display: none}
}
@media(max-width: 760px){
body.no_scroll {overflow: hidden;}
.ham {display: block}
.nav-header { position: absolute;
width: 100%;
left: -100%;
margin-top: 0;
z-index: 2;
height: 100%;
background: cornflowerblue;
overflow-y: scroll;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;}
.nav-header>ul {padding: 35px 15px 15px;}
.nav-header a {display: block}
.nav-header.active { left: 0;}
.nav-header span {position: absolute; font-size: 13px; right: 0; top: 15px; cursor: pointer; color: red}
}

Верстка:

<nav> 
<div class="container">
<button class="ham nav"><span class="bar"></span><span class="bar"></span><span class="bar"></span></button>
<div class="nav-header">
<ul>
<li class="parent_link"><span>open</span>
<a href="#" >Первый пункт</a>
<ul class="child">
<li>
<a href="#">Подпункт меню 1</a>
</li>
<li>
<a href="#">Подпункт меню 2</a>
</li>
<li>
<a href="#">Подпункт меню 3</a>
</li>
</ul>
</li>
<li class="">
<a href="#">Второй пункт</a>
</li>
<li class="">
<a href="#">Третий пункт</a>
</li>
<li class="parent_link"><span>open</span>
<a href="#" >Первый пункт</a>
<ul class="child">
<li>
<a href="#">Подпункт меню 1</a>
</li>
<li>
<a href="#">Подпункт меню 2</a>
</li>
<li>
<a href="#">Подпункт меню 3</a>
</li>
</ul>
</li>
<li class="">
<a href="#">Пятый пункт</a>
</li>
</ul>
</div>
</div>
</nav>

Скрипт:

$(document).ready(function () { 
var $win_n = $(window).width();
$('.ham').on('click', function () {
var $btn = $(this);
if(!$btn.hasClass('opened')){
$('.nav-header').addClass('active');
$('body').addClass('no_scroll');
$('.ham').removeClass('closed');
$('.ham').addClass('opened');
} else {
$('.nav-header').removeClass('active');
$('body').removeClass('no_scroll');
$('.ham').addClass('closed');
$('.ham').removeClass('opened');
}
});
if($win_n<=760){
$('.parent_link span').click(function () {
if($(this).parent().children('.child').css("display")=="none"){
$('.child').hide('normal');
$(this).parent().children('.child').show('normal');
$('.parent_link').removeClass('active');
$(this).parent().addClass('active');
} else {
$('.child').hide('normal');
$('.parent_link').removeClass('active');
}
})
} else {
$('.parent_link').mouseenter(function () {
$(this).children('.child').show('normal');
$(this).addClass('active');
});
$('.parent_link').mouseleave(function () {
$('.child').hide('normal');
$('.parent_link').removeClass('active');
});
}
})

сайт на Bitrix

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.

Социальные сети

Рандом новостей