Автор

Стильный выпадающий список на 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();
        });
    }
}

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

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


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

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


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

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


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

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


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

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


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

Надёжный хостинг

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

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close