113 Modern CSS menu examples
See the Pen PureCSS Menu by Jason Tyler (@jasontyler) on CodePen.
Dev: Jason Tyler
Pure CSS Menu – #13
Dev: Ivan Grozdic
Pure CSS menu
See the Pen Pure CSS menu by Antonija Šimić (@tonkec) on CodePen.
Dev: Antonija Šimić
Pure CSS Drawer Menu with overlay
Dev: Mattia Astorino
CSS Menu Concept – #codepenchallenge
Pure CSS Menu Animation
See the Pen Pure CSS Menu Animation by Charlie Marcotte (@FUGU22) on CodePen.
Dev: Charlie Marcotte
Pure CSS Menu Drawer w/ off-click #CodePenChallenge
Hamburger + clip-path
Dev: Mikael Ainalem
Stripe Like CSS Only Menu
Dev: smpnjn
App Admin Menus + Light/Dark Modes – With Tailwind CSS
Dev: Rob Stinson
Animated Sidebar Left
Dev: Sergio Andrade
See the Pen Navi Bar by Yuhomyan (@yuhomyan) on CodePen.
Dev: Yuhomyan
Gooey Dropdown Menu
Dev: Mark Eriksson
Gooey Menu – CSS Only
Dev: Matthew Sechrest
Neumorphism context menu
Dev: Bar Hatsor
Fullscreen Menu Enter
Dev: alphardex
List Item Hower Effect
Dev: Abhinav Kumar
Overlay Css menu
Dev: Thibault D
CSS Swinging Panel Menu
Dev: Seth Abbott
CSS Menu Concept (Clip-path)
Dev: Charlie Marcotte
CSS menu feat. emoji
Dev: Piotr Galor
Flower CSS Menu
See the Pen Untitled by Lars Moelleken (@voku) on CodePen.
Dev: Lars Moelleken
Dropdown Menu
Dev: Kyle Lavery
CSS Hamburger Menu
Pure CSS menu cutout effect
Dev: Zach Saucier
Yet Another Pure CSS Menu
See the Pen Yet Another Pure CSS Menu by Colin Hall-Coates (@Oka) on CodePen.
Dev: Colin Hall-Coates
Pure CSS Hamburger fold-out menu
Dev: Erik Terwan
Side Sliding Menu CSS
Dev: Eduard L
iOS style sliding menu
Dev: Jason Howmans
See the Pen menu by Arefeh hatami (@arefeh_htmi) on CodePen.
Dev: Arefeh hatami
Hamburger Menu
Dev: Yuhomyan
Three Fancy Link Hover Effects
Dev: James Hancock
Navigation Dotted Hover Effect
Dev: whisnuys
Context Menu
Vertical color-adapting CSS menu
Dev: Ines Montani
Css Menu Hover Effect
See the Pen Css Menu Hover Effect by Mehmet Burak Erman (@mburakerman) on CodePen.
Dev: Mehmet Burak Erman
Cool css menu
Dev: Fivera
CSS Menu Transition
Dev: Sarath AR
A CSS Menu Toggle using jQuery
Dev: Juwan Petty
CSS menu transitions
Pure CSS Menu
See the Pen Pure CSS Menu by Robin Brons (@bronsrobin) on CodePen.
Dev: Robin Brons
Pure CSS Menu
See the Pen Pure CSS Menu by Colin Hall-Coates (@Oka) on CodePen.
Dev: Colin Hall-Coates
CSS Menu hover effects
Dev: Sarath AR
Menubar Drop Down Style With CSS
Dev: Teja Sukmana
Pure CSS Menu Dropdown
Dev: Monkey Raptor
Slidey CSS Menu
See the Pen Slidey CSS Menu by Ian Gloude (@igloude) on CodePen.
Dev: Ian Gloude
See the Pen Menu css by @BrawadaCom (@Anna_Batura) on CodePen.
Dev: @BrawadaCom
Context menu with Feather icons
Dev: Håvard Brynjulfsen
Text fill on hover
Dev: G Rohit
Full-page navigation
Dev: Cassandra Rossall
Animated Menu
See the Pen Animated Menu by Una Kravets (@una) on CodePen.
Dev: Una Kravets
Off canvas menu
Dev: Mark Murray
Randomly generated CSS blobby nav
Pure CSS CPC full page nav
Dev: Alex Hart
CSS only fold out mobile menu
Dev: Cyd Stumpel
Menú horizontal / ítems verticales
Pure CSS Menu
Dev: Ehsan Amiri
Flexible radial CSS menu [POC]
Dev: iGadget
CSS – Menu Circular (LESS)
Dev: Dennis Calazans
Cool Pure CSS Menu!
Dev: Lucas Reis
Button Menu
See the Pen Button Menu by Alex Hripak (@alexh58) on CodePen.
Dev: Alex Hripak
Tilted CSS Menu
Dev: Felix Rilling
CSS Menu Animation
Menu Hover Fill Text
Dev: alphardex
Menu with awesome hover
See the Pen menu with awesome hover by Swarup Kumar Kuila (@uiswarup) on CodePen.
Dev: Swarup Kumar Kuila
CSS Navigation Bar
Dev: Jasmine G
Menu Hover Underline
Dev: alphardex
CSS Strange Nav
Sweet circular menu
Dev: Thomas
Flip Out CSS Menu
Dev: Cody Hadsall
SVG and CSS Menu
Dev: Ghost Rider
See the Pen CSS menu by Edison Mora (@Zerchan) on CodePen.
Dev: Edison Mora
UI Cards CSS Menu
Dev: Sergiu N.
Simple CSS menu
See the Pen Simple css menu by Surkov Dmitriy (@mast) on CodePen.
Dev: Surkov Dmitriy
Navbar Interaction
Dev: Himalaya Singh
Off Canvas Menu (CSS)
Barra de navegación con css – Menú bar
Dev: Dave Mendoza
Vertical Dark Menu with CSS
Dev: Alberto Leon
Moving Underline Nav Menu
Dev: Bennett Feely
Futuristic 3D Hover Effect
Dev: Jouan Marcel
See the Pen 3D Navbar by Chenius (@chenius) on CodePen.
Dev: Chenius
Just Another Menu(Pure CSS)
Dev: Akhil Sai Ram
Simple radial menu
See the Pen Simple radial menu by Nikolay Talanov (@suez) on CodePen.
Dev: Nikolay Talanov
Filter Menu
See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.
Dev: Arjun Amgain
Fullscreen Menu Flexbox Method
Dev: Marcus Hall
Mobile navigation animation
Dev: Karlo Videk
Animated Tab Bar
See the Pen Animated Tab Bar by abxlfazl khxrshidi (@abxlfazl) on CodePen.
Dev: abxlfazl khxrshidi
Colourful Flower Popup Menu
Dev: Jasper LaChance
Multi level css only push menu
Pure CSS3 Mega Dropdown Menu With Animation (Vertical)
Dev: Rizky Kurniawan Ritonga
Overlay menu
See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.
Dev: Ivan Grozdic
Floatting Draggable Menu (Messenger like)
Dev: Andy Pagès
Animated Tab Bar
See the Pen Animated Tab Bar v.2 by abxlfazl khxrshidi (@abxlfazl) on CodePen.
Dev: abxlfazl khxrshidi
Drop-down menu
See the Pen Drop-down menu by Ivan Grozdic (@ig_design) on CodePen.
Dev: Ivan Grozdic
Social App Menu
Dev: Matt Hoiland
Full screen burger menu
Dev: Paul Sullivan
PURE CSS SIDEBAR TOGGLE MENU
Dev: Jelena Jovanovic
Pure CSS Header Menu
See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.
Dev: Nikolay Talanov
Pure CSS Circle Menu
Dev: Hadar Weiss
Burger Menu inspired by Material Design
Dev: Victor Freire
Another menu concept
See the Pen Another menu concept by Rune Sejer Hoffmann (@RSH87) on CodePen.
Dev: Rune Sejer Hoffmann
Perspective Split Text Menu Hover
Dev: James Bosworth
Pure CSS Hamburger Menu & Overlay
Dev: Brad Traversy
Expanding Burger/Menu Icon
Dev: Joe Harry
Menu Hover Line Effect
Dev: Mehmet Burak Erman
Dropdown menu
Dev: Leena Lavanya
CSS Grid Menu Panels
Dev: Ryan Mulligan
SVG UI Navigation Concept
Dev: Alex Permyakov
Latest Post
55 Cool CSS Calendars
19 Barcodes in CSS
25 CSS Masonry Layout Examples
23 CSS Card Layouts
27 CSS Subscribe Forms
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok
Большой обзор красивых многоуровневых меню с codepen
На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.
Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).
Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.
В этом обзоре мы рассмотрим многоуровневые меню.
Flat Horizontal Navigation
Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Responsive Mega Menu — Navigation
Горизонтальное адаптивное меню. Выглядит неплохо, но мобильная версия немного «хромает». Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
Оригинальное меню. С простым и чистым кодом без js. Применяйте для «вау» эффектов.
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu — Menu Interaction Concept
Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown [work for mobile touch screen]
Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
KVdKQJ (автор очень долго думал над названием)
Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (особенное решение)!
Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.