Dropdown menu css как сделать

Выпадающее меню

Плюсом использования псевдокласса :checked является то, что мы можем щёлкать по разным элементам и отслеживать их состояние — включено или нет. Этот механизм пригодится для создания выпадающего меню, которое можно привязать к определённому тексту. При щелчке по тексту появляется меню, ещё один щелчок это меню скрывает. На рис. 1 продемонстрировано, как это меню выглядит.

Рис. 1. Выпадающее меню

Алгоритм создания такого меню не отличается от создания вкладок. Добавляем и , затем связываем их друг с другом через атрибуты id и for .

Текст

input, ul < display: none; /* Прячем */ >

:checked ~ ul < display: inline-block; /* Показываем меню */ >

Чтобы пользователь понимал, что перед ним не обычный текст, добавим к нему пунктирное подчёркивание через border-bottom и при наведении поменяем курсор на «руку», как это происходит со ссылками, через cursor.

label < cursor: pointer; /* Вид курсора */ border-bottom: 1px dashed blue; /* Пунктир снизу */ >

Окончательный код для создания выпадающего меню с использованием псевдокласса :checked показан в примере 1.

Пример 1. Выпадающее меню на CSS

Здесь у нас меню располагается снизу от текста, но с помощью свойств left, top, right, bottom для селектора ul меню можно отображать сверху или справа от текста.

См. также

Аккордеон меню
Вкладки на CSS
Использование :checked
Подсказка в поле формы
Пользовательские формы
Псевдокласс :checked
Спойлер
Стилизация переключателей
Стилизация флажков
Формы в Bootstrap 4
Формы в HTML
Элемент label

Создаем выпадающее меню CSS

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child .

Исходный код
Демо

Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */ nav < margin: 100px 0; background-color: #E64A19; >/* убираем отступы и поля, а также list-style для «ul», * и добавляем «position:relative» */ nav ul < padding:0; margin:0; list-style: none; position: relative; >/* применяем inline-block позиционирование к элементам навигации */ nav ul li < margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; >/* стилизуем ссылки */ nav a < display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; >/* изменяем цвет фона при наведении курсора */ nav a:hover

После применения стилей у нас должно получиться нечто вроде этого:

Теперь добавим CSS-стили , чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul < display: none; position: absolute; top: 100%; >/* отображаем выпадающий список при наведении */ nav ul li:hover > ul < display:inherit; >/* первый уровень выпадающего списка */ nav ul ul li

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):

Взгляните на приведенный ниже HTML-код , в котором мы добавляем второй уровень выпадающего списка к пункту меню « Tutorial », который находится внутри пункта « WordPress »:

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :

/* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul

Если все сделано правильно, у вас должно получиться нечто вроде этого:

Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):

/* измените ‘ +’ на любой другой символ, если нужно */ li > a:after < content: ' +'; >li > a:only-child:after

Значит, вы все сделали правильно.

В завершение

Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.

А как вы сделали меню на HTML ? Пожалуйста, расскажите об этом в комментариях.

Горизонтальное выпадающее меню

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в этом уроке.

Как сделать горизонтальное выпадающее меню

Содержание:
1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения
2. 3D выпадающее меню
3. Разворачивающееся выпадающее меню с логотипом
4. Увеличивающееся выпадающее меню
5. Подъезжающее выпадающее меню

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li ;
— для выпадающего меню ul , а также значения left и top .

Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

Способ 1.

Выпадающее меню скрывается с помощью .submenu , при наведении показывается с помощью .topmenu li:hover .submenu .

Способ 2.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu .

Способ 3.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

Способ 4.

Меню скрывается с помощью .submenu , показывается — .topmenu li:hover .submenu . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для .submenu , т.е. из верхнего левого угла.

Способ 5. С помощью jQuery

$(".five li ul").hide(); // скрываем выпадающее меню $(".five li:has('.submenu')").hover( function() < $(".five li ul").stop().fadeToggle(300);>/* отбираем элемент списка, который содержит элемент с классом .submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */ );

2. 3D выпадающее меню

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

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

* < box-sizing: border-box; >body < margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; >nav ul < list-style: none; margin: 0; padding: 0; >nav a < display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; >.topmenu < backface-visibility: hidden; background: rgba(255,255,255,.8); >.topmenu > li < display: inline-block; position: relative; >.topmenu > li > a < font-family: 'Exo 2', sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; >.down:after < content: "\f107"; margin-left: 8px; font-family: FontAwesome; >.topmenu li a:hover < color: #E6855F; >.submenu < background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index: 5; width: 150px; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .6s ease-in-out; >.topmenu > li:hover .submenu < visibility: visible; opacity: 1; transform: perspective(600px) rotateX(0deg); >.submenu li a

3. Разворачивающееся выпадающее меню с логотипом

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

* < box-sizing: border-box; >body < margin: 0; background: #f2f2f2; >header < background: white; text-align: center; >header a < text-decoration: none; outline: none; display: block; transition: .3s ease-in-out; >.logo < color: #D5B45B; font-family: 'Playfair Display', serif; font-size: 2.5em; padding: 20px 0; >nav < display: table; margin: 0 auto; >nav ul < list-style: none; margin: 0; padding: 0; >.topmenu:after < content: ""; display: table; clear: both; >.topmenu > li < width: 25%; float: left; position: relative; font-family: 'Open Sans', sans-serif; >.topmenu > li > a < text-transform: uppercase; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; >.topmenu li a:hover < color: #D5B45B; >.submenu-link:after < content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; >.submenu < background: #273037; position: absolute; left: 0; top: 100%; z-index: 5; width: 180px; opacity: 0; transform: scaleY(0); transform-origin: 0 0; transition: .5s ease-in-out; >.submenu a < color: white; text-align: left; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); >.submenu li:last-child a < border-bottom: none; >.topmenu > li:hover .submenu

4. Увеличивающееся выпадающее меню

Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера .submenu , при наведении размер увеличивается до .topmenu > li:hover .submenu .

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 600 пикселей, то есть, если разрешение экрана больше 600 пикселей, меню будет горизонтальным, если меньше — то вертикальным.

* < box-sizing: border-box; margin: 0; padding: 0; >body < background: url(https://html5book.ru/wp-content/uploads/2021/04/background_54.png) >ul < list-style: none; >.topmenu < background: white; >.topmenu a < text-decoration: none; display: block; transition: .4s ease-in-out; >.topmenu>li>a < padding: 20px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: 'Exo 2', sans-serif; >.topmenu li a:hover < color: #c0a97a; >.submenu li a < border-bottom: 1px solid #efefef; font-size: 12px; color: #484848; font-family: 'Kurale', serif; >@media(max-width: 599px) < .topmenu>li>a < padding: 15px 20px; >.submenu li a < padding: 10px 20px; margin: 0 20px; >> @media(min-width: 600px) < .topmenu < width: 100%; display: flex; justify-content: center; >.topmenu>li < position: relative; >.topmenu>li:after < content: ""; position: absolute; right: 0; width: 1px; height: 12px; background: #d2d2d2; top: 24px; box-shadow: 4px -2px 0 #d2d2d2; transform: rotate(30deg); >.topmenu>li:last-child:after < background: none; box-shadow: none; >.submenu < position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; background: #fafafa; border: 1px solid #ededed; z-index: 5; visibility: hidden; opacity: 0; transform: scale(.8); transition: .4s ease-in-out; >.topmenu>li:hover .submenu < visibility: visible; opacity: 1; transform: scale(1); >.submenu li a < text-align: center; padding: 10px 0; margin: 0 10px; >>

5. Подъезжающее выпадающее меню

Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Libre+Baskerville'); body < margin: 0; background-image: url(https://html5book.ru/wp-content/uploads/2017/03/dulcineia-dias-195000.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; >body:before < content: ""; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(0,0,0,0), rgba(255,255,255,.8)); >nav < text-align: center; padding: 40px 0 0; >nav ul < list-style: none; margin: 0; padding: 0; >nav a < text-decoration: none; display: block; color: #222; >.topmenu > li < display: inline-block; position: relative; >.topmenu > li > a < position: relative; padding: 10px 15px; font-family: 'Kaushan Script', cursive; font-size: 1.5em; line-height: 1; letter-spacing: 3px; >.topmenu > li > a:before < content: ""; position: absolute; z-index: 5; left: 50%; top: 100%; width: 10px; height: 10px; background: white; border-radius: 50%; transform: translate(-50%, 20px); opacity: 0; transition: .3s; >.topmenu li:hover a:before < transform: translate(-50%, 0); opacity: 1; >.submenu < position: absolute; z-index: 4; left: 50%; top: 100%; width: 150px; padding: 15px 0 15px; margin-top: 5px; background: white; border-radius: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transition: .3s; >.topmenu > li:hover .submenu < visibility: visible; opacity: 1; transform: translate(-50%, 0); >.submenu a < font-family: 'Libre Baskerville', serif; font-size: 11px; letter-spacing: 1px; padding: 5px 10px; transition: .3s linear; >.submenu a:hover

Создание выпадающего (drop-down) меню при помощи только CSS

Сразу говорю, здесь мы не будем рассматривать меню с различными эффектами на jQuery (типо выпадания, выдвижения и прочее).

Только CSS и HTML, невероятно, но этого вполне достаточно для создания весьма неплохих менюшек.

HTML

Пока что я покажу вам только как сделать менюшку с одним уровнем вложенности, в данном случае главное — уловить саму суть.

ul style="color: #c1ef65;">"my-drop-down-menu"> li style="color: #c1ef65;">"list">a href="#" style="color: #c1ef65;">"link">WordPressa> ul style="color: #c1ef65;">"child"> li>a href="#">плагиныa>li> li>a href="#">темыa>li> li>a href="#">хакиli> ul> li> li style="color: #c1ef65;">"list">a href="#" style="color: #c1ef65;">"link">Joomlaa> ul style="color: #c1ef65;">"child"> li>a href="#">компонентыa>li> li>a href="#">модулиa>li> ul> li> li style="color: #c1ef65;">"list">a href="#" style="color: #c1ef65;">"link">Drupala>li> ul>

Пунктов может быть сколько угодно, выпадающих списков тоже, просто создаёте их по шаблону, подставляя лишь вместо символов # свои ссылки.

CSS

Здесь тоже всё довольно просто, к тому же часть кода ниже я использовал чисто для оформления, свой цвет фона, цвет ссылок и прочее (важное отмечено /* (!) */ ).

#my-drop-down-menu ul, ul#my-drop-down-menu{ list-style:none; } #my-drop-down-menu{ position:relative; /* (!) */ z-index:3; width:300px; height:20px; margin:0 auto; } #my-drop-down-menu li.list{ float:left; /* (!) */ display:block; /* (!) */ margin:0 5px; } #my-drop-down-menu a{ color: #61ADB0; text-decoration:none; } #my-drop-down-menu ul.child{ background: #463935; padding:5px; position:absolute; /* (!) */ top:29px; /* (!) */ left:-9999px; /* (!) */ z-index:3; border-top: 1px solid #3A2E2B; -moz-box-shadow: 0px 3px 7px #251d1b; -webkit-box-shadow: 0px 3px 7px #251d1b; box-shadow: 0px 3px 7px #251d1b; } #my-drop-down-menu li:hover ul.child{ left:auto; /* (!) */ } #my-drop-down-menu li a.link{ display:block; padding:5px; } #my-drop-down-menu li:hover a.link{ background: #463935; }

Повторяюсь, зеленым цветом я отметил стили, которые необходимы для того, чтобы меню нормально работало (выпадало).

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.