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
CSS меню
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar < margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; >#navbar a < color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; >#navbar a:hover
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
#navbar ul < display: none; >#navbar li:hover ul
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar li < float: left; >#navbar ul li
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul < display: none; background-color: #f90; position: absolute; top: 100%; >#navbar li:hover ul < display: block; >#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar < height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; >#navbar li < float: left; position: relative; height: 100%; >#navbar li a < display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; >#navbar ul li < float: none; >#navbar li:hover < background-color: #f90; >#navbar ul li:hover
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru