396 0
Выпадающее меню без checkbox + моб версия
В мобильной версии меню скрывается и его можно вызвать по кнопке (class="btn-menu") которая появляется в мобильной версии...
---
Такое меню же на checkbox - смотреть
---
Демо меню:
*оформление меню не учтено только функционал...
Виконуваний код:
<![CDATA[<div class="hdnav">
<!-- Navigacia */-->
<!-- nav -->
<div class="btn-menu"><s></s><s></s><s></s></div>
<nav class="navhdmune" itemscope itemtype="https://www.schema.org/SiteNavigationElement">
<ul class="row hd-menu">
<li itemprop="name"><a itemprop="url" href="/">Главная</a></li>
<li itemprop="name"><a id="clickme" class="aopensbm" itemprop="url" href="#">Большое меню</a>
<div id="book" class="subhdmenu">
<div class="row subdmn-tilo">
<div class="ubhdm-col">
<span>Столбец 1:</span>
<ul>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
</ul>
</div>
<div class="ubhdm-col">
<span>Столбец 2:</span>
<ul>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
<li><a href="">Пподпункт2 уровня</a></li>
</ul>
</div>
<div class="subhdm-forma">
<span>Нужна помощь?</span>
<p>Наши менеджера помогут подобрать Вам нужный номер</p>
<a class="knopka2 " href="#">Оставить заявку</a>
</div>
</div>
</div>
</li>
<li itemprop="name"><a itemprop="url" href="/blog/">Блог</a></li>
<li itemprop="name"><a id="clickme2" class="aopensbm" itemprop="url" href="#">Мини меню</a>
<div id="book2" class="subhdmenu subv2">
<div class="subdmn-tilo">
<ul>
<li><a href="">Размещение на сайте</a></li>
<li><a href="">Соглашение</a></li>
<li><a href="/index.php?do=feedback">Контакты</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
<!--/ nav -->
</div>
<style>
:root {
--green: #198754;
--white: #fff;
--light: #f8f9fa;
--black: #000;
--gray: #3b444f;
--lightgray: #e7eaf3;
--suniy: #297cbb;
--sir: #67747c;
}
/* Стили оформления меню*/
.row {display:flex!important; flex-flow: row wrap;justify-content: space-between; align-items: flex-start;} /* !important можно убрать - здесь конфлик с моим дизайном*/
.hd-menu {justify-content: flex-end;}
.hd-menu li {margin:5px 15px; position:relative;}
.hd-menu li:last-child{margin-right:0;}
.hd-menu li a {color: var(--suniy); font-size:1.3em; position:relative; z-index:17;}
.hd-menu li .flaticon-like {font-size:1.4em;}
/* Основа меню скелет*/
.actnav{display:block; width:100%; padding:20px 20px; background: var(--gray);}
.btn-menu{display:none;width:30px;height:30px;padding:0px;position:absolute;top:20px;right:30px;z-index:65;cursor:pointer;transition:left .23s;transform:translateZ(0);-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;}
.btn-menu s{display:block;height:2px;background:var(--white);margin:8px 0 0;transition:all .1s linear .23s;position:relative;}
.actbtn.btn-menu:before{content:'';}
.actbtn.btn-menu s:nth-of-type(1){transform:rotate(45deg);-webkit-transform:rotate(45deg);top:9px;color:#a7a9ab;}
.actbtn.btn-menu s:nth-of-type(2){opacity:0;}
.actbtn.btn-menu s:nth-of-type(3){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);top:-11px;color:#a7a9ab;}
.menuhed {position:relative; overflow:hidden; animation:menuhds .5s linear; }
@keyframes menuhds {0% {height:1px;} 100% {height:150px;} }
.actnav ul {margin:0; padding:0;}
.actnav li {display:block; width:100%; padding:5px 0; font-size:1.3em;}
.actnav .mobil-punkt, .mobil-punkt {display:none;}
/* SUB HEDMENU */
.subhdmenu {display:none; padding-top:40px; position:absolute; top:0px; right:0; z-index:15;}
.aopensbm:hover ~ .subhdmenu, .aopensbm:hover > .subhdmenu, .subhdmenu:hover {display:flex; transition:all linear .2s;}
.subdmn-tilo {position:relative; width:650px; background: var(--white); padding:20px; border-radius: 5px;}
.subdmn-tilo::after {content:''; display: block; position: absolute;top: -10px; right:40px; width: 0;height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--white);}
.ubhdm-col > div{flex:1;}
.subhdmenu > div span {font-size:1.2em; color: var(--gray);display:block; font-weight:500; margin:0 0 30px 0;}
.hd-menu .subhdmenu li {margin:5px 0; padding:3px 0 7px 0; border-bottom: 1px solid var(--lightgray); }
.hd-menu .subhdmenu li:hover::before {content:"";display:block;width:3px;height:100%; background:var(--suniy); position:absolute;top:0; left:-12px;}
.hd-menu .subhdmenu li a {color: var(--gray); font-size:1em; line-height:1.1; }
.hd-menu .subhdmenu li a:hover {color: var(--suniy);}
.subhdm-forma {width:240px; height:242px; padding:20px 40px 20px 20px; border-radius:5px; background:url(../images/sprit.png) -385px -373px no-repeat;}
.subhdm-forma p {width:134px; font-size:1.1em; line-height:1.2;}
.subhdm-forma .knopka2 {padding:5px 10px; font-size:16px; letter-spacing:0; margin-top:20px;}
.subv2 {width:200px;}
.hd-menu .subv2 > a {display:block; padding:11px 0 12px 0; border-bottom: 1px solid var(--lightgray); color: var(--gray); font-size:1em; line-height:1.1;}
.hd-menu .subv2 > a:last-child {border:none;}
/* === MOBIL === */
@media (max-width: 980px) {
/* для мобильной версии*/
.navhdmune{display:none;}
.nav-down nav .mobil-punkt {display:block!important;}
.actnav, .tab.active s::after, .subdmn-tilo::after{display:none;}
.actnav {display:block!important;}
.btn-menu, .hd-menu{display:block;}
}
</style>
<script>
//Mobil menu
$(function(){
$('.btn-menu').click(function(){
$('.btn-menu').toggleClass('actbtn'),
$('.navhdmune').toggleClass('actnav');
});
});
// VUPADAUSHE POD-MENU
$( "#clickme" ).first().click(function() { $( "#book" ).first().fadeToggle( "slow", "linear" ); });
$( "#clickme2" ).first().click(function() { $( "#book2" ).first().fadeToggle( "slow", "linear" ); });
</script>]]>