Стильный выпадающий список на CSS Стильный выпадающий список на CSS



CSS3 18.05.2013

 

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

 

ДЕМО
ИСХОДНИКИ

 

Плавная анимация предусмотрена только в последних браузерах. Также для правильного отображения было добавлено несколько строчек JavaScript. И так, приступим.

Шаг 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();
        });
    }
}

Также добавлена поддержка устаревших браузеров.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Статьи по теме

  1.

    Постраничная навигация сайта

    jQuery

  2. Интересные кнопки поделиться в соцсетях на CSS3

    CSS3

  3. Текстовые градиенты

    CSS3

  4. Шаблон для внедрения мобильного приложения

    jQuery

Top

🔖 Выбор по тегам ×

HTML5 7 CSS3 133 jQuery 164 JS 45 SVG 11 Разное 18

💌 Написать сообщение ×

Все поля обязательны для заполнения!