😎 » DARYA DLE » Готовые дизайны » Мобильное меню в любом месте
733 0  

Мобильное меню в любом месте

В данной конструкции кнопочка которая открывает мобильное меню может находится в любом месте дизайна, при клике на нее к мобильному меню добавляется новый клас, при повторном убирается. Можно добавлять класы сразу к нескольким контейнерам.

HTML:

<div class="btn-menu"><s></s><s></s><s></s></div>

CSS:

/*=Mob menu=*/
.btn-menu{display:none; width:30px;height:20px;padding:0px;position:absolute;top:15px;left:20px;z-index:615;cursor:pointer;transition:left .23s;transform:translateZ(0);}
.btn-menu s{display:block;height:2px;width:100%;background: var(--dark); margin:7px 0 0 0; transition:all .1s linear .23s;position:relative;}
.btn-menu s:nth-of-type(1) {margin-top:0;}
.btn-menu.activs s:nth-of-type(1){transform:rotate(45deg);top:9px;}
.btn-menu.activs s:nth-of-type(2){opacity:0;}
.btn-menu.activs s:nth-of-type(3){transform:rotate(-45deg);top:-9px;}

@media (max-width: 900px) {
.btn-menu {display:block;}
}

JQery:

<script>
//Mobil-menu
$(function(){
            $('.btn-menu').click(function(){
                $('.mobmenu').toggleClass('activs'),
                $('.btn-menu').toggleClass('activs');
            });    		
        });
</script>

Описание как работает:

  1. Блок меню с класом "btn-menu" ставите где хотите в дизайне он абсолютно позиционирован и по умолчанию скрыт.
  2. Когда ширина экрана станет 900рх он появляется.
  3. При нажати на btn-menu" к нему добавляется класс "activs",  а также к вашему мобильному меню "mobmenu" добавляется клас "activs".
  4. При повторном клике классы убираются.

bully если нужно сделать на чистом JS то вот решение тут (* внизу страницы)


Залишити свій коментар:

Досвід у веброзробці:

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