—»     —»   Пользовательское оформление выпадающих списков
  Раздел: Меню и Навигация   Комментариев: 2  

Пользовательское оформление выпадающих списков

Привет, друзья! Сегодня мы хотим рассказать вам еще кое-что о CSS! На этот раз давайте поговорим (и сделаем это!) о разработке чего-то более практичного, нежели кнопки и переключатели. Давайте поговорим о выпадающих списках. Цель данного руководства состоит в том, чтобы показать вам, как создать привлекательное выпадающее меню без использования изображений, прибегнув лишь к коду CSS. Для того чтобы всё у нас заработало, нам понадобится строчка кода jQuery.

Пользовательское оформление выпадающих списков

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.


То, что следует знать перед началом:

* В отрывках CSS-кода вы не увидите браузерных префиксов, но они есть в файлах архива.
* Лично мы используем блочную модель, где (ширина)=(ширина элемента)+(отступы)+(границы). Мы реализуем это при помощи следующего отрывка кода:

*,
*:after,
*:before {
box-sizing: border-box;
}

С чего начнем?

Первый вопрос: что нам нужно для создания выпадающего списка? В целом, мы используем разделение со span-элементом и неупорядоченным списком для создания выпадающего списка (мы могли бы изменить этот код для создания нескольких примеров):

<div class="wrapper-dropdown">
<span>I'm kinda the label!</span>
<ul class="dropdown">
<li>I'm hidden!</li>
<li>Me too!</li>
<li>So do I.</li>
</ul>
</div>

javascript

Сейчас нам потребуется вооружиться javascript. Так как для всех демо-файлов используется один и тот же JS-сниппет, давайте сначала разберемся с ним:

//...

obj.dd.on('click', function(event){
$(this).toggleClass('active');
return false;
});

//...

$(function() {

var dd = new DropDown( $('#dd') );

$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-1').removeClass('active');
});

});

Что же делает этот скрипт? Сначала он переключает класс под названием .active, когда вы кликаете по оболочке. Это означает, что если оболочка не имеет класса .active, то он добавляет его, а если уже имеет, то он исключает его.

Во-вторых, он дуплицирует стандартное положение выпадающего списка, закрывая его, если курсор вашей мыши направляется куда-либо еще на странице. В целом, этот скрипт как бы повествует о том, что если мы кликаем по дочернему элементу тега «html» (то есть, по каждому элементу в DOM), оболочка теряет класс .active. Но нам нужно исключить подобное поведение в самой оболочке. Довольно просто, не правда ли?

Итак, теперь мы понимаем, как это все работает, и сейчас пришло время создавать привлекательные выпадающие списки!

Пример 1

Давайте начнем с чего-то простого: обычный выпадающий список для выбора пола. Давайте рассмотрим разметку:

Разметка

Нам нужно несколько вещей: оболочка, (скрытый) выпадающий список и «ярлык», который мы обернем в span-элемент. Мы используем анкоры потому, что нам это кажется корректным с точки зрения семантики, но мы также можем использовать и другой тег.

<div id="dd" class="wrapper-dropdown-1" tabindex="1">
<span>Gender</span>
<ul class="dropdown">
<li><a href="#">Male</a></li>
<li><a href="#">Female</a></li>
</ul>
</div>

CSS-код

Давайте окунемся в CSS-код, на котором мы и ставим акцент в нашем сегодняшнем руководстве. Начнем с оболочки:

.wrapper-dropdown {
/* Size and position */
position: relative; /* Enable absolute positioning for children and pseudo elements */
width: 200px;
padding: 10px;
margin: 0 auto;

/* Styles */
background: #9bc7de;
color: #fff;
outline: none;
cursor: pointer;

/* Font settings */
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;
}

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

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

.wrapper-dropdown-1 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0; /* Size */
right: 0; /* Size */

/* Styles */
background: #fff;
font-weight: normal; /* Overwrites previous font-weight: bold; */

/* Hiding */
opacity: 0;
pointer-events: none;
}

Что мы только что сделали? Мы задали списку абсолютное позиционирование, и расположили его за кнопкой (top: 100%;). Мы задали ему ту же ширину, что и кнопке, а левое и правое значения выставили на 0. И что более важно, мы скрыли его, понизив непрозрачность до 0. Что же насчет pointer-events? Если мы чего-то не видим, это не значит, что этого нет. Выставив pointer-events на none, мы предотвращаем нажатие на выпадающий список в тот момент, когда он «скрыт».

Давайте добавим некоторые стили к элементам списка внутри выпадающего списка:

.wrapper-dropdown-1 .dropdown li a {
display: block;
text-decoration: none;
color: #9e9e9e;
padding: 10px 20px;
}

/* Hover state */
.wrapper-dropdown-1 .dropdown li:hover a {
background: #f3f8f8;
}

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

/* Active state */
.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%);
}

Здесь у нас есть три вещи:

* Во-первых, мы делаем так, чтобы выпадающий список появлялся за счет изменения значения непрозрачности на 1. Не забудьте выставить pointer-events на auto для того, чтобы активировать взаимодействие с этим параметром!
* Во-вторых, мы изменяем направление и цвет маленькой стрелки.
* В-третьих, мы изменяем фон за стрелкой, используя очень умную градацию на кнопке. Красиво, не правда ли?

javascript

Последнее, но не менее важное заключается в добавлении еще одного отрывка кода 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;
}
}

Здесь код очень прост: когда по элементу производится нажатие, мы получаем его значение и отображаем его в «label».

Пример 2

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

Разметка

<div id="dd" class="wrapper-dropdown-2">Sign in with
<ul class="dropdown">
<li><a href="#"><i class="icon-twitter icon-large"></i>Twitter</a></li>
<li><a href="#"><i class="icon-github icon-large"></i>Github</a></li>
<li><a href="#"><i class="icon-facebook icon-large"></i>Facebook</a></li>
</ul>
</div>

Теги «i» используются для отображения маленьких иконок от FontAwesome. Нам не хотелось бы рассказывать здесь о всех ресурсах от FontAwesome, так как об этом рассказывали уже тысячу раз. Просто будьте уверенными в том, что они работают.

CSS-код

Давайте начнем с разработки оболочки. Примерно такая же, какой она была в нашем предыдущем примере. Обратите внимание на 5-пиксельную левую границу – она очень важна в продолжении руководства.

.wrapper-dropdown-2 {
/* Size and position */
position: relative; /* Enable absolute positioning for children and pseudo elements */
width: 200px;
margin: 0 auto;
padding: 10px 15px;

/* Styles */
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 {
/* Size & position */
position: absolute;
top: 100%;
left: -5px;
right: 0px;

/* Styles */
background: white;
transition: all 0.3s ease-out;
list-style: none;

/* Hiding */
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;
}

/* Hover state */

.wrapper-dropdown-2 .dropdown li:hover a {
color: grey;
}

Мы задаем ссылкам левую границу, оформленную цветом в зависимости от бренда, за который они отвечают. Текст слегка смещен вправо посредством параметра margin-right, примененного к иконкам.

А теперь, раскрытое положение. Все вполне ясно: стрелки меняют направление, а выпадающее меню становится видимым. Благодаря параметру transition на выпадающем списке, оно появляется постепенно (параметр непрозрачности изменяется от 0 до 1).

.wrapper-dropdown-2.active:after {
border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-2.active .dropdown {
opacity: 1;
pointer-events: auto;
}

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

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

Разметка

<div id="dd" class="wrapper-dropdown-3" tabindex="1">
<span>Transport</span>
<ul class="dropdown">
<li><a href="#"><i class="icon-envelope icon-large"></i>Classic mail</a></li>
<li><a href="#"><i class="icon-truck icon-large"></i>UPS Delivery</a></li>
<li><a href="#"><i class="icon-plane icon-large"></i>Private jet</a></li>
</ul>
</div>

Не больше, чем в прошлых вариантах. Давайте сразу переходить к CSS!

CSS-код

.wrapper-dropdown-3 {
/* Size and position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 10px;

/* Styles */
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 settings */
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 {
/* Size & position */
position: absolute;
top: 140%;
left: 0;
right: 0;

/* Styles */
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;

/* Hiding */
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;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
background: #f3f8f8;
}

Здесь стоит отметить следующее:

* Мы используем небольшую тень блока для ссылок для того, чтобы создать незначительный эффект свечения в верхней части.
* Во избежание того, что данная тень выходит за пределы меню, мы задаем первой ссылке закругленные углы.
* Исключаем границу последней ссылки для того, чтобы избежать некрасивой 1-пиксельной границы в самом низу выпадающего меню.
* Мы не изменяем разметку для того, чтобы поместить иконки в правую часть: просто используем float: right.

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

.wrapper-dropdown-3 .dropdown:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 15px;
border-width: 0 6px 6px 6px;
border-style: solid;
border-color: #fff transparent;
}

.wrapper-dropdown-3 .dropdown:before {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
right: 13px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: rgba(0,0,0,0.1) transparent;
}

Для этой стрелки мы используем 2 псевдо-элемента? Нам нужно создать границу вокруг них. Мы создаем белый треугольник, который расположен вверх от серого цвета и размером немного больше. Таким образом, все выглядит так, как будто у нас только одна маленькая стрелка с границей.

А теперь переходим к раскрытому состоянию. Практически то же самое. Только обратите внимание на то, что мы сделали переход к .dropdown немного дольше, чем обычно (0.5s вместо 0.3s). Таким образом, открытие меню происходит гораздо более плавно.

.wrapper-dropdown-3.active .dropdown {
opacity: 1;
pointer-events: auto;
}

javascript

Завершая данное демо, нам нужно добавить немного кода javascript, чтобы заменить стандартное значение кнопки на состояние выбранной. В первом примере мы уже видели, как это делается, но так как здесь у нас больше нет слова «transport», JS немного отличается.

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

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

Разметка

<div id="dd" class="wrapper-dropdown-4">To do
<ul class="dropdown">
<li><input type="checkbox" id="el-1" name="el-1" value="donut"><label for="el-1">Eat a donut</label></li>
<li><input type="checkbox" id="el-2" name="el-2" value="neighbour"><label for="el-2">Spy on my neighbours</label></li>
<li><input type="checkbox" id="el-3" name="el-3" value="T-rex"><label for="el-3">Feed my T-Rex</label></li>
</ul>
</div>

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

CSS-код

.wrapper-dropdown-4 {
/* Size and position */
position: relative;
width: 270px;
margin: 0 auto;
padding: 10px 10px 10px 30px;

/* Styles */
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 {
/* Size & position */
position: absolute;
top: 100%;
margin-top: 1px; /* border of wrapper */
left: -1px;
right: -1px;

/* Styles */
background: white;
border: 1px solid silver;
border-top: none;
list-style: none;
transition: all 0.3s ease-out;

/* Hiding */
opacity: 0;
pointer-events: none;
}

Нам нужно выставить margin-top на 1px, так как нам нужно сместить его немного вниз из-за границы оболочки. Параметр left выставлен на -1px для того, чтобы сместить выпадающий список на место, и мы задаем ту же границу, которую задавали его родительскому элементу, но в этот раз мы исключаем верхнюю границу.

.wrapper-dropdown-4 .dropdown li {
position: relative; /* Enable absolute positioning for checkboxes */
}

.wrapper-dropdown-4 .dropdown li label {
display: block;
padding: 10px 10px 10px 30px; /* Same padding as the button */
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 /* Checkboxes */ {
position: absolute;
display: block;
right: 10px;
top: 50%;
margin-top: -8px;
}

/* Hover state */

.wrapper-dropdown-4 .dropdown li:hover label {
background: #f0f0f0;
}

/* Checked state */

.wrapper-dropdown-4 .dropdown li input:checked ~ label {
color: grey;
text-decoration: line-through;
}

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

А сейчас, нам нужно разобраться с двумя тоненькими красными линиями с левой стороны нашего небольшого блокнота. Существует два способы реализовать это: один посредством псевдо-элементов, а второй посредством градаций. Давайте взглянем на оба варианта.

/* Red lines: the pseudo-elements way */
.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;
}

/* ИЛИ: */
/* Red lines: the gradients way */

.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%);
}

Первый метод создает псевдо-элемент (на самом деле два: один для кнопки, и второй для выпадающего меню) с левой и правой границами, которые расположены поверх всего остального.
Второй метод имитирует красные линии посредством градации как на оболочке, так и на выпадающем списке.
Так какой же метод лучше? Возможно, первый, потому что если вам нужно будет изменить эффект при наведении на элементы списка, вам нужно будет изменить градацию, которая не очень привлекательна. Более того, псевдо-элементы лучше поддерживаются в браузерах (до IE8), нежели градации, которые не поддерживаются в IE вплоть до 10 версии IE.

Давайте завершим работу над раскрытым состоянием. Здесь ничего нового.

/* Active state */

.wrapper-dropdown-4.active:after {
border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-4.active .dropdown {
opacity: 1;
pointer-events: auto;
}

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

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

Разметка

<div id="dd" class="wrapper-dropdown-5" tabindex="1">John Doe
<ul class="dropdown">
<li><a href="#"><i class="icon-user"></i>Profile</a></li>
<li><a href="#"><i class="icon-cog"></i>Settings</a></li>
<li><a href="#"><i class="icon-remove"></i>Log out</a></li>
</ul>
</div>

CSS-код

.wrapper-dropdown-5 {
/* Size & position */
position: relative;
width: 200px;
margin: 0 auto;
padding: 12px 15px;

/* Styles */
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 { /* Little arrow */
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 .dropdown {
/* Size & position */
position: absolute;
top: 100%;
left: 0;
right: 0;

/* Styles */
background: #fff;
border-radius: 0 0 5px 5px;
border: 1px solid rgba(0,0,0,0.2);
border-top: none;
border-bottom: none;
list-style: none;
transition: all 0.3s ease-out;

/* Hiding */
max-height: 0;
overflow: hidden;
}

На этот раз мы зададим параметру непрозрачности значение 0 для того, чтобы скрыть меню. Далее выставляем параметр max-height на 0 и overflow на hidden. Почему мы используем max-height, а не просто height? Потому что мы не знаем точную высоту раскрытого выпадающего меню.
На этот раз нам понадобится pointer-events, так как меню здесь отсутствует.

Быстрые и простые стили для элементов списка.

.wrapper-dropdown-5 .dropdown li {
padding: 0 10px ;
}

.wrapper-dropdown-5 .dropdown li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px 0;
transition: all 0.3s ease-out;
border-bottom: 1px solid #e6e8ea;
}

.wrapper-dropdown-5 .dropdown li:last-of-type a {
border: none;
}

.wrapper-dropdown-5 .dropdown li i {
margin-right: 5px;
color: inherit;
vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-5 .dropdown li:hover a {
color: #57a9d9;
}

А теперь, активное положение:

/* Active state */

.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;
}

Когда выпадающее меню открыто, мы изменяем нижние углы кнопки, её цвет, направление стрелки и цвет стрелки, а также исключаем оба ее параметра: box-shadow и border.
И для того чтобы отобразить меню, мы выставляем max-height выпадающего меню на 400 пикселей. Мы могли бы выставить и 500px, и 1000px, и 1000000px; - это не имеет значения.

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

Запасные варианты

Итак друзья, теперь у нас есть 5 невероятных выпадающих меню, которые работают великолепно, но что делать с устаревшими браузерами?
Эти браузеры не понимают параметра непрозрачности. И даже если некоторые из них ладят с фильтрами, они не распознают pointer-events. Это очень плохо, и поэтому здесь нам нужен запасной вариант.

Здесь нам на помощь приходит Modernizr. Для тех, кто не знает, что такое Modernizr – это javascript-библиотека, которая определяет HTML5 и CSS3 в браузере пользователя.
Благодаря этому скрипту мы можем сообщать браузеру нечто вроде «если ты не понимаешь *этот* параметр, то сделай *это*». С помощью Modernizr мы можем добавлять такие классы в HTML, как например no-pointerevents, если браузер не поддерживает no-pointerevent. Давайте рассмотрим пример того, как мы можем устроить запасной вариант для браузеров, которые не поддерживают конкретные CSS-параметры:

/* No CSS3 support */

.no-opacity .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
display: none;
opacity: 1; /* If opacity support but no pointer-events support */
pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
display: block;
}

Если браузер не поддерживает и непрозрачности и pointer-events, тогда мы скрываем выпадающий список, используя незамысловатый параметр display: none;.
Если браузер не поддерживает непрозрачность, но поддерживает pointer-events, то тогда этот параметр вы выставляем на auto для того, чтобы позволить пользователю кликать по меню после того, как оно будет раскрыто.
Если же браузер не поддерживает pointer-events, но поддерживает непрозрачность, то мы выставляем параметр на 1 для того, чтобы выпадающий список появлялся тогда, когда пользователь переключается на класс .active.

Когда включен класс .active, мы отображаем выпадающий список, используя параметр display: block;. Всё невероятно просто!

Примечание: конечно же, это всё не относится к демо, где используется анимация max-height. Все эти правила работают с простыми примерами, где используется только непрозрачность и pointer-events.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, javascript
Опубликовал Design FactoRy   Прочитано (раз): 24366   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 20 октября 2012 @ 11:25
Написал: Игорь — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
какая микроминиатюрненькая статейка...
Комментарий #2: 20 октября 2012 @ 12:01
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3324   |   Комментариев: 500
ICQ: --- не указано ---
Игорь, да, статейка не из мелких ... но ооочень, имхо, познавательная.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031