Возможно, вы слышали о ресурсе Codepen, на котором можно создавать файлы примеров для использования их в проектах. В данной статье мы рассмотрим примеры различных меню, авторы которых разместили свой код на codepen.io.
Простые меню вы можете разобрать с помощью статьи "Виды горизонтальных меню для сайта". Здесь же будут рассмотрены примеры различных меню, появляющихся по клику на кнопке. В этих меню, помимо css-форматирования, используется код на JavaScript/jQuery.
Flexbox-меню с перекрытием экрана
Верстка меню основана на модели Flexbox. При появлении элементов меню происходит перекрытие экрана. Используются трансформации и анимация с помощью свойства transition. Также используется код на jQuery.
See the Pen Fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.
Полноэкранное меню
See the Pen Full Page Intro & Navigation by Elen (@ambassador) on CodePen.
И еще один вариант
See the Pen Full-Page Nav Stacking Animation by Jon Kantner (@jkantner) on CodePen.
Вертикальное меню
See the Pen Exploring Arrow Animation CSS Hover Effect by Envato Tuts+ (@tutsplus) on CodePen.
Меню с интересной анимацией разрезанных букв
See the Pen Perspective Split Text Menu Hover by James Bosworth (@bosworthco) on CodePen.
Вертикальное меню с параллакс-эффектом
See the Pen Parallax Menu Effect by Hyperplexed (@Hyperplexed) on CodePen.
Меню со слайд-эффектом
При клике на элементах этого меню используется плавный переход подчеркивания для активной ссылки. Здесь есть не только css-форматирование, но и код на jQuery.
В примере используются html-, css- и js-препроцессоры. Если код вам непонятен, нажмите на стрелку в правом верхнем углу соответствующей вкладки и выберите пункт "View compiled HTML" и т.п. при редактировании этого примера на Codepen.
See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.
Цветное навигационное меню на основе CSS и jQuery
В этом css-меню используется эффект изменения цвета активной точки при наведении на один из пунктов. Как и в предыдущих меню, без jQuery здесь не обошлось.
See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.
Еще один вариант:
See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.
Скошенное меню
В этом меню внешний вид обеспечивается с помощью CSS3-свойства transform: skew(). Очень интересный вид, полученный путем трансформации списка ссылок.
See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.
CSS меню с эффектами при прокручивании и наведении
В этом меню использованы эффекты при прокручивании (скроллинге), связанные с 3d-трансформациями и увеличении масштаба при наведении. Также не обошлось без JavaScript.
Интересное меню с различными цветами и иконками для пунктов меню. Оно предполагает разворачивание на весь экран.
See the Pen Menu with scroll & hover effects by Ivan Bogachev (@sfi0zy) on CodePen.
Боковое выезжающее меню с эффектом размытости стекла
Разметка с использованием CSS и нативного JS-кода
See the Pen Frosted Glass Menu | [best in chrome] by Dev Loop (@dev_loop) on CodePen.
Анимационное меню с SVG (UI Navigation Concept)
Меню, предназначенное опять-таки либо для мобильной версии сайта, либо для мобильного приложения. В нем используются анимации SVG и CSS3 без подключения сторонних библиотек + код на JavaScript.
See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.
Меню в мобильном
See the Pen Hamburger + clip-path by Mikael Ainalem (@ainalem) on CodePen.
Меню с 3d эффектом при повороте гитары. Нужно потянуть вправо, чтоб увидеть меню.
See the Pen 3D Drag out menu with guitar by Jamie Coulter (@jcoulterdesign) on CodePen.
Желеобразное меню для мобильных устройств
Очень интересное меню с приятной анимацией при скроллинге и прикосновении на мобильных устройствах. Требует подключения множества библиотек.
See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.
Иконочное меню для мобильных
See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.
Еще один вариант:
See the Pen Menu jQuery by Christophe Kirsch (@chriskirsch) on CodePen.
И еще:
See the Pen Navigation by Vadim Bauer (@v_Bauer) on CodePen.
3d-карусель в виде меню, или меню в виде 3d карусели
See the Pen Orbital Menu by Jon Kantner (@jkantner) on CodePen.
Меню с иконками для мобильных
See the Pen Fancy tab bar active animation by Aymen Mohammed (@aymen-mohammed) on CodePen.
И еще один вариант:
See the Pen TabBar - Pure CSS - #CodePenChallenge: Navigation Bars by Jordan (@DeyJordan) on CodePen.
Вращающееся меню с иконками
See the Pen Infographic Pie (SVG based) by Shalabh Vyas (@shalabhvyas) on CodePen.
CSS меню с кнопкой по центру header
See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.
Социальное меню с выезжающими иконками
See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.
Верхнее выезжающее css-меню c иконкой-гамбургером
Приятное боковое выезжающее меню с CSS-анимацией появления самого меню и изменения иконки-гамбургера. Подойдет как для основной версии сайта, так и для мобильной версии. Помимо CSS, используется минимальный код на JS.
See the Pen Toggle menu by Tristan White (@triss90) on CodePen.
Еще один вариант с небольшими 3D-трансформациями.
See the Pen 3D Rotating Navigation by Elen (@ambassador) on CodePen.
Верхнее меню без гамбургера
See the Pen Card-Like Menu by Jon Kantner (@jkantner) on CodePen.
3D-эффект для меню, появляющегося сверху
See the Pen Swinging Door Menu by James Steinbach (@jdsteinbach) on CodePen.
Нижнее меню
See the Pen Mobile Menu Animation by Stas Melnikov (@melnik909) on CodePen.
Еще один вариант:
See the Pen How to Build a Pure CSS Animated Tab Menu by Envato Tuts+ (@tutsplus) on CodePen.
Нижнее меню в телефоне с отображением предложений блюд
See the Pen Tilt to make room for menu by Mikael Ainalem (@ainalem) on CodePen.
Боковая панель с меню
Меню расположено на боковой выезжающей панели справа. При появлении меню основной контент сдвигается влево. Использован код на JS.
See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.
Еще один пример для панели администратора
See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.
Меню слева
See the Pen Daily Ui #05 - Mobile Navigation by LeFourbeFromage (@lefourbefromage) on CodePen.
"Вытягиваемое" слева меню
See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.
Несколько разных эффектов появления панели с меню слева
See the Pen Sidebar Transitions by kyunwang (@kyunwang) on CodePen.
Панель справа
See the Pen OffCanvas 메뉴 / Toggle 패널 UI (실습 완료) by 야무 (@yamoo9) on CodePen.
Гамбургеры для меню - варианты отображения и изменения
Анимированные стрелки из гамбургера
See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.
SVG-Анимация при наведении на иконку гамбургера в боковой панели
See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.
Еще варианты анимации иконки-гамбургера.
See the Pen CSS Menu Icon Animation: Know Your Menu by Olivia Ng (@oliviale) on CodePen.
Меню вверх
See the Pen Menu Button Interaction by Aybüke Ceylan Öncül (@aybukeceylan) on CodePen.
Разные варианты преобразования гамбургера по клику.
See the Pen Hamburger Icons Animations by Ahmad Emran (@ahmadbassamemran) on CodePen.
Еще набор вариантов для гамбургеров:
See the Pen CSS Menu Icons #2 by Naoya (@nxworld) on CodePen.
Реальный гамбургер в виде ... гамбургера
See the Pen 3D-ish Hamburger Menu by Jon Kantner (@jkantner) on CodePen.
Интересное боковое меню для лэндинга или одноэкранной презентации
See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.
Неоновая анимация при наведении на горизонтальное и вертикальное меню
See the Pen Menu Or Nav Hover Styles by Dev Loop (@dev_loop) on CodePen.
Выезжающее сбоку меню
В коде используется не только css, но и JS-код
See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen.
Второй вариант выезжающего сбоку меню основан только на CSS:
See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.
Выпадающее меню слева
See the Pen Drop-down menu by Ivan Grozdic (@ig_design) on CodePen.
Выпадающее меню по центру
See the Pen Dropdown dark/light - pure css - #14 by Ivan Grozdic (@ig_design) on CodePen.
Боковое css-меню с анимацией
See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.
Выезжающее сверху CSS меню
При нажатии на кнопку-гамбургер сверху с анимацией появляется меню. Контент смещается вниз с отступами слева и справа. Помимо css-transition использован несложный код на jQuery.
See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.
Разворачивающееся меню
See the Pen Makisu by Justin Windle (@soulwire) on CodePen.
Навигационное меню в стиле Material Design
Приятное меню, которое появляется со слайд-эффектом с помощью css-transition и небольшого jQuery-кода.
See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.
Еще один вариант в стиле Material Design с круглыми кнопками
See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.
Вторая версия меню с круглыми кнопками.
See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.
Раскрывающееся вниз (Dropdown) меню
В примере использованы CSS и JS-код.
See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.
Еще один вариант dropdown-меню
See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.
Еще больше вариантов выпадающих (dropdown) меню вы найдете в отдельной статье.
Вариант с интересной анимацией при наведении
See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.
Трансформация скоса в выпадающем меню при наведении курсора мыши
See the Pen CSS Swinging Panel Menu by Seth Abbott (@sethabbott) on CodePen.
Выпадающее (Dropdown) меню на CSS
See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.
Выпадающее по клику меню в стиле Bootstrap
See the Pen OnClick Dropdown by Sazzad (@sazzad) on CodePen.
Выезжающее меню слева в стиле Bootstrap 3
See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.
Выезжающее меню с CSS-анимацией
Только CSS, без JS-кода
See the Pen CSS Drop-Down Menu Transitions by Shaw (@shshaw) on CodePen.
Выезжающее сверху меню с анимацией
Есть переключатель для темной/светлой темы и анимация в виде круга, перемещающегося за курсором мыши. CSS+JS-код.
See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.
Отзывчивое мега-меню с использованием jQuery
See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.
Мега-меню преимущественно на HTML/CSS
See the Pen Responsive Mega Menu and Dropdown Menu (CSS only) by Elen (@ambassador) on CodePen.
Простое выпадающее меню на основе jQuery
See the Pen Responsive Menu by Kevin D (@wrecklaimer) on CodePen.
CSS-меню с несколькими уровнями вложенности
See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.
И второй вариант:
See the Pen Responsive Dropdown Menu Bar by Elen (@ambassador) on CodePen.
Отзывчивое меню с несколькими уровнями вложенности
Использует не только CSS, но и jQuery.
See the Pen CSS3 Responsive Menu Dropdown + Submenu width Logo by emre (@emredenx) on CodePen.
CSS-меню с вкладками
Стоит, наверное, отключить видимость radio-переключателей в конечной версии меню.
See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.
Различные варианты оформления меню вы можете найти также на freefrontend.com, onaircode.com и navnav.co.
Super ClAAAS!