Javascript

Адаптивное многоуровневое меню на чистом javascript

Стили

<style>
body {margin: 0; padding: 0}
nav {background-color: #00a4d5; position: relative; text-align: center}
nav ul {display: inline-block; background-color: #00a4d5; margin: 0; padding: 0; list-style: none; }
nav ul li {display: inline-block}
nav ul li a {display: block; padding: 10px 15px; color: #fff; text-decoration: none;}
.openMenu {display: none; color: #fff; padding: 10px 15px; cursor: pointer}
.menu-item {position: relative}
.menu-item>span {display: none;}
.sub-menu {height: 0; overflow: hidden; opacity: 0; transition: all 0.5s ease-in; position: absolute; width: 100%; top: 100%; left: 0;
text-align: left}
@media (max-width: 767px) {
.openMenu {display: block}
nav ul#menu {display: none; position: absolute; top: 100%; left: 0; width: 100%; transition: all 0.5s ease-in;}
nav ul#menu.active {display: block}
nav ul li {display: block}
.menu-item>span {display: block; position: absolute; right: 10px; top: 10px; color: #fff;}
.sub-menu {position: static}
}
</style>

Верстка

<nav>
<div class="openMenu" id="openMenu">Открыть меню</div>
<ul id="menu">
<li class="menu-item">
<a href="#">Первый пункт</a>
<ul class="sub-menu">
<li>
<a href="#">Подпункт меню 1</a>
</li>
<li>
<a href="#">Подпункт меню 2</a>
</li>
<li>
<a href="#">Подпункт меню 3</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#">Второй пункт</a>
</li>
<li class="menu-item">
<a href="#">Третий пункт</a>
</li>
<li class="menu-item">
<a href="#">Четвертый пункт</a>
<ul class="sub-menu">
<li>
<a href="#">Подпункт меню 1</a>
</li>
<li>
<a href="#">Подпункт меню 2</a>
</li>
<li>
<a href="#">Подпункт меню 3</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="#">Пятый пункт</a>
</li>
</ul>
</nav>

Скрипт

window.onload = function () {
var subMenu,
subMenuStyle,
menuStyle,
opener,
el = document.getElementsByClassName('menu-item'),
winWidth = document.documentElement.clientWidth;
for(var i=0; i<el.length; i++){
if(el[i].children.length > 1) {
opener = document.createElement('span');
opener.innerHTML = ">>";
el[i].insertBefore(opener, el[i].children[1]);
if(winWidth>=768){
el[i].addEventListener("mouseenter",showSub,false);
el[i].addEventListener("mouseleave",hideSub,false);
} else {
el[i].children[1].addEventListener("click",subOpen,false);
}
}
}
function showSub() {
subMenu = this.children[2];
subMenu.style.height = "auto";
subMenu.style.overflow = "visible";
subMenu.style.opacity = "1";
}
function hideSub() {
subMenu = this.children[2];
subMenu.style.height = "0px";
subMenu.style.overflow = "hidden";
subMenu.style.opacity = "0";
}
function subOpen() {
subMenu = this.nextElementSibling;
subMenuStyle = getComputedStyle(subMenu);
if(subMenuStyle.height == "0px"){
subMenu.style.height = "auto";
subMenu.style.overflow = "visible";
subMenu.style.opacity = "1";
} else {
subMenu.style.height = "0px";
subMenu.style.overflow = "hidden";
subMenu.style.opacity = "0";
}
}
menuStyle = getComputedStyle(menu);
openMenu.onclick = function () {
if(menuStyle.display == "none"){
menu.classList.add("active");
this.innerHTML = "Закрыть меню";
} else {
menu.classList.remove("active");
this.innerHTML = "Открыть меню";
}
}
}


Возврат к списку

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

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

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