Css меню для телефонов

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, но он не большой и очень простой.

Источник