Гамбургер меню иконка css

51 CSS Hamburger Menu Icons

Free HTML and CSS hamburger menu icons. Update of March 2019 collection. 13 new items.

Related Articles

Author

Links

Made with

About a code

Animated Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

SVG Interaction (Menu to Left Arrow)

Menu to left arrow interaction using SVG and CSS animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hamburger Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Transforming Hamburger Menu

Hamburger menu icon transition using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Moving Hamburger Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Obnoxious Burger

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hamburger

A hamburger menu, remake of dribbble by Aaron Iker, whos shot is a remake by Leonid Arestov.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hamburger Animation

Hamburger animation & triple background color using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Menu Button

Menu button and horizontal ellipsis transformation animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Minimal Animated Pure CSS Menu Icon

Minimal animated menu icon with pure CSS, can be also used with JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hamburger 3D CSS Switch Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Hamburger Menu v2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Flippin’ Juicy Burgers

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Menu Button Interaction

Hamburger menu button interaction in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Animation

Hamburger/Close icon transition.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Click Highlighter on Menu Button Using :after

Using an :after pseudo element on a menu button, we can achieve a click highlighter effect. Similar to that of Google’s Material Design.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Menu

Simple hamburger menu icon with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Menus

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Flipping Burgers

A set of hamburger menu open/close animations in SVG, HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Hamburger Menus

Hamburger menu animations, all with pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Menu Animations

Four different menu animations for menu button toggle between hamburger, cross and back icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Button Navigation

Animated button nav (single element with drawing style) by using CSS & JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Menu Icon with a Spin

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Icon with Checkboxes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Menu

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Hamburger Icons Animations

CSS hamburger icons with great hover states and animations.

Author

Links

Made with

About the code

Flipping Menu Toggle

What the flip is this? Not ideal for production but here’s a fun menu toggle experiment with CSS animations.

Author

Links

Made with

About the code

Cool Hamburger Toggle Effect

Creative hamburger toggle effect.

Author

Links

Made with

About the code

Hamburger Button

Author

Links

Made with

About the code

Hamburger Open Animation

HTML, CSS and JS hamburger open animation.

Author

Links

Made with

About the code

SVG Menu Animation

Hamburger menu animtion with svg element.

Author

Links

Made with

About the code

Hamburger Icon Animation

Simple CSS hamburger icon animation with little jQuery.

Author

Links

Made with

About the code

Menu Animation

Author

Links

Made with

About the code

Hamburger Menu Button

HTML, CSS and JavaScript hamburger menu button.

Author

Links

Made with

About the code

3D Hamburger Transformicon

3D hamburger transformation with HTML, CSS and JS.

Click Me! Hamburger Menu

Author

Links

Made with

About the code

Half Second Hamburger Helper

A showcase of hamburger menus.

Hamburger Icon Animations

12 hamburger icon animations.
Made by Rosa
November 6, 2016

Atomic Hamburger Menu CSS

HTML and CSS atomic hamburger menu.
Made by Alex Coven
October 10, 2016

Hamburger Icon Animations

Hamburger icon animations in HTML, CSS and JavaScript.
Made by Carlos
August 13, 2016

Animated Burger/Menu Icon

HTML, CSS and JavaScript animated burger/menu icon.
Made by Nicholas M. Smith
July 31, 2016

Hamburger Menu Elastic

Hamburger menu elastic with HTML, CSS and JavaScript.
Made by Davide Cantelli
July 6, 2016

20 Menu Buttons To Hamburger

Menu button to hamburger. Styled & animated with pure CSS.
Made by Yinxi Chen
June 5, 2016

Animated Menu Icon

Animated menu icon toggling between hamburger for open and X for exit.
Made by Eric Grucza
May 27, 2016

Simple Navbar Toggle To X (Vanilla JS)

A simple CSS and JS solution to make a standard Navbar «hamburger» into an X on click, and then back to a hamburger when clicked. Requires no dependencies, written with vanilla JS.
Made by Joseph Gengarella
April 3, 2016

Menu Icon Animation

Menu icon animation with HTML, CSS and JavaScript.
Made by Marius Balaj
March 23, 2016

CSS(SASS) Hamburger Menu Animation

A small hover animation on a hamburger menu icon.
Made by Derek Morash
January 11, 2016

SVG Menu Icon

Codrops SVG menu icon with popmotion.
Made by Popmotion
November 12, 2015

Expanding Hamburger Navigation Icon

Expanding hamburger menu that displays the intent of the button more clearly than a typical hamburger menu icon.
Made by Ryan Canfield
May 11, 2015

Hamburger Menu Animation

Just another hamburger menu animation.
Made by Sebastian Popp
April 2, 2015

Drawn Hamburger Transition

More fun with hamburger icon transitions.
Made by Jesse Couch
September 4, 2014

Источник

Иконка гамбургер-меню на CSS+JS

На этом уроке мы создадим на чистом CSS саму иконку гамбургера-меню и с помощью JS функции, поменяем её внешний вид, на крестик (X), символизирующий – закрывание.

HTML код

Для начала, создадим общий контейнер, на который повесим событие мыши onclick. Внутри которого, будет три блока div с разными классами. Контейнер нужен для отображения символа указателя, когда пользователь наводит указатель мыши на div блоки. Первый блок изображает верхнюю линию, второй – среднюю и третий – нижнюю. Когда пользователь кликает по этой (this) иконке, выполняется функция burgerMenu(this). Что делает эта функция, мы разберем чуть ниже.

CSS код

Иконка гамбургер-меню не является ссылкой, поэтому при наведении на неё, сам курсор не появится, добавим его.

Нарисуем темные линии, одинаковые для всех трех классов. Предвижу вопрос: «Зачем создавать отдельные классы, если линии все одинаковые?»

.b1, .b2, .b3 width: 36px;
height: 5px;
background-color: #000;
margin: 5px 0;
transition: 0.3s;
>

Ответ кроется в следующем коде. Нам надо анимировать каждую полоску в отдельности, чтобы в результате гамбургер-меню трансформировался бы в крестик (X). Верхняя и нижняя повернутся на 45 градусов, но в противоположных направлениях и переместятся на несколько пикселей.

.change .b1 transform: rotate(-45deg) translate(-9px, 6px);
>
.change .b3 transform: rotate(45deg) translate(-8px, -8px);
>

Средняя полоска просто исчезнет, став прозрачной.

Кроме того, мы добавили новый класс change, это значит, что вся эта анимация произойдет, когда запустится функция, переключающая классы.

На данном этапе, иконка гамбургера готова, но при клике по ней ничего не происходит, поскольку мы не написали ещё функцию.

JS код

При клике на контейнер с событием onclick, выполнится JavaScript функция burgerMenu(), которая добавит через метод classList.toggle новое имя класса (change) к нему, что изменит стили каждой горизонтальной полосы: верхняя и нижняя трансформируются в крестик (X). Средняя полоса исчезнет и станет невидимой.

function burgerMenu(icon) icon.classList.toggle(«change»);
>

Попробуйте в действии анимацию.

Итоги

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

Создано 25.01.2019 10:00:25

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Как создать гамбургер-меню на сайте

Узнайте, как создать гамбургер-меню на сайте с помощью HTML, CSS и JavaScript, делая навигацию удобнее для мобильных устройств.

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

Создание разметки

Для начала создадим HTML-разметку для нашего гамбургер-меню. Нам понадобится контейнер для меню и сама иконка гамбургера.

Стилизация

Теперь применим стили к нашему меню с помощью CSS. Сначала зададим стили для иконки гамбургера, а затем – для меню навигации.

body < margin: 0; font-family: Arial, sans-serif; >nav < display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 0 1rem; >.hamburger-menu < display: none; >.hamburger < width: 30px; height: 3px; background-color: white; margin: 5px; >.nav-links < list-style: none; display: flex; margin: 0; padding: 0; >.nav-links li a < color: white; text-decoration: none; padding: 1rem; >/* Медиазапрос для мобильных устройств */ @media (max-width: 768px) < .hamburger-menu < display: block; >.nav-links < display: none; >>

Добавление функциональности

И, наконец, добавим функциональность нашему гамбургер-меню с помощью JavaScript. Создадим функцию, которая будет открывать и закрывать меню при клике на иконку гамбургера.

document.querySelector(".hamburger-menu").addEventListener("click", () => < document.querySelector(".nav-links").classList.toggle("show-menu"); >);

Теперь у нас есть гамбургер-меню, которое открывается и закрывается при нажатии на иконку. 🎉

Не забудьте подключить ваш CSS и JavaScript файлы к HTML файлу.

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

Если вы хотите углубить свои знания в веб-разработке, рекомендую ознакомиться с

Источник