Html мобильная версия меню

Создание адаптивного мобильного меню на CSS без JavaScript

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

На момент написания этой статьи более 54 процентов веб-трафика во всем мире приходится на мобильные устройства. Благодаря адаптивному дизайну, ориентированному на мобильные устройства, разработчики начинают с наименьшего размера экрана, а затем постепенно увеличивают масштаб, добавляя дополнительные функции и функциональные возможности для экранов большего размера. Полученные веб-страницы будут автоматически подстраиваться под размер окна браузера пользователя.

Однако, как бы ни было важно адаптивное меню для UX веб-сайта, нет необходимости создавать его на JavaScript. В этом руководстве будет рассмотрено, как создать адаптивное меню для мобильных устройств, используя только HTML и CSS.

Адаптивное мобильное меню только с помощью CSS

Существует множество методов создания адаптивных мобильных меню. Одной из распространенных практик является использование чистого CSS без единой строки JavaScript. Этот метод включает в себя использование простой структуры списка HTML для разработки меню ссылок, которые можно стилизовать и отображать по-разному в зависимости от размера экрана устройства.

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

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

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

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

С помощью вашего любимого текстового редактора, например VS Code, создайте два файла в общей папке:

Скопируйте путь к файлу index.html и вставьте его в адресную строку браузера, для просмотра приложения. Добавьте следующий код в файл index.html:

Источник

35 CSS Mobile Menus

See the Pen Burger Menu by Talha Zahid (@talhazahid) on CodePen.

Dev: Talha Zahid

Burger Menu CSS only

Dev: Simone Pizzamiglio

My mobile menu

See the Pen Burger Menu by Talha Zahid (@talhazahid) on CodePen.

Dev: Talha Zahid

Mobile menu with pure css

Dev: Ramnek Singh

Fancy Mobile Menu

Dev: Gianmarco

Filter Menu

Dev: Arjun Amgain

Touch device jelly menu concept

Dev: LegoMushroom

Colourful Flower Popup Menu

Dev: Jasper LaChance

Mob. Menu Only CSS

Dev: Jokin.L

Pure CSS Navigation Simple & Easy

Dev: Ravi Dhiman

App Navigation

Dev: Ian Turner

Mobile Nav – only checkbox & CSS

Dev: Max Misnikov

Menu with scroll & hover effects

Dev: Ivan Bogachev

Mobile Menu Style

Dev: Raiden Kaneda

Animated Accessible Navigation

Dev: Max Böck

Mike’s Magical Mobile Mega Menu

Dev: tiffany choong

Animated Mobile Menu Step by Step Slowmotion

Dev: Geoffrey Crofte

Tilt to make room for menu

Dev: Mikael Ainalem

Pure CSS mobile nav animation

Dev: Made On Mars

Hamburger + clip-path

Dev: Mikael Ainalem

Mobile menu slider prototype

Dev: Narendra N Shetty

Mobile Menu

Dev: Ricardo Oliva Alonso

Mobile Menu

Mobile Menu Animation – CSS

Dev: Aleksandar Čugurović

Mobile Menu Concept

Dev: Kyle Lavery

Mobile menu

Dev: Kirsten Humphreys

Mobile Menu Design #3

See the Pen Mobile Menu Design #3 by Vijaya Kumar Vulchi (@vulchivijay) on CodePen.

Dev: Vijaya Kumar Vulchi

Mobile Menu – CSS

Dev: Daniel Hearn

Mobile Menu

See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.

Dev: Ricardo Oliva Alonso

Fancy tab bar active animation

Dev: Aaron Iker

Apple style mobile menu

Dev: Mathieu Lavoie

Mobile Menu Animation

Dev: Stas Melnikov

Mobile menu, CSS only

See the Pen Mobile menu, CSS only by Poppe1219 – Frontend and Backend Developer (@poppe1219) on CodePen.

Dev: Poppe1219 – Frontend and Backend Developer

Источник

Как с помощью CSS создать адаптивное выпадающее меню навигации

Из этого руководства вы узнаете, как с помощью CSS создать адаптивное выпадающее меню навигации. Для этого мы воспользуемся CSS flexbox и хаком с чек-боксами.

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

Настройка

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега .

Создайте файл styles.css и подключите его в HTML-документе:

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

HTML

Добавьте следующий HTML-код в тег

Элемент header формирует темную панель навигации, содержащую все остальное. Также у нас есть div menu-wrap, который является контейнером для логотипа, ссылок навигации и иконки меню.

CSS

В файл styles.css добавим несколько стилей для всех элементов:

Затем примените эти стили к header.

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.

Стилизуем каждый из этих дочерних элементов один за другим.

В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:

Теперь добавьте стили списка и ссылок:

nav ul < list-style-type: none; >nav ul li < padding: 0 15px; >nav ul li a < display: inline-block; padding: 12px; /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */ color: #DAE1E7; text-decoration: none; letter-spacing: 0.05em; >

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus

Теперь в браузере отображается следующее:

Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:

nav ul li a:hover, nav ul li a:focus

Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden. Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.

Хак с чекбоксом

Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!

HTML

В файле index.html добавьте элемент checkbox перед элементом nav:

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

CSS

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

Символ ~ является общим селектором следующего смежного элемента , который отделяет два селектора (#checkbox:checked и nav ul). А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.

Для больших экранов

Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.

Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.

В нем сначала спрячьте иконку меню.

Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.

Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.

@media (min-width: 768px) < nav < position: relative; top:-10px; background-color: transparent; >nav ul < max-height: 70px; padding: 15px 0; text-align: right; >nav ul li < display: inline-flex; padding-left: 20px; >>

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

Источник