Буквально на каждом сайте можно найти выпадающие элементы. Это весьма интересный способ организации материала на сайте, ведь элементы по умолчанию скрыты, и пользователю необходимо выполнить определенные действия, чтобы увидеть полный список, например нажать на элемент выбора. Зачастую такие элементы весьма скучны и однообразны, при этом не привлекают взор посетителя, тем самым теряя драгоценные клики по сайту. В данном уроке мы рассмотрим как можно стилизовать выпадающий список с различными эффектами.
Плавная анимация предусмотрена только в последних браузерах. Также для правильного отображения было добавлено несколько строчек JavaScript. И так, приступим.
Выпадающий список html
Шаг 1. HTML
Для начала рассмотрим простую разметку. Для этого мы будем использовать контейнер с ul для данного выпадающего списка.
<div id="dd" class="wrapper-dropdown-1"><span>Выберите пол:</span>
<ul class="dropdown">
<li><a href="#">Мужчина</a></li>
<li><a href="#">Женщина</a></li>
</ul>
</div>Шаг 2. JavaScript
Для работы нам необходимо несколько строчек javascript. Данный сценарий переключает класс .active, когда щелкаете по оболочке. Следует понимать, что если у оболочки нет класса .active, то данный сценарий добавляет его и если он присутствует,или наоборот-удаляет его.
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
//...
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
$('.wrapper-dropdown-1').removeClass('active');
});
});Вторая часть кода служит элементом для сворачивания списка, при нажатии курсора в другой части экрана, то есть список теряет свой класс .active.
Пример 1
Рассмотрим более детально первый пример.
Шаг 1. HTML
Для данного списка нам необходимо несколько элементов. Также поместим несколько элементов в выпадающий список.
<div id="dd" class="wrapper-dropdown-1"><span>Выберите пол:</span>
<ul class="dropdown">
<li><a href="#">Мужчина</a></li>
<li><a href="#">Женщина</a></li>
</ul>
</div>C разметкой закончили, приступим к стилям.
Шаг 2. CSS
Организацию стилей мы начнем из создания оболочки:
.wrapper-dropdown {
/* размер и позиционирование */
position: relative;
width: 200px;
padding: 10px;
margin: 0 auto;
/*Общие стили */
background: #9bc7de;
color: #fff;
outline: none;
cursor: pointer;
/* Настройки шрифтов */
font-weight: bold;
}Далее добавим небольшую стрелку справа с псевдо-элементом.
.wrapper-dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -6px;
border-width: 6px 0 6px 6px;
border-style: solid;
border-color: transparent #fff;
}Также добавим небольшую кнопку, которая будет активна при выпадающем списке.
.wrapper-dropdown-1 .dropdown {
/* размер и позиция */
position: absolute;
top: 100%;
left: 0; /* Size */
right: 0; /* Size */
/* Стили */
background: #fff;
font-weight: normal;
opacity: 0;
pointer-events: none;
}Когда мы задали позиционирование выпадающего списка и поместили под кнопкой придав ему параметр top: 100%, кроме этого список скрытный, мы уменьшили его непрозрачность до 0. Далее установим некоторые стили для выпадающего списка.
.wrapper-dropdown-1 .dropdown li a {
display: block;
text-decoration: none;
color: #9e9e9e;
padding: 10px 20px;
}
/* Состояние при наведении курсора */
.wrapper-dropdown-1 .dropdown li:hover a {
background: #f3f8f8;
}Далее нам необходимо задать параметры когда щелкаете по кнопке, чтобы показать список.
/* активное состояние */
.wrapper-dropdown-1.active .dropdown {
opacity: 1;
pointer-events: auto;
}
.wrapper-dropdown-1.active:after {
border-color: #9bc7de transparent;
border-width: 6px 6px 0 6px ;
margin-top: -3px;
}
.wrapper-dropdown-1.active {
background: #9bc7de;
background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
}Шаг 3. JavaScript
Теперь мы заставим кнопку выводить некоторые значения значение:
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text('Gender: ' + obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}С этим примером мы закончили, приступим к следующему.
Пример 2
Далее мы рассмотрим список, который нам предложит войти в профиль через аккаун различных популярных социальных сетей.
Шаг 1. HTML
<div id="dd">
Войти в аккаунт
<ul>
<li><a href="#"><em></em>Twitter</a></li>
<li><a href="#"><em></em>Github</a></li>
<li><a href="#"><em></em>Facebook</a></li>
</ul>
</div>Мы будем использовать теги i для того, чтобы вывести на экран небольшие значки от FontAwesome.
Шаг 2. CSS
Теперь рассмотрим стили обложки, они мало чем отличаются от первого примера.
.wrapper-dropdown-2 {
/* Размер и позиционирование */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px 15px;
/* Стили */
background: #fff;
border-left: 5px solid grey;
cursor: pointer;
outline: none;
}Также создаем стрелку, аналогичную можно наблюдать в первом примере.
.wrapper-dropdown-2:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 16px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}Теперь добавляем выпадающий список.
.wrapper-dropdown-2 .dropdown {
/* Размер и позиционирование */
position: absolute;
top: 100%;
left: -5px;
right: 0px;
/* Стили */
background: white;
transition: all 0.3s ease-out;
list-style: none;
opacity: 0;
pointer-events: none;
}Следует обратить внимание, что мы будем использовать переход, который заставит список постепенно появляться и исчезать. Применим некоторые стили для списков и значков.
.wrapper-dropdown-2 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
border-left: 5px solid;
padding: 10px;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-2 .dropdown li:nth-child(1) a {
border-left-color: #00ACED;
}
.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
border-left-color: #4183C4;
}
.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
border-left-color: #3B5998;
}
.wrapper-dropdown-2 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}
/* При наведении курсора */
.wrapper-dropdown-2 .dropdown li:hover a {
color: grey;
}К ссылкам мы добавили разноцветные полоски, которые будут придавать списку большей яркости. Далее мы добавим направление стрелки при активном и пассивном состоянии списка.
.wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}Шаг 3. JavaScript
Оживим наши элементы с помощью JavaScript.
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}Пример 3
Данный выпадающий список чаще всего используется на сайтах. Мы детально рассмотрим как его осуществить у себя на сайте.
Шаг 1. HTML
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Транспорт</span>
<ul class="dropdown">
<li><a href="#"><i class="icon-envelope icon-large"></i>Почтой</a></li>
<li><a href="#"><i class="icon-truck icon-large"></i>Автомобилем</a></li>
<li><a href="#"><i class="icon-plane icon-large"></i>Самолетом</a></li>
</ul>
</div>C разметкой закончили, перейдем к стилям.
Шаг 2. CSS
.wrapper-dropdown-3 {
/* Размер и позиционирование */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;
/* Стили */
background: #fff;
border-radius: 7px;
border: 1px solid rgba(0,0,0,0.15);
box-shadow: 0 1px 1px rgba(50,50,50,0.1);
cursor: pointer;
outline: none;
/* Настройка шрифта */
font-weight: bold;
color: #8AA8BD;
}В данном примере мы будем использовать границы, тени и закругленные углы, также мы добавим указательную стрелку.
.wrapper-dropdown-3:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 15px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #8aa8bd transparent;
}Рассмотрим стили выпадающего списка и его подпунктов.
.wrapper-dropdown-3 .dropdown {
/* Размер и позиционирование */
position: absolute;
top: 140%;
left: 0;
right: 0;
/* Стили */
background: white;
border-radius: inherit;
border: 1px solid rgba(0,0,0,0.17);
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-weight: normal;
transition: all 0.5s ease-in;
list-style: none;
opacity: 0;
pointer-events: none;
}
.wrapper-dropdown-3 .dropdown li a {
display: block;
padding: 10px;
text-decoration: none;
color: #8aa8bd;
border-bottom: 1px solid #e6e8ea;
box-shadow: inset 0 1px 0 rgba(255,255,255,1);
transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
float: right;
color: inherit;
}
.wrapper-dropdown-3 .dropdown li:first-of-type a {
border-radius: 7px 7px 0 0;
}
.wrapper-dropdown-3 .dropdown li:last-of-type a {
border-radius: 0 0 7px 7px;
border: none;
}
/* При наведении курсора */
.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}Шаг 3. JavaScript
C помощью javascript мы изменим значение выбранной кнопки.
function DropDown(el) {
this.dd = el;
this.placeholder = this.dd.children('span');
this.opts = this.dd.find('ul.dropdown > li');
this.val = '';
this.index = -1;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});
obj.opts.on('click',function(){
var opt = $(this);
obj.val = opt.text();
obj.index = opt.index();
obj.placeholder.text(obj.val);
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}С этим примером закончили, приступим к следующему.
Пример 4
В данном примере мы создадим список с элементами необходимых дел.
Шаг 1. HTML
<div id="dd" class="wrapper-dropdown-4">
Сделать сегодня
<ul class="dropdown">
<li><input id="el-1" type="checkbox" name="el-1" value="donut" /><label for="el-1">Съесть пончик</label></li>
<li><input id="el-2" type="checkbox" name="el-2" value="neighbour" /><label for="el-2">Шпионить за соседями</label></li>
<li><input id="el-3" type="checkbox" name="el-3" value="T-rex" /><label for="el-3">Сходить в магазин</label></li>
</ul>
</div>Мы добавили некоторые ссылки и значки, чтобы скрасить список.
Шаг 2. CSS
Рассмотрим общие стили списка.
.wrapper-dropdown-4 {
/* Размер и позиционирование */
position: relative;
width: 270px;
margin: 0 auto;
padding: 10px 10px 10px 30px;
/* Стили */
background: #fff;
border: 1px solid silver;
cursor: pointer;
outline: none;
}Теперь установим отступ слева, чтобы выделить место для красной линии.
.wrapper-dropdown-4:after {
content: "";
width: 0;
height: 0;
position: absolute;
right: 10px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #ffaa9f transparent;
}Некоторые стили для выпадающего списка.
.wrapper-dropdown-4 .dropdown {
/* Размер и позиционирование */
position: absolute;
top: 100%;
margin-top: 1px; /* граница оболочки */
left: -1px;
right: -1px;
/* Стили */
background: white;
border: 1px solid silver;
border-top: none;
list-style: none;
transition: all 0.3s ease-out;
opacity: 0;
pointer-events: none;
}Установим верхние пространство, для этого установим отступ со значением в 1px, Слева установим в -1px чтобы вытянуть позицию выпадающего списка.
.wrapper-dropdown-4 .dropdown li {
position: relative;
}
.wrapper-dropdown-4 .dropdown li label {
display: block;
padding: 10px 10px 10px 30px;
border-bottom: 1px dotted #1ccfcf;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-4 .dropdown li:last-of-type label {
border: none;
}
.wrapper-dropdown-4 .dropdown li input /* Чеки */ {
position: absolute;
display: block;
right: 10px;
top: 50%;
margin-top: -8px;
}
/* При наведении курсора*/
.wrapper-dropdown-4 .dropdown li:hover label {
background: #f0f0f0;
}
.wrapper-dropdown-4 .dropdown li input:checked ~ label {
color: grey;
text-decoration: line-through;
}Чеки имеют абсолютное позиционирование на каждой строке, но так как они соединены с метками, для переключения можете щелкнуть в любом месте строки.
Теперь настроим красные полоски по бокам, Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Мы рассмотрим оба способа.
/* Красные линии */
.wrapper-dropdown-4 .dropdown:before,
.wrapper-dropdown-4:before {
content: "";
width: 4px;
height: 100%;
position: absolute;
top: 0;
left: 15px;
border: 1px solid #ffaa9f;
border-top: none;
border-bottom: none;
z-index: 2;
}
/* Второй пример: */
/* Градиенты для красной линии */
.wrapper-dropdown-4 .dropdown,
.wrapper-dropdown-4 {
background: linear-gradient(left, white 5%, #ffaa9f 5%, #ffaa9f 5.3%, white 5.3%, white 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, white 6.8%);
}
.wrapper-dropdown-4 .dropdown li:hover label {
background: linear-gradient(left, #f0F0F0 5%, #ffaa9f 5%, #ffaa9f 5.3%, #f0F0F0 5.3%, #f0F0F0 6.5%, #ffaa9f 6.5%, #ffaa9f 6.8%, #f0F0F0 6.8%);
}Некоторое дополнительное состояние.
/* Активное состояние */
.wrapper-dropdown-4.active:after {
border-width: 0 6px 6px 6px;
}
.wrapper-dropdown-4.active .dropdown {
opacity: 1;
pointer-events: auto;
}Шаг 3. JavaScript
function DropDown(el) {
this.dd = el;
this.opts = this.dd.find('ul.dropdown > li');
this.val = [];
this.index = [];
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
obj.opts.children('label').on('click',function(event){
var opt = $(this).parent(),
chbox = opt.children('input'),
val = chbox.val(),
idx = opt.index();
($.inArray(val, obj.val) !== -1) ? obj.val.splice( $.inArray(val, obj.val), 1 ) : obj.val.push( val );
($.inArray(idx, obj.index) !== -1) ? obj.index.splice( $.inArray(idx, obj.index), 1 ) : obj.index.push( idx );
});
},
getValue : function() {
return this.val;
},
getIndex : function() {
return this.index;
}
}Пример 5
В последнем примере мы рассмотрим выпадающий список для администратора, где он может выбрать необходимые ему настройки.
Шаг 1. HTML
<div id="dd" class="wrapper-dropdown-5">
Администратор
<ul class="dropdown">
<li><a href="#"><em class="icon-user"></em>Профиль</a></li>
<li><a href="#"><em class="icon-cog"></em>Настройки</a></li>
<li><a href="#"><em class="icon-remove"></em>Выйти</a></li>
</ul>
</div>С разметкой закончили, перейдем к стилям.
Шаг 2. CSS
Зададим общие параметры для списка.
.wrapper-dropdown-5 {
/* размер и позиция */
position: relative;
width: 200px;
margin: 0 auto;
padding: 12px 15px;
/* стили */
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2);
cursor: pointer;
outline: none;
transition: all 0.3s ease-out;
}
.wrapper-dropdown-5:after { /* небольшая стрелка */
content: "";
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #4cbeff transparent;
}Активное состояние для списка.
.wrapper-dropdown-5.active {
border-radius: 5px 5px 0 0;
background: #4cbeff;
box-shadow: none;
border-bottom: none;
color: white;
}
.wrapper-dropdown-5.active:after {
border-color: #82d1ff transparent;
}
.wrapper-dropdown-5.active .dropdown {
border-bottom: 1px solid rgba(0,0,0,0.2);
max-height: 400px;
}В активном состоянии, мы устанавливаем max-height выпадающего списка к 400px.
Шаг 3. JavaScript
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}Также добавлена поддержка устаревших браузеров.
Вот и все. Готово!
Материал взят из зарубежного источника - tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling и представлен исключительно в ознакомительных целях. Блог по накрутке соцсетей поможет все желающим набраться опыта и знаний в этом вопросе. За необходимой активностью в видео живых подписчиков, лайков или просмотров заходите на https://lowcostsmm.com/ru/.
