или <оl> .
Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .
Скрыть выпадающее меню можно несколькими способами:
Способ 1. {display: none;}
Выпадающее меню скрывается с помощью.submenu {display: none;} , при наведении показывается с помощью.topmenu li:hover .submenu {display: block;} .
Способ 2. {visibility: hidden;}
Меню скрывается с помощью.submenu {visibility: hidden;} , показывается — .topmenu li:hover .submenu {visibility: visible;} .
Способ 3. {opacity: 0;}
Меню скрывается с помощью.submenu {opacity: 0;} , показывается — .topmenu li:hover .submenu {opacity: 1;} . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .
Способ 4. {transform: scaleY(0);}
Меню скрывается с помощью.submenu {transform: scaleY(0);} , показывается — .topmenu li:hover .submenu {transform: scaleY(1);} . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для.submenu {transform-origin: 0 0;} , т.е. из верхнего левого угла.
Способ 5. С помощью jQuery
$(".five li ul").hide(); // скрываем выпадающее меню
$(".five li:has(".submenu")").hover(function(){
$(".five li ul").stop().fadeToggle(300);} /* отбираем элемент списка, который содержит элемент с классом.submenu и добавляем ему функцию при наведении, которая показывает и скрывает выпадающее меню */);
2. 3D выпадающее меню
Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.
* { 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 {
color: #7f7f7f;
font-size: 13px;
line-height: 36px;
padding: 0 25px;
font-family: "Kurale", serif;
}
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 {
opacity: 1;
transform: scaleY(1);
}
4. Увеличивающееся выпадающее меню
Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера.submenu {transform: scale(.8);} , при наведении размер увеличивается до.topmenu > li:hover .submenu {transform: scale(1);} .
* { box-sizing: border-box; }
body {
margin: 0;
background: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png)
}
nav { background: white; }
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
outline: none;
display: block;
transition: .4s ease-in-out;
}
.topmenu {
text-align: center;
padding: 10px 0;
}
.topmenu > li {
display: inline-block;
position: relative;
}
.topmenu > li:after {
content: "";
position: absolute;
right: 0;
width: 1px;
height: 12px;
background: #d2d2d2;
top: 16px;
box-shadow: 4px -2px 0 #d2d2d2;
transform: rotate(30deg);
}
.topmenu > li:last-child:after {
background: none;
box-shadow: none;
}
.topmenu > li > a {
padding: 12px 26px;
color: #767676;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
font-family: "Exo 2", sans-serif;
}
.topmenu li a:hover { color: #c0a97a; }
.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;
}
.submenu li a {
padding: 10px 0;
margin: 0 10px;
border-bottom: 1px solid #efefef;
font-size: 12px;
color: #484848;
font-family: "Kurale", serif;
}
.topmenu > li:hover .submenu {
visibility: visible;
opacity: 1;
transform: scale(1);
}
5. Подъезжающее выпадающее меню
Горизонтальное меню с мини-анимацией: при наведении на ссылки верхнего меню появляется маленький кружок, который также сопровождает появление выпадающего меню.
@import url("https://fonts.googleapis.com/css?.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 {background: #e8e8e8;}
За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.
Ранее, чтобы создать выпадающий список в html (на англ. — dropdown
), мы просто использовали и . Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.
Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.
1. Настраиваемый список
Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.
2. Сделанный на CSS3/JavaScript
Написан на CSS3 и JavaScript. Обычный выпадающий список.
3. Стиль: станции метро
Прозрачный выпадающий список со стилистикой станций метро.
4. Dropy. Написанное на SCSS & jQuery
5. Для длинных выдающих списков
Отличное решение для длинных выпадающих меню.
Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.
Отлично подойдет для боковых меню на сайте, чтобы визуально показать категории на сайте.
8. Стильное меню настроек пользователя
9. CSS3 выпадающий список
Сделано в стиле UI, подойдет под UI стилистику сайта.
12. Выбор флага
Dropdown в стиле выбора страны.
13. Обычный HTML, CSS dropdown
Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!
Как сделать выпадающий список в html (подборка ТОП 16) от bologer
Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.
Итак, не будем долго рассуждать, перейдем сразу к делу
HTML
Поделись записью
Facebook
Google Plus
ВКонтакте
Я сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть. :hover
, то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.
CSS
Для начала рассмотрим базовые стили выпадающего списка. Я старался комментировать каждую строку кода, чтобы было понятнее:
/*Сбросим отступы*/
.droplink ul,.droplink h3,.droplink h3 a{
padding:0;margin:0
}
/*Базовая обертка*/
.droplink {
width:200px;
position:absolute;
margin:10px 0 0 25px
}
/*Стиль блока при наведении*/
.droplink:hover{
height:auto;
background-color:#3E403D;
border:solid 1px #3A3C39
}
/*Заголовок в обычном состоянии*/
.droplink h3 a{
text-align:center;
width:100%;
display:block;
padding:12px 0px;
color:#999;
text-decoration:none
}
.droplink h3 a img{border:none}
/*Стиль для заголовка при наведении*/
.droplink:hover h3 a {
color:#FFF;
font-weight:bold;
position:absolute
}
Тут ничего особенного, указали размеры и стиль блока, стиль заголовка и для обеих элементов — их стили при наведении курсора. Идем дальше:
/*Скрываем список без наведения*/
.droplink ul{
list-style:none;
display:none
}
/*Отображаем список при наведении*/
.droplink:hover ul{
display:block;
margin-top:40px
}
.droplink li{display:block}
Этот код уже поинтереснее и показывает, как ведет себя выпадающий список
при наведении курсора. В обычном состоянии стоит display:none,
то есть он не отображается. При наведении — показываем его блоком. Вот и весь секрет. Теперь немного оформим элементы списка и вставим иконки:
/*Стиль элемента списка*/
.droplink li a{
padding:5px 12px 4px 34px;
margin:1px;
background-color:#484A47;
display:block;
color:#FFF;
text-decoration:none;
font-size:12px;
background-repeat:no-repeat;
background-position: 10px 3px
}
/*Стиль элемента при наведении*/
.droplink li a:hover{
background-color:#999
}
/*Иконки*/
.facebook a {background-image:url("icons/facebook.png")}
.twitter a {background-image:url("icons/twitter.png")}
.vk a {background-image:url("icons/vk.png")}
.rss a {background-image:url("icons/rss.png")}
.gplus a {background-image:url("icons/gplus.png")}
Вот, собственно, и все. Выпадающий список готов и смотрится достаточно симпатично. Можно оформить элементы на свое усмотрение, добавить закругленных углов и прочих «примочек».
Если необходимо, чтобы список «перекрывал» текст под ним при наведении — смотрите в сторону z-index
.
Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>
