Автор

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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


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

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


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

Контактна форма является важной составляющей сайта, с помощью данной формы посетитель может связаться с администрацией сайта.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close