Как сделать мобильное меню на сайте на css

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

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

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

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

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

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

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

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

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

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

Как сделать — Меню мобильной навигации

Узнать, как создать главное меню навигации для смартфонов/планшетов с помощью CSS и JavaScript.

Мобильная панель навигации

Вертикальное (рекомендуемый):

Создание мобильного меню навигации

Шаг 1) Добавить HTML:

Пример

<!— Загрузите библиотеку значков, чтобы отобразить меню гамбургера (бары) на маленьких экранах —>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Шаг 2) Добавить CSS:

Пример

/* Стиль меню навигации */
.topnav <
overflow: hidden;
background-color: #333;
position: relative;
>

/* Скрыть ссылки внутри меню навигации ( кроме главной/логотип) */
.topnav #myLinks <
display: none;
>

/* Ссылки меню навигации по стилю */
.topnav a <
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
>

/* Стиль меню гамбургера */
.topnav a.icon <
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
>

/* Добавить серый цвет фона при наведении курсора мыши */
.topnav a:hover <
background-color: #ddd;
color: black;
>

/* Стиль активной ссылки (или главная/логотип) */
.active <
background-color: #4CAF50;
color: white;
>

Шаг 3) Добавить JavaScript:

Пример

Совет: Чтобы создать отзывчивую панель навигации, которая работает на всех устройствах, прочитайте наш учебник Как сделать — Отзывчивая верхняя навигация.

Совет: Зайдите на наш учебник CSS Навигация чтобы узнать больше о навигационных панелях.

Как сделать мобильное меню

В этой статье мы разберём как сделать мобильное меню на HTML, CSS и JavaScript, вы увидите что это очень просто.

Логика программы:

Для начала разберём логику программы, а суть заключается в том, что при нажатие на кнопу, будем менять класс и тем самым показывать меню, по умолчанию оно скрыто.

Сначала создадим HTML файл, ну в нём всё очень просто.

Здесь мы создаём меню с помощью тега nav и в main добавили рыбный текст, что бы явно было видно что меню можно открыть везде, не зависимо от скролинга.

Также внутри nav , вы можете заметить div с классом btn-menu, это как раз и будет наша кнопка.

Теперь перейдём CSS.

Разберём этот файл, в самом его начале мы убираем все отступы у документа, что бы меню выглядело красивее, потом настраиваем отображение текста в main , но оборот добавляем внутренние отступы.

Потом переходим к настройки тега nav , там просто делаем позиционирование fixed, это нужно что бы мы всегда видели меню, дальше самое важное, это настройка ul , дле него меняем цвет и самое главное тоже делаем fixed и высоту 100vh , это нужно что бы элемент отображался во всю высоту экрана, также делаем позицию -600px или просто минус его ширина, для того чтобы элемент не виден на экране а был скрыт слева, ну и transition: 500ms , для плавного показа.

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

JavaScript:

Последние что осталось посмотреть, это код на языке JavaScript, но он не большой и очень простой.

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

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