- 18 CSS Mobile Menus
- Related Articles
- Author
- Links
- Made with
- About a code
- Hamburger
- Author
- Links
- Made with
- About a code
- Tilt to Make Room for Menu
- Author
- Links
- Made with
- About the code
- Animated Mobile Menu
- Author
- Links
- Made with
- About the code
- CSS Mobile Navigation
- Author
- Links
- Made with
- About the code
- Mobile Menu Animation
- Author
- Links
- Made with
- About the code
- Mobile Menu Concept
- Author
- Links
- Made with
- About the code
- Magical Mobile Mega Menu
- Author
- Links
- Made with
- About the code
- Animated Accessible Navigation
- Author
- Links
- Made with
- About the code
- Mobile Menu Style
- Author
- Links
- Made with
- About the code
- Menu with Scroll Effects
- Author
- Links
- Made with
- About the code
- Mobile Menu
- Author
- Links
- Made with
- About the code
- Mobile Nav
- Author
- Links
- Made with
- About the code
- Pure CSS Navigation
- Author
- Links
- Made with
- About the code
- 3 Mobile Nav Animations
- Author
- Links
- Made with
- About the code
- Mobile Menu Slider Prototype
- Author
- Links
- Made with
- About the code
- App Navigation
- Author
- Как с помощью CSS создать адаптивное выпадающее меню навигации
- Настройка
- HTML
- CSS
- Хак с чекбоксом
- HTML
- CSS
- Для больших экранов
- Как сделать мобильное меню
- Логика программы:
- HTML:
- CSS:
- JavaScript:
18 CSS Mobile Menus
Collection of hand-picked free HTML and CSS mobile menu code examples from codepen and other resources. Update of July 2019 collection. 2 new items.
Related Articles
Author
Links
Made with
About a code
Hamburger
Using clip-path to create a hamburger menu open effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Tilt to Make Room for Menu
An effect similar to the mobile Safari tab experience. Tilt background and fade to make room for a menu.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Animated Mobile Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
CSS Mobile Navigation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Animation
Works better on mobile devices. The hamburger button is comfortably available for a lefty and righty.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Concept
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Magical Mobile Mega Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Animated Accessible Navigation
Accessible, progressive-enhanced navigation menu with a circular animated background.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Style
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Menu with Scroll Effects
App Menu menu with scroll & hover effects.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Nav
CSS only mobile nav trigger and menus.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Pure CSS Navigation
Pure CSS navigation simple & easy.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
3 Mobile Nav Animations
3 Pure CSS mobile navigation animations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu Slider Prototype
Mobile menu slider prototype in HTML, CSS and JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
App Navigation
Concept for mobile app navigation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Как с помощью 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; >>
Теперь вы знаете, как создать адаптивное выпадающее меню навигации, которое отображает пункты на навигационной панели для больших экранов. Но при этом отображает иконку гамбургера для небольших экранов.
Как сделать мобильное меню
В этой статье мы разберём как сделать мобильное меню на HTML, CSS и JavaScript, вы увидите что это очень просто.
Логика программы:
Для начала разберём логику программы, а суть заключается в том, что при нажатие на кнопу, будем менять класс и тем самым показывать меню, по умолчанию оно скрыто.
HTML:
Сначала создадим HTML файл, ну в нём всё очень просто.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, itaque mollitia rerum ducimus est beatae aut, optio aliquam dolor quaerat repellat sit dolore dignissimos. Hic ratione quasi ipsam vel velit.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium molestias fuga, labore eum non quam, quidem aspernatur aliquid repudiandae quae suscipit tenetur nam id omnis soluta dolorem ad eligendi totam?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In nesciunt sunt distinctio, laudantium ad non deserunt ut, quos tenetur maiores porro. Quae ipsum obcaecati natus incidunt quam reprehenderit repellendus totam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis asperiores in dolorem nemo eveniet dolor quo veniam rem! At magni pariatur blanditiis quod dolorem, tempore fugiat fuga sequi eius.
Здесь мы создаём меню с помощью тега nav и в main добавили рыбный текст, что бы явно было видно что меню можно открыть везде, не зависимо от скролинга.
Также внутри nav , вы можете заметить div с классом btn-menu, это как раз и будет наша кнопка.
CSS:
Разберём этот файл, в самом его начале мы убираем все отступы у документа, что бы меню выглядело красивее, потом настраиваем отображение текста в main , но оборот добавляем внутренние отступы.
Потом переходим к настройки тега nav , там просто делаем позиционирование fixed, это нужно что бы мы всегда видели меню, дальше самое важное, это настройка ul , дле него меняем цвет и самое главное тоже делаем fixed и высоту 100vh , это нужно что бы элемент отображался во всю высоту экрана, также делаем позицию -600px или просто минус его ширина, для того чтобы элемент не виден на экране а был скрыт слева, ну и transition: 500ms , для плавного показа.
Дальше просто добавляем стили чтобы более красивого отображение, но последние два это классы для замены, первый, для показа меню, в нём позиция слева равна нулю, а во втором просто меняем цвет для кнопки.
JavaScript:
Последние что осталось посмотреть, это код на языке JavaScript, но он не большой и очень простой.