О web-разработке
и даже немного больше...

Мобильное меню для сайта на CSS

Для упрощения навигации по сайту на мобильных устройствах часто используют адаптированное меню. Делается это по ясной причине, не всегда десктопная версия меню может быть так же удобна и в мобильной версии сайта. Для этих целей, на сегодняшний день существует множество плагинов, которые позволяют реализовать данный функционал. Однако, использование плагинов не всегда бывает необходимым. В частности, если можно решить подобную задачу элементарным способом.
В данном посту мы рассмотрим способ реализации мобильного меню для сайта на CSS. Таким образом, для его реализации не потребуется использования JS-кода. Всё делается через вёрстку и стили.
Всё что нам необходимо сделать, это создать некую структуру элементов html, которая будет выполнять роль меню. После чего, посредством CSS будет реализована анимация кнопки открытия, а также появление самого меню.

Html-cтруктура меню:

<input type="checkbox" id="hmt" class="hidden-menu-ticker">
<label class="btn-menu" for="hmt">
    <span class="first"></span>
    <span class="second"></span>
    <span class="third"></span>
</label>
<ul class="hidden-menu">
    <li><a href="">Главная</a></li>  
    <li><a href="">О компании</a></li>
    <li><a href="">Услуги</a></li> 
    <li><a href="">Контакты</a></li>  
</ul>

Сама структура добавляется в тело страницы между тегами body и состоит из простых элементов. Первый элемент input[type=checkbox] – элемент который будет хранить состояние меню – открыто/закрыто. Визуально элемент будет скрыть через CSS.
Далее следует элемент label.btn-menu который выполняет роль самой кнопки. Вложенные элементы span участвуют в визуализации открытия/закрытия меню.
Само меню располагается непосредственно в элементе ul.hidden-menu, по сути это обычный список который содержит ссылки. Далее рассмотрим CSS-код:

Скрываем чекбокс:

.hidden-menu-ticker {
    display: none;
}

Стилизация кнопки открытия меню:

.btn-menu {
    color: #fff;
    border:1px solid #222;
    padding: 5px;
    position: fixed;
    top: 5px;
    left: 5px;
    cursor: pointer;
    transition: left .23s;
    z-index: 3;
    width: 25px;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-menu span {
    display: block;
    height: 5px;
    background-color: #222;
    margin: 5px 0 0;
    transition: all .1s linear .23s;
    position: relative;
}

.btn-menu span.first {
    margin-top: 0;
}

Стилизация пунктов меню:

.hidden-menu {
    display: block;
    position: fixed;
    list-style:none;
    padding: 50px 10px 10px;
    margin: 0;
    box-sizing: border-box;
    width: 200px;
    background-color: #fdf7f7;
    height: 100%;
    top: 0;
    left: -200px;
    transition: left .2s;
    z-index: 2;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}

.hidden-menu li {
    padding:10px 0;
}

.hidden-menu li a {
    font-size:15px;
    color:#000;
    padding:6px 0px;
}

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

Стили для работы меню:

.hidden-menu-ticker:checked ~ .btn-menu {
    left: 160px;
}
.hidden-menu-ticker:checked ~ .hidden-menu {
    left: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.first {
    -webkit-transform: rotate(45deg);
    top: 10px;
}
.hidden-menu-ticker:checked ~ .btn-menu span.second {
    opacity: 0;
}
.hidden-menu-ticker:checked ~ .btn-menu span.third {
    -webkit-transform: rotate(-45deg);
    top: -10px;
}

В конечном итоге мы получаем элементарный механизм работы. Через элемент label мы воздействуем на input[type=checkbox], активируя его либо деактивируя. В то же время используя возможности CSS3, мы проверяем состояние того самого чекбокса, если он активирован, воздействуем на классы меню и кнопки открытия. По сути происходит простая анимация вращения элементов span в самой кнопки открытия, и изменение позиционирования самого блока меню.
Пример работы меню.

Опубликован: 26.03.2020 г.

См. также:

Делаем кнопки «Поделиться в соцсетях»
Стрелочные функции в JS
Опасность использования атрибута target="_blank"
Бесконечная анимация вращения на CSS
Анимация вращения при наведении курсора
Стилизация выделения номера телефона в мобильных браузерах
Эффекты кнопок для сайта
Подсветка синтаксиса кода на вашем сайте

Комментарии

  1. Кирилл пишет:

    Доброго времени суток.
    Подскажите, пожалуйста, как его сделать многоуровневым?

  2. htmaker пишет:

    По сути можно добавить любое многоуровневое меню, вместо:

    <ul class="hidden-menu">
        <li><a href="">Главная</a></li>  
        <li><a href="">О компании</a></li>
        <li><a href="">Услуги</a></li> 
        <li><a href="">Контакты</a></li>  
    </ul>
    

    Сделать блок вида:

    <div class="hidden-menu">
    <!--тут код многоуровневого меню-->
    </div>
    

    И подправить стили.

  3. Сергей пишет:

    Неплохо... Но как его сделать закрывающимся при клике в любую область экрана, а не только по кнопке крестика....

  4. htmaker пишет:

    Нужно отслеживать клик вне элемента меню, посредством js кода и JQuery.

    jQuery(function($){
    	$(document).mouseup(function (e){ // событие клика по веб-документу
    		var menu= $(".hidden-menu"); // тут указываем ID элемента
    		if (!menu.is(e.target) // если клик был не по нашему блоку
    		    && menu.has(e.target).length === 0) { // и не по его дочерним элементам
    			$('#hmt').prop('checked', false); // снимаем флаг с чекбокса - скрываем меню
    		}
    	});
    });
    
  5. Максим пишет:

    Здравствуйте!
    У меня есть контейнер с шириной 960px. Как сделать это меню, чтобы оно отображалось внутри контейнера?
    А то значок меню внутри, но когда кликаешь на него, меню выпадает слева экрана, а не внутри контейнера.
    И еще вопрос. Как сделать это меню с выравниванием справа?

    С уважением, Максим

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Комментарии
  • Загрузка...
Друзья сайта