Как создать гамбургер меню, используя только CSS и HTML
�� Привет! Сегодня мы создадим анимированное гамбургер меню только на CSS и HTML, используя не очевидный для многих новичков способ — чекбоксы.
Начнём!
Подготовим шаблон. В качестве кнопки для открытия / закрытия меню будем использовать тег <label> с свойством for . Таким образом, при клике на лейбл, будет срабатывать чекбокс.
Выглядит это пока достаточно грустно:
Добавим немного стиля для кнопки:
Теперь стилизуем само меню. По-умолчанию оно будет скрыто — visibility: hidden , а открываться будет при установки галки на чекбокс.
Возможно, вам покажется непонятной строка .menu__btn > span , а именно комбинатор > .
Этот комбинатор находит прямых потомков элементов отобранных первым селектором.
Подробнее о нём можно прочитать здесь — https://developer.mozilla.org/ru/docs/Web/CSS/Child_selectors
Открыть / закрыть меню
Отлично, со стилизацией закончили, однако меню у нас до сих пор не работает. Самое время перейти к главной теме этого туториала — как реализовать открытие / закрытие меню только на CSS, используя чекбокс?
По порядку, начиная с самого простого:
- Свойство transform: rotate(45deg) — поворачивает элемент на 45 градусов. Поворачивая элементы кнопки меню под разным углом, мы получаем значок “крестик”, вместо горизонтальных линий.
- Псевдокласс :checked — находит только выбранные или включенные элементы. В нашем случае при активации чекбокса он становится :сhecked . Подробнее по ссылке — https://developer.mozilla.org/ru/docs/Web/CSS/:checked
- Комбинатор
Вот что у нас получается:
Добавим немного анимации
Для этого просто добавим свойство transition-duration: .25s следующим классам:
10+ Hamburger Menu Examples [CSS Only]
On today’s menu are CSS hamburgers. A responsive way to display an off-canvas menu, using only HTML and CSS.
Every website needs to be responsive if it wants to be successful. Having a mobile-supported menu is vital to appeal to all audiences and devices. This is something which we will learn about in this article with how CSS responsive hamburger menus can help.
What Is A Hamburger Menu?
A Hamburger Menu is a way to display navigation links on a website, usually for mobile devices and smaller screens. However, CSS hamburger menus can be used for desktop websites as well. Once you click the “hamburger” icon, a sliding menu will appear, displaying on top of the main content.
They are also used when you have too many buttons and links on your header navigation bar. A responsive hamburger menu allows you to shrink all this into a more scalable menu design, creating a compact menu. Ideal for sticky navbars and one page websites.
As you might have guessed, it is called a hamburger menu because the icon looks like a stacked burger ��
Different Types Of CSS Hamburger Menu Icons
We know where the hamburger menu gets its name from but not all menu icons have to be the same. There are lots of different designs and icon animations to choose from, some of which you will see in our examples.
Consider the different icons above, not all will work for every website design but as you can see, these menu icons can be quite creative. The same goes for their animations.
10 Amazing Hamburger Menu CSS Designs
Now that we understand what a CSS hamburger menu is and its main purpose, let’s go through some examples and you can use yourself and get inspiration from them.
If you are looking to create a responsive design, mobile or just to fit more content in your navigation elements, a CSS responsive hamburger menu is one of the best solutions to go with.
1 Responsive CSS Hamburger Menu — CSS only
It's quite common to have burger menus to replace standard horizontal menus on small viewports. This way, the menu becomes completely responsive and provides the best experience depending on the viewport size.
If that's what you are looking for, this example will do exactly that, and with only CSS. To test it out open the codepen in a new window and resize the result panel.
On responsive mode, the hamburger menu will open the list of items one after the other in a vertical column coming from the top. Quite a standard behavior for mobile devices.
2. Simple Centred Hamburger Menu
This one is very simple but effective, it only uses HTML and CSS to pull off a hamburger menu with some cool animations.
The hamburger icon itself, when clicked transforms into a cross and works as the close button. The menu slides into view and displays in the centre with its navigation links.
If you like sliding menu designs and cool animations with many options, you may be interested in fullPage.js — A library that allows you to build full-width, full-screen web pages that are scrollable. It is even available for WordPress with Elementor and Gutenberg plugins and a WordPress theme.
3. Left Sliding Responsive Hamburger Menu
If you are looking for a more complete example of how a CSS hamburger menu can be useful, this CodePen renders an example website to showcase the use of the CSS hamburger menu.
It only uses pure HTML and CSS, so it is easy to learn from and understand what is happening. The menu icon is animated and transforms into a cross when the menu is open.
The menu itself slides out from the slide and overlays the main website. As this design is responsive, it will automatically hide the header menu and make the burger menu available once the screen width decreases.
If you are also interested in menus and not only on the hamburger elemenet, check out these examples of great side menus for your webpage!
4. Full-screen Hamburger Menu
Considering opening the menu element in full-screen? Then you'll love this example. A CSS-only solution to display a burger menu and open it on a full-screen layer.
This kind of full-screen menus can come on handy when our menu has many items, sub-menus, or extra information.
5. Hamburger menu animations
If you are looking for different animations for your hamburger menu icon, you have to take a look at these ones.
It's using a single line of JavaScript (or jQuery) to set the state of the burger. The rest is all pure CSS.
6. Snappy Sliding Hamburger Menu
A very snappy and slick CSS hamburger menu that only uses HTML and CSS to pull this off.
The menu itself quickly slides out from the left and does not take up the whole screen, just the left side. The menu items have a nice hover effect as well. And if this effect is not fancy enough for you, you can create a better hover effect by getting inspiration from these CSS Button hover effects.
Good to work from if you are looking to add this to an existing website or you only want the basic structure.
7. Top Left Animated Hamburger Menu
Most CSS hamburger menus either slide out from the left and right or take up the whole screen. But this one is a bit different because it only uses the top left corner inside a bubble-shaped menu.
Very unique compared to the traditional hamburger menu design, this example could easily be changed to edit the colours or add an effective shadow on the background.
This one does use JavaScript but it is only very minimal: basically just to toggle the CSS classes to change the menu status, open or closed. Nothing complicated. No libraries or dependencies to rely on, just pure JavaScript that is very basic.
8. Simple Left-Sliding Hamburger Menu Overlay
The animation is smooth and doesn’t feel tacky. The menu slides out from the left and sits on top of any main content behind.
Doesn’t require any JavaScript, just works purely based on HTML and CSS, easy to work from or adapt to your liking.
The menu itself will be easy to edit and add your own content, simply write your own HTML elements inside and the menu will slide out.
The hamburger menu icon also has a smooth open and close animation that only uses CSS.
9. Animated Full Screen Hamburger Menu
Featuring a floating CSS hamburger menu icon inside a circular background, once clicked the menu uses a curricular opening animation.
The animation is very smooth and opens from the point of the menu icon itself.
Taking up the full screen, would be great for busy navigation menus that require a lot of space with images, icons, and text.
Only uses pure HTML and CSS to pull this off.
10. Full Screen Morphing Hamburger Menu
A fun animated CSS hamburger menu that morphs outwards from the top right corner of the screen into a full-screen menu.
Only using HTML and CSS, the structure is simple to follow and make edits to add your own content and navigation links/style.
11. Multi-Depth Hamburger Menu
Sliding out from the left side of the screen, this menu design is more suited for complex navigation.
It has a lovely sliding animation but the menu itself uses a very well-structured item list that can go multiple depths, useful for inner categories.
It uses HTML and CSS which are generated from SCSS.
Takeaway
We’ve seen a lot of different designs for CSS hamburger menus, some traditional, some a little different. Hopefully, you have found something you like from our examples and found inspiration to use one on your next website.
Find the perfect combination for your hamburger menu by using one of these amazing JavaScript menus.
The CSS hamburger menu has a wide range of uses: from responsive design, interactive experiences with floating menu icons, and providing you with more space with an off-canvas menu.
Overall, CSS responsive hamburger menus are a great way to make your website layout responsive and scale down to smaller screens on mobile devices. It is an easy way to make your header navigation section responsive and adaptable to different screen sizes.
Related articles
More articles which you may find interesting.
About the author:
Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK.
You can find out more about him at https://lukeembrey.com/
alt=»Ezoic» width=»» height=»» /> report this ad alt=»Ezoic» width=»» height=»» /> report this ad
Готовим бургер меню на CSS, HTML и JQuery
Приправим этот день приятным вкусом гамбургера! Как известно, верстальщики — это особый тип гурманов, который увлеченно прячет вкусняшки в разных частях сверстанной страницы, например, в меню. Вы только посмотрите, как постарался верстальщик, упаковавший такой длинный список пунктов меню в маленький трехэтажный гамбургер. Еще и добавил анимационный спецэффект: начинка из гамбургера высыпается с небольшой задержкой, так что нижний и верхний слои бургера успевают наклониться и образовать крестик!
Предлагаю закодить этот фокус в своем текстовом редакторе! И первым шагом на пути к бургеру будет техническое задание:
Техническое задание:
У нас имеются готовые html и css файлы со стандартным горизонтальным меню в шапке сайта и отличным юзабилити для просмотра страницы на широком экране. В настоящий момент меню выглядит следующим образом:
Текущий HTML-файл:
Текущий CSS-файл:
Шапочка выглядит пустовато: я не стала размещать логотип и другие элементы, чтобы не отвлекаться от работы с меню. Несмотря на это, при сужении экрана пункты меню наползают друг на друга и шапка превращается в хаос. Поэтому нужно для экранов мобильных устройств, то есть для таких гаджетов, у которых ширина менее 768px:
1. Приготовить аппетитный бургер и расположить его в верхней левой части экрана. Бургер должен выглядеть как на изображении ниже:
2. Создать скрипт, реагирующий на клик мыши по иконке бургера. При клике левой кнопки мыши, средний слой должен плавно исчезать, а верхний и нижний слои — менять углы наклона и образовывать крестик.
3. Создать CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.
4. Создать анимацию плавного выдвижения вертикального меню из левого края страницы.
В итоге должно получиться адаптивное меню, которое разворачивается в горизонтальную плашку на широких экранах и сворачивается в приятный бургер на экранах мобильных устройств.
Инструменты: HTML, CSS, JQuery
1. Рисуем бургер меню в левом верхнем углу шапки
В соотсветствии с html-структурой, для бургер-меню у нас заготовлен блок с классом «menu-burger__header»:
Над этим блоком мы и поколдуем!
Так как потребность в бургере порождена желанием адаптировать меню к мобильным устройствам, то css-стили для узких экранов шириной менее 768px мы будем записывать внутри медиазапроса: @media(max-width: 767px)
Откроем css-файл и в самом конце файла разместим медиазапрос: «@media(max-width: 767px)< >» Между скобками медиазапроса расположим стили для класса «menu-burger__header»:
В нашем бургере будет 3 слоя. Средний слой практически готов: его образует пара тегов <span></span>, размещенных в блоке <div Осталось лишь определить размеры слоя и окрасить его, дабы он стал видимым для пользователей. Верхний и нижний слои мы создадим посредством псевдоэлементов :before и :after. В моем бургере все 3 слоя будут одинаковы на вид, отличать их будет лишь занимаемая позиция. Поэтому я задам общие для этих слоев стили для прорисовки слоев, а ниже добавлю позиционирующие стили для каждого слоя отдельно:
После этого можно сохранить стили и обновить страницу — бургер создан!
Дополнительно для мобильной версии я уменьшила высоту шапки и немного сдвинула вверх контентную часть:
В результате меню приобрело следующий вид:
Хм.. Бургер выглядит хорошо, однако, сползшее вниз меню мешает получить дозу эстетического удовольствия и требует хотя бы временно скрыть горизонтальное меню с виду. Для этого я внесу дополнение в css стили для узких экранов:
Теперь я довольна результатом и предлагаю двигаться дальше:
2. Пишем скрипт анимации бургера при клике мыши.
Пришло время подключить тяжелую артиллерию, а именно: JQuery! Для этого перед закрывающим тегом </body> в html-файле я добавила строку:
А ниже подключим файл script.js, который расположим в папке «js»:
Библиотека подключена, js-файл создан, пришло время покодить в файле «menu.js»! Первым делом посредством метода click() привяжем обработчик событий click к нажатию на иконку бургера. Если нажатие произошло, то добавим к блоку с меню дополнительный класс ‘open-menu’:
Осталось лишь прописать изменения в стилях. Я предлагаю наколдовать плавное исчезновение среднего слоя бургера и одновременные повороты верхнего и нижнего слоев до образования крестика:
Анимация бургера удалась на славу! А это значит, что мы переходим к следующему пункту ТЗ:
3. Создаем CSS-стили для вертикального меню, которое будет открываться при клике по иконке бургера.
В конце 1 пункта статьи мы приняли временную меру — скрыли горизонтальное меню свойством display: none
Давайте вернем горизонтальное меню в область видимости, заменив значение «none» на «block»:
А чтобы горизонтальное меню не перекрывало бургер, превратим его в вертикальное с помощью дополнительных свойств. Добавленные на этом этапе строки подсвечены:
Зададим свойства селекторам «.header__menu» и «.header__menu li» для узких экранов:
Посмотрим, что получилось:
Вертикальное меню готово! Осталось сделать анимацию так, чтобы меню выдвигалось слева при нажатии на иконку бургера!
4. Создаем анимацию плавного выдвижения вертикального меню из левого края страницы.
Анимацию будем создавать посредством свойства transition, примененного к селектору .header__nav. Сначала мы зададим блоку с классом «header__nav» смещение влево на 100% и пропишем свойство transition со значением «all 0.4s ease» для того, чтобы изменение свойств блока с меню происходило в течение 0.4s:
Само изменение свойств блока будет происходить при наступлении события — клика по левой кнопки мыши. В CSS это событие будет проявляться добавлением класса «open-menu» в блок с меню рядом с классом «header__nav». Сразу запишем для селектора .header__nav.open-menu меняющееся свойство:
Осталось привязать добавление класса «open-menu» к щелчку по левой кнопки мыши. Для этого вернемся в созданный ранее js файл и добавим строку «$(‘.header__nav’).toggleClass(‘open-menu’):»
Меню готово и работает так, как и планировалось:
С техническим заданием мы справились! Однако, я предлагаю внести небольшие коррективы в наш код для улучшения юзабилити меню.
Зачистим шероховатости: добавим прокрутку в меню и уберем скроллинг основного текста на странице.
Для того, чтобы меню прокручивалось в случае, если оно не вмещается на экран мобильного устройства, добавим в селектор «.header__menu» свойство «overflow: auto»:
Теперь меню в случае расширения будет легко скроллиться на кротких экранах. Однако, вместе с меню будет прокручиваться и основной текст страницы, расположенный под меню. Это может привести к неожиданным эффектам. Чтобы такой ситуации не произошло, заблокируем тело страницы на весь период, пока будет открыто меню. Для этого добавим телу страницы body класс при открытом меню: $(‘body’).toggleClass(‘fixed-page’);
А в CSS-свойствах добавим блокировку страницы для блока с классом «fixed-page»:
Ура! Все отлично работает и радует глаз верстальщика. А если и остались какие-то шероховатости, то всегда можно взять в эти руки напильник и допилить основу до нужного состояния! Всем удачи, и вкусных вам бургеров!
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Достаточно популярный запрос, как сделать гамбургер меню. Я покажу вам вариант с использованием html, css и js. Это адаптивный вариант, то есть он будет работать и на мобильных устройствах.
Начнем с того, что создадим html разметку. Пропишем header и внутрь добавим нашу «иконку» гамбургера (это просто три элемента span):
А теперь добавим наше меню, которое будет появляться, когда пользователь нажмет на гамбургер:
Добавим стили для header и для кнопки:
Сейчас у нас все это выглядит вот так:
Меню выглядит не очень. Давайте это исправим, добавив стили:
Логика в следующем: сейчас мы скрыли меню за пределы экрана с помощью свойства transform и значения translateX(-100%);
Но при клике на гамбургер мы будем добавлять меню класс .active — и он будем возвращать меню в видимую область экрана с помощью transform: translateX(0);
Давайте реализуем на JS добавление класса к меню (.menu) по клику на гамбургер (.menu-btn):
Мы используем toggle — чтобы удалять класс по клику, если он есть у элемента. Таким образом при клике на гамбургер у нас появляется и исчезает меню.
Если хотите, чтобы меню появлялось справа, то у класса menu измените следующее свойство:
transform: translateX(100%);
По сути, у нас готово гамбургер меню. Но давайте еще сделаем так, чтобы при клике на гамбургер, наша «иконка» превращалась в крестик.
Для этого мы будем использовать тот же фокус с добавлением класса. Для начала добавим css:
А теперь в js коде сделаем переключатель, как мы ранее делали для меню. Только теперь сделаем для «иконки». Получится вот так:
Вот вы и поняли принцип, по которому можно сделать гамбургер меню. Вариантов реализации множество, присылайте в комментариях свои решения.
Прикрепляю видео с нашего YouTube канала, можете посмотреть это все в видеоформате: