Главная » DARYA DLE » Готовые дизайны » Выпадающее меню без checkbox + моб версия
27 0  

Выпадающее меню без checkbox + моб версия

В мобильной версии меню скрывается и его можно вызвать по кнопке (class="btn-menu") которая появляется в мобильной версии...

---

Такое меню же на checkbox - смотреть

---

Демо меню:

*оформление меню не учтено только функционал...

Исполняемый код:

<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>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020