Мобильное меню с кнопкой, легкий и быстрый способ

Делаем из горизонтального меню – мобильное

Чтобы быстро сделать сворачивающимся горизонтальное меню можно конечно подключить тяжелый фреймворк Bootstrap, а можно пойти путем описанном на этой странице.

Итак мы имеем меню:

<ul class="mainmenu menu" id="hidd">
 <li class="item-101"><a href="#">Главная</a></li>
 <li class="item-162"><a href="#">Услуги</a></li>
 <li class="item-130"><a href="#">О нас</a></li>
 <li class="item-131"><a href="#">Стоимость</a></li>
 <li class="item-132"><a href="#">Отзывы</a></li>
 <li class="item-133"><a href="#">Туризм</a></li>
 <li class="item-163"><a href="#">Фотогалерея</a></li>
 <li class="item-134"><a href="#">Контакты</a></li>
</ul>

Для начала убедимся что у нас viewport в настроен правильно:

<meta name="viewport" content="width=device-width, initial-scale=1">

[the_ad id=’954′]

Затем добьемся адаптивности меню с помощью @media запроса:

@media (max-width: 640px)
.mainmenu li {
    float: none; / 
    width: 100%;
}

Тут мы указали браузеру, чтобы при ширине экрана максимум 640 пикселей у всех пунктов меню убиралось обтекание и ширина была 100%.

Убедимся что горизонтальное меню превращается в вертикальное – т.е. блоки располагаются один под другим, посмотрим на телефоне как отобразилось меню, если все ок, идем дальше.

Теперь нам нужно добавить кнопку, которая будет появляться на мобильных устройствах и открывать по нажатию наше меню, для этого добавим саму кнопку выше блока меню

<a href="#" class="open_menu">Меню</a>

Добавим в файле стилей CSS описания кнопке, например так:

.open_menu {display:block;width: 96%;
    box-sizing: border-box;
    background: #64b7ac;
    margin: 0 auto;
    padding: 14px 10px;
    text-align: center;
    color: #fff;
    font-size: 20px;}
.open_menu:before {content:"☰";margin-right: 10px;}

Само меню по умолчанию должно быть скрытым для мобильных устройств, поэтому скроем его с помощью CSS так:

#hidd {display:none;}

Теперь сделаем так чтобы на широких экранах кнопка исчезала, а меню появлялось, добавим @media запрос и укажем в нем два стиля…

@media (min-width:640px) { 
.open_menu {display:none !important} /* на экранах более 640 пикс кнопку скроем */
#hidd {display:block !important}     /* а наше меню, у которого #hidd наоборот покажем */
}

Далее нам нужно добавить обработчик клика кнопки, пишем скрипт:

<script>
jQuery( ".open_menu" ).click(function() {
  jQuery( this ).toggleClass( "opened" ); // по нажатию добавляем кнопке дополнительный класс "opened"
  jQuery("#hidd").slideToggle( "slow" ); // разворачиваем наше меню
});
</script>

Мы использовали toggle поэтому при нажатии повторно на кнопку меню скроется, а класс .opened исчезнет. Этот класс мы можем использовать для стилизации как хотим.

Готово! Увидеть кнопку в работе можно тут

[the_ad id=’977′]

Весь код:

<a href="#" class="open_menu">Меню</a>
 
<ul class="mainmenu menu" id="hidd">
 <li class="item-101"><a href="#">Главная</a></li>
 <li class="item-162"><a href="#">Услуги</a></li>
 <li class="item-130"><a href="#">О нас</a></li>
 <li class="item-131"><a href="#">Стоимость</a></li>
 <li class="item-132"><a href="#">Отзывы</a></li>
 <li class="item-133"><a href="#">Туризм</a></li>
 <li class="item-163"><a href="#">Фотогалерея</a></li>
 <li class="item-134"><a href="#">Контакты</a></li>
</ul>
 
<style>
.mainmenu li {
    float: left;
    display: block;
    list-style: none;
    text-align: center;
    height: 40px;
}
.open_menu {display:block;width: 96%;
    box-sizing: border-box;
    background: #64b7ac;
    margin: 0 auto;
    padding: 14px 10px;
    text-align: center;
    color: #fff;
    font-size: 20px;}
.open_menu:before {content:"☰";margin-right: 10px;}    
#hidd {display:none;}
@media (min-width:480px) {
.open_menu {display:none !important}
#hidd {display:block !important}
}
</style>
 
<script>
jQuery( ".open_menu" ).click(function() {
  jQuery( this ).toggleClass( "opened" );
  jQuery("#hidd").slideToggle( "slow" );
});
</script>