Автор

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

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


 

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

 

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

 

Плавная анимация предусмотрена только в последних браузерах. Также для правильного отображения было добавлено несколько строчек 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();
        });
    }
}

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

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



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

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

Порой разработчик не особо заморачивается дизайном своего ресурса и приходит к выводу, что будет использовать готовые шаблоны для сайта. Это весьма упрощает жизнь верстальщику, так как приходиться работать с готовым материалом, который уже можно изменить на свое усмотрение не создавая дизайн с нуля. В данном посте мы рассмотрим подборку замечательных, на мой взгляд, готовых шаблонов для сайта, которые вы можете скачать и использовать на свое усмотрение. Уверен, что каждый из посетителей найдет что-нибудь примечательное на свой вкус..

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


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

Адаптивность играет большую роль в современном веб-дизайне. Создатель сайта должен это прекрасно понимать, ведь хороший дизайн это половина успешного сайта. В каждого из посетителей свои потребности, кто-то заходит из планшета, кто-то из смартфона, а кто-то из ноутбука, при этом надо учитывать, что все эти устройства имеют различное разрешение, и сайт просто обязан правильно отображаться на ним. Каждая деталь сайта должна подстраиваться под разрешения устройства. В данном уроке мы рассмотрим, как создать замечательный, адаптивный аудио-плеер.


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

Чего вы можете добиться с помощью CSS 3D Transforms. Будут случаи, когда вы будете в полной мере использовать возможности CSS 3D. 


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

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close