Как создать Burger Menu для сайта. Мобильное меню на чистом CSS.
Всем привет в данной записи я вам покажу как создать Burger Menu на чистом CSS. Вы научитесь реализовывать мобильное, адаптивное меню. Бургер меню это блок с кнопкой, после нажатия на которую открывается список ссылок из меню.
HTML
CSS
.mobile-menu < position: fixed; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; top: 0; background-color: #27ae60; left: 0; right: 0; height: 50px; z-index: 9999999; >.mobile-menu__btn < position: relative; display: flex; align-items: center; justify-content: center; width: 35px; height: 30px; cursor: pointer; transition: .4s; >.mobile-menu__icon < display: block; position: relative; background: white; width: 90%; height: 4px; transition: .4s; >.mobile-menu__icon::after, .mobile-menu__icon::before < content: ""; display: block; position: absolute; background: white; width: 100%; height: 4px; transition: .4s; >.mobile-menu__icon::after < top: 8px; >.mobile-menu__icon::before < top: -8px; >.mobile-menu__container < position: fixed; text-align: center; display: flex; align-items: center; justify-content: center; top: 50px; left: 0; right: 0; z-index: 999; height: 0; opacity: 1; transition: .5s; overflow: hidden; background-color: #27ae60; >.mobile-menu__list < transition: .5s; list-style: none; padding-left: 0; margin-top: -50px; >.mobile-menu__item < font-size: 26px; padding-bottom: 15px; >.mobile-menu__link < text-decoration: none; color: #fff; >.mobile-menu__checkbox < display: none; >.mobile-menu__checkbox:checked ~ .mobile-menu__nav < opacity: 1; >.mobile-menu__checkbox:checked ~ .mobile-menu__container < height: 100%; >.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon < background: transparent; >.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after < top: 0; >.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after < transform: rotate(-45deg); -webkit-transform: rotate(-45deg); >.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before
На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime
Наши планы
- Написание материала для курса по разработке ботов на Telegram
- Разработка универсального парсера на PHP
Поддержите мой сайт!
Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube
Выезжающее меню на чистом CSS
Выезжающее меню при клике по кнопке без использования скриптов, то есть на чистом html + CSS. Статья будет полезна тем, кто хочет создать свой сайт и изучает верстку. Пример того как это работает можно посмотреть кликнув по ссылке ниже. Или как это было реализовано на одном из созданных мною сайтов в видео ниже.
Если это то что вам нужно и вы хотите сделать выезжающее меню с левой или правой стороны без использования скриптов у себя на сайте, то начнем.
>>> Посмотреть пример выезжающее меню
Вначале добавляем html разметку. Это обычное меню сделанное списком, но его особенность это checkbox. Обычный чекбокс с label, которые мы и превратим в кнопку, то есть бургер меню. Бургер меню — это обычно три полоски расположены друг под другом, напоминая бургер. Поэтому меню и носит такое название. Для посетителей сайтов и пользователей мобильных устройств данный вид кнопки привычный и люди интуитивно понимают что это кнопка меню. Как раз нажимая на наш чекбокс в виде бургера и будет происходить появление панели с пунктами меню.
На вашем сайте в то место где вы хотите разместить бургер кнопку выезжающего меню добавьте следующий html код:
Давайте разберемся что и как тут устроено и для чего каждый элемент
- Сначала идет главный блок-контейнер с классом burger-menu, внутри которого и располагается наше меню и кнопка бургер. Можете задавать любой класс или вообще изъять все меню и кнопку из контейнера. Он не обязателен. Он сделан для удобства. Возможно вам он будет мешать. Например, вы решите разместить меню в виде UL списка в одном месте, а кнопку-чекбокс бургер меню в другом.
- Далее идет чекбокс с ID — menu-toggle, которое менять нельзя (можно, если вы понимаете что делает и аналогично смените в стилях CSS все подвязки к этому айди). Чекбокс будет скрываться но он и будет кнопкой, его мы модифицируем.
- Далее идет label с классом —menu-btn, менять тоже не нужно, если для вас это не критично. Внутри label расположен span элемент, который в будущем будет полосками бургер меню. Сделаем это благодаря псевдоэлементам before и after.
- После идет наше основное меню в виде ul списка с классом — menubox. Наш чекбокс, будет использовать данный класс, чтобы открыть панель. Тут как вам удобно, располагаете пункты вашего меню со ссылками. Классы, порядок, структуру — делаете как вам нравится, у меня просто сделано для примера пять простых пунктов в виде ссылок.
Как вы поняли, суть способа в том, что у нас есть скрытое выезжающее меню за пределами страницы и обычный чекбокс, стилизованный под бургер меню. Когда мы нажимаем на чекбокс, мы задаем новые параметры для нашей скрытой панели/блока который появляется сбоку. В примере он выезжает слева, можете поменять и сделать справа.
Далее добавим CSS стили, потом вы сможете их поменять под дизайн вашего сайта. Открывайте свой файл стилей и добавьте в него следующий код:
.menu-btn < display: flex; align-items: center; position: absolute; top: 0; right:0; width: 26px; height: 26px; cursor: pointer; z-index: 1; >.menu-btn > span, .menu-btn > span::before, .menu-btn > span::after < display: block; position: absolute; width: 100%; height: 2px; background-color: #616161; transition-duration: .25s; >.menu-btn > span::before < content: ''; top: -8px; >.menu-btn > span::after < content: ''; top: 8px; >.menubox < display: block; position: fixed; visibility: hidden; top: 0; left: -100%; width: 300px; height: 100%; margin: 0; padding: 80px 0; list-style: none; background-color: #ECEFF1; box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); transition-duration: .25s; >.menu-item < display: block; padding: 12px 24px; color: #333; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 600; text-decoration: none; transition-duration: .25s; >.menu-item:hover < background-color: #CFD8DC; >#menu-toggle < opacity: 0; >#menu-toggle:checked ~ .menu-btn > span < transform: rotate(45deg); >#menu-toggle:checked ~ .menu-btn > span::before < top: 0; transform: rotate(0); >#menu-toggle:checked ~ .menu-btn > span::after < top: 0; transform: rotate(90deg); >#menu-toggle:checked ~ .menubox
Задаем стили нашему label и span внутри него, чтобы он стал кнопкой в виде бургера.
.menu-btn < . >. > .menu-btn > span::before < . >.menu-btn > span::after
Далее задаем стили для ul списку.
.menubox
left: -100%; — в шестой строке это и есть расположение панели меню слева за пределами страницы. Если надо справа, смените на right: -100%;.
Далее стили для пунктов меню. Тут можете задавать что хотите, свои, эти стили не обязательны
.menu-item < . >.menu-item:hover
Скрываем стандартный чекбокс в виде галочки
#menu-toggle
Задаем правила, что делать с нашим бургер меню, и самим выезжающим меню, когда происходит активирование чекбокса, то есть когда вы жмете по нему и по label. Одну полоску мы поворачиваем, а две нижние поднимаем вверх и тоже поворачиваем и в результате из трех полосок получаем крестик. Так же делаем видимым наш скрытый блок с пунктами выезжающего меню.
#menu-toggle:checked ~ .menu-btn > span < . >#menu-toggle:checked ~ .menu-btn > span::before < . >#menu-toggle:checked ~ .menu-btn > span::after < . >#menu-toggle:checked ~ .menubox
В предпоследнем рядке, мы указываем, что панель появится слева в самом начале страницы — left: 0;. Если хотите справа, то просто смените на right: 0;.
Как выезжающее меню было реализовано на одном из созданных мною сайтов смотрите в этом коротком ролике.
Если вы все сделали правильно, то все должно работать так как в примере. Надеюсь, что статья вам полезна и вы установите выезжающее меню на своем сайте. Если у вас возникли вопросы или проблемы, можете обратиться ко мне или заказать услугу по доработке сайта.
Меню с иконкой гамбургер на чистом css
Очень часто требуется при верстке добавлять к разделам «Гамбургер». Чтобы сделать его чистом CSS много кода не потребуется.
Для создания такого меню воспользуемся псевдоэлементами :after :before
Кнопка
.gamb:before
content: ''; box-shadow: 0 6px #93cce6,0 12px #93cce6; position: absolute; width: 50%; height: 3px; background: #93cce6; top: 30%; left: 25%; border-radius: 10px; transition: all .4s linear;
>
Вид кнопки вот такой:
Чтобы при наведении гамбургер превратился в крестик — пропишем стиль
.gamb:hover:before
content: '';
position: absolute;
width: 50%;
height: 3px;
background: #93cce6;
top: 44%;
left: 25%;
border-radius: 10px;
transform: rotate(45deg);
>
.gamb:hover:after
content: '';
position: absolute;
width: 50%;
height: 3px;
background: #93cce6;
top: 44%;
left: 25%;
border-radius: 10px;
transform: rotate(-45deg);
box-shadow: none;
>
При наведении кнопка будет вида:
Цвет и стиль кнопки можно менять как Вам угодно
Как сделать бургер меню для сайта css
В статье мы рассмотрели 10 видов меню, по каждому написали инструкцию по настройке и дали рекомендации в каких случаях уместно его использование.
Материал посвящен дизайну меню — то, как меню работает и как оно выглядит. Если вам нужно разобраться как вообще создать меню сайта, добавить меню сразу на все страницы или сделать навигацию внутри страницы, пожалуйста прочитайте статью:
Как сделать меню сайта
Меню — набор ссылок на другие страницы сайта, либо на конкретные разделы одной страницы. Каждая ссылка — пункт меню. Меню необходимо для навигации: перехода между страницами или между разделами одной страницы.
Общие рекомендации
Меню должно помогать посетителю быстро найти необходимую информацию.
Меню должно быть лаконичным.
Пунктов меню не должно быть слишком много.
Оптимальное количество пунктов меню — 5 или меньше.
Названия пунктов меню лучше делать из одного слова.
Хорошо, если слова будут не слишком длинные.
Меню не должно быть тяжеловесным и отнимать внимание от контента.
Примеры хороших меню
Описание картинки
Прозрачное статичное меню поверх обложки
Как себя ведет:
Всегда находится вверху страницы, не отвлекает от содержания, при необходимости пользователь может легко к нему обратиться, так как оно расположено в привычном месте.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Посмотреть страницу с меню в браузере
Фиксированное меню
Как себя ведет:
Меню, которое всегда находится в поле зрения пользователя и он может обратиться к нему на любом месте на странице. У такого меню чаще всего прозрачный фон в начале страницы (на обложке), который меняется на непрозрачный во время скрола.
Добавить на страницу блок ME301 и задать в настройках блока следующие параметры:
Основные настройки → Поведение позиционирования → Фиксация при скролле
Фон меню → Цвет фона меню — на выбор
Фон меню → Непрозрачность фона меню — 0%
Фон меню → Непрозрачность фона меню после начала скролла — 80%
Посмотреть страницу с меню в браузере
Два разных меню: одно вверху страницы, другое появляется при скролле
Как себя ведет:
Вариант, похожий на предыдущий, только при скролле появляется меню с другим содержимым. Например, в начале страницы меню содержит логотип, пункты (ссылки на разделы сайта) и ссылки на социальные сети. А когда пользователь начинает пролистывать страницу, появляется и остается в поле зрения меню с логотипом, призывом к действию и кнопкой обратного звонка.
Добавить на страницу два блока ME301. И задать им следующие параметры:
Первое меню (остается на обложке)
Основные настройки > Поведение позиционирования — С наложением на следующий блок, но без фиксирования
Фон меню > Непрозрачность фона меню — 0%
Второе меню (появляется при скролле)
Основные настройки > Поведение позиционирования — Фиксация при скролле
Основные настройки > Появление меню при прокрутке через N пикселей — 600px
Фон меню > Цвет фона меню — на выбор
Фон меню > Непрозрачность фона меню — 70%
Первое меню
Первое меню
Второе меню
Второе меню
Посмотреть страницу с меню в браузере
Меню «гамбургер»
Как себя ведет:
Меню в виде трех полосок в углу экрана, при клике на которое раскрывается полная версия.
Для чего используется:
В случаях, когда необходимо, чтобы отвлекающие элементы были сведены к минимуму и внимание пользователя было обращено только к контенту. Довольно часто меню «гамбургер» используется в мобильных версиях сайта. Например, можно добавить обычное меню и назначить ему видимость «только для компьютера», затем добавить меню «гамбургер» и назначить ему видимость «только для мобильных».
Как настроить видимость блока только для мобильных устройств
Добавить на страницу блок ME401/402/403/404/405, настроить поведение позиционирования, цвет иконки меню и цвет фона самого меню и цвет фона для пунктов меню. В нашем примере параметры будут следующими:
Основные настройки → Поведение позиционирования — Фиксация при скролле
Иконка меню → Цвет — черный
Фон меню → Цвет фона закрытого меню — прозрачный
Фон меню→ Цвет фона открытого меню — белый
Посмотреть страницу с меню в браузере
Многоуровневое меню
Как себя ведет:
При клике на пункт меню появляется выпадающий список вложенных пунктов.
Для чего используется:
В объемных сайтах со сложной структурой.
Добавить пункты подменю у основного блока или использовать сочетание меню ME301(или любого другого с пунктами меню) и ME601.
Пункты подменю основного блока
Добавить на страницу любой блок меню, который содержит пункты меню.
Перейти в Контент блока → Список пунктов меню → нажать «Добавить пункты второго уровня» — напротив пунктов меню появятся иконки в виде символа плюс.
Нажать на иконку плюса напротив пункта к которому нужно добавить пункт второго уровня. Заполнить появившиеся поля названия пункта и его ссылку.
Чтобы добавить новый пункт подменю, нажмите на иконку плюса ещё раз.
Подпункты меню будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Блок ME601
Добавить на страницу блок ME301, настроить меню, как в примерах выше и добавить блок ME601 (Меню: второй уровень).
Блок ME601 позволяет добавить подразделы к пунктам основного меню. Они будут показываться при наведении в формате выпадающего меню. В мобильных версиях меню будет открываться по тапу.
Как это работает :
1) В блоке ME601: пропишите ссылку вида #submenu:more
2) В основном меню: в поле ссылка, напротив пункта, к которому вы хотите сделать подразделы, укажите #submenu:more.
Важно : сам пункт основного меню кликабельным не будет. Если нужно чтобы на нем была ссылка, продублируете этот пункт в выпадающем меню.
Примечание : «#submenu:more» может быть любым словом, например: #submenu:portfolio или #submenu:aboutus