Топ-100 Accordion Menu
Создать акаунт
NULLTOP » Готовые скрипты » CSS » 15 гениальных бургер меню на CSS (+ анимация)

15 гениальных бургер меню на CSS (+ анимация)

23 янв 2024, 18:42
CSS
14
0
15 гениальных бургер меню на CSS (+ анимация)

 

В мобильной навигации, то есть на планшете или смартфоне, меню навигации очень часто скрыто по причине нехватки места и отображается только при нажатии на меню для гамбургеров. Здесь безграничный простор для дизайнерских возможностей. Некоторые запрограммированы на чистом CSS без jаvascript, а некоторые на CSS и jаvascript – найдется что-то для каждого.

Меню, состоящее в основном из 2-3 слоев, зарекомендовало себя – точно так же, как гамбургер (булочка, пирожок, бублик), который раскрывает все пункты меню в виде наложения одним щелчком мыши. Отдельные штрихи можно поворачивать в виде буквы X, исчезать или дико вращаться. Бесконечные возможности! Я собрал для вас лучшие из них здесь – позвольте себе вдохновиться.


1 ЛИПКОЕ МЕНЮ
Автор: Лука Беббер
Закодировано в: HTML, CSS (SCSS)


2 SVG CSS3 МЕНЮ / КНОПКА ДЛЯ ГАМБУРГЕРА
Автор: Кайл Хенвуд
Закодировано на: HTML, CSS (SCSS), JS


3 АНИМАЦИЯ МОБИЛЬНОГО МЕНЮ

Автор: Стас Мельников
Закодировано на: HTML, CSS, JS


4 ЭФФЕКТ НАКЛОНА СТРАНИЦЫ
Автор: Марко Фугаро
Закодировано на: HTML, CSS (SCSS), JS (jQuery)


5 ЭЛАСТИЧНОЕ МЕНЮ
Автор: Длинный
Закодировано на: HTML, CSS (SCSS), JS


6 АНИМАЦИИ ЗНАЧКОВ ДЛЯ ГАМБУРГЕРОВ

Автор: Ахмад Эмран
Закодировано на: HTML, CSS, JS


7 КОНЦЕПЦИЯ SVG-ЛИПКОГО МЕНЮ ПРИ НАВЕДЕНИИ КУРСОРА МЫШИ
Автор: Майкл Леонард
Закодировано на: HTML, CSS, JS (jQuery)


8 АНИМАЦИИ ЗНАЧКОВ ГАМБУРГЕРОВ
Автор: Роза
Закодировано на: HTML, CSS, JS (jQuery)


9 АНИМАЦИЯ МЕНЮ ДЛЯ ГАМБУРГЕРОВ С VELOCITY.JS
Автор: Филиппо
Закодировано на: HTML, CSS (меньше), JS (jQuery + velocity.js)


10 ATOMIC HAMBURGER MENU CSS
Автор: Алекс Ковен
Закодировано в: HTML, CSS


11 КОНЦЕПЦИЯ CSS-МЕНЮ

Автор: GEOX
Закодировано в: HTML, CSS (SCSS)


12 PURE CSS MENU
Автор: Иван Гроздич
Закодировано в: HTML, CSS


13 КОНЦЕПЦИЯ МЕНЮ КНОПОК

Автор: James Truhlar
Закодировано в: HTML, CSS, JS (jQuery)
14 СТАНДАРТНАЯ ПАНЕЛЬ НАВИГАЦИИ
Джастин Автор:;
Закодировано на: HTML, CSS (SCSS), JS (jQuery);


15 СТАНДАРТНОЕ МЕНЮ 2
 Автор: Сельчук Кура
Закодировано в: HTML, CSS (SCSS), JS (classList.js, underscore.js, TweenMax.js, ScrambleTextPlugin.js, smooth-scroll.js)

Все материалы, представленные на сайте, носят исключительно ознакомительный характер!

Если ссылка битая, пожалуйста сообщите нам через форму комментариев или в ЛС

Комментарии
Минимальная длина комментария - 50 знаков. комментарии модерируются
Кликните на изображение чтобы обновить код, если он неразборчив

Смотрите также: