840 0
Выпадающее меню при клике
Выпадающее меню при клике реализованое при помощи маленького скрипта
Такое же меню - но выпадающее при ховере - смотреть
Выпадающее меню - через checkbox
Виконуваний код:
<![CDATA[<!-- ۞ MENU TM͡๏̯͡๏ rullan
<nav id="myDropdown" class="dropdown" itemscope itemtype="https://www.schema.org/SiteNavigationElement">
<button onclick="myFunction()" class="dropbtn knopka-1"><s></s><s></s><s></s></button>
<ul class="dropdown-content">
<li itemprop="name"><a class="actmenu" itemprop="url" title="" href="/"><s class="bg-lvm_0"></s>Главная</a></li>
<li itemprop="name"><a itemprop="url" title="" href=""><s class="bg-lvm_1"></s>Сериалы</a></li>
<li itemprop="name"><a itemprop="url" title="" href=""><s class="bg-lvm_2"></s>Мультфильмы</a></li>
<li itemprop="name"><a itemprop="url" title="" href=""><s class="bg-lvm_3"></s>Аниме</a></li>
<li itemprop="name"><a itemprop="url" title="" href=""><s class="bg-lvm_5"></s>Фильмы</a></li>
<li itemprop="name"><a itemprop="url" title="" href=""><s class="bg-lvm_6"></s>Мультсериалы</a></li>
<li itemprop="name"><a itemprop="url" title="" href=""><s class="bg-lvm_4"></s>Аниме сериалы</a></li>
<li itemprop="name"><a itemprop="url" title="" href=""><s class="bg-lvm_7"></s>Подборки</a></li>
</ul>
</nav>
/end MENU -->
<style>
/*-- ۞ MENU TM͡๏̯͡๏ rullan --*/
.dropdown {margin:0; padding:0;}
.dropdown-content a{display:inline-block; padding:20px 20px 20px 0; font-weight:700;}
.show, .show .dropdown-content {display: block;}
/*-- knopka menu --*/
.dropbtn {cursor:pointer;}
.dropbtn:hover, .dropbtn:focus {background: #2980B9;}
.dropbtn{display:none;width:40px;height:40px;padding:5px;position:absolute;top:10px;right:20px;z-index:615;cursor:pointer;transition:left .23s;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;}
.dropbtn s{display:block;height:2px;background:var(--black);margin:0;transition:all .1s linear .23s;position:relative;}
.dropbtn s:nth-of-type(2) {margin:10px 0;}
.show.dropbtn s:first-child {transform:rotate(45deg);-webkit-transform:rotate(45deg);top:13px;color:#a7a9ab;}
.show.dropbtn s:nth-of-type(2){opacity:0;}
.show.dropbtn s:last-child{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:-11px;color:#a7a9ab;}
.dropdown-content.activmens {display:block;}
}
</style>
<script>
/* ۞ MENU TM͡๏̯͡๏ rullan */
function addClassByClick(event) {
const button = event.target;
const { classList } = button;
const buttonReg = new RegExp(/knopka-d+/);
let index;
for (let i = 0; classList[i]; i ++) {
const className = classList[i];
index = !index ? className.match(buttonReg) : index;
if (index) {
index = index ? index[0] : null;
index = index ? index.replace('knopka-', '') : null;
}
}
button.classList.toggle(`actknp-${index}`);
const elem = document.querySelector('.dropdown-content');
elem.classList.toggle('actdr');
const elem2 = document.querySelector('.dropbtn');
elem2.classList.toggle('show');
}
</script>]]>