Мобильное меню в любом месте
В данной конструкции кнопочка которая открывает мобильное меню может находится в любом месте дизайна, при клике на нее к мобильному меню добавляется новый клас, при повторном убирается. Можно добавлять класы сразу к нескольким контейнерам.
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>
Описание как работает:
- Блок меню с класом "btn-menu" ставите где хотите в дизайне он абсолютно позиционирован и по умолчанию скрыт.
- Когда ширина экрана станет 900рх он появляется.
- При нажати на btn-menu" к нему добавляется класс "activs", а также к вашему мобильному меню "mobmenu" добавляется клас "activs".
- При повторном клике классы убираются.
если нужно сделать на чистом JS то вот решение тут (* внизу страницы)