Lecaw

Учимся создавать Web-сайты

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

October 13, 2012
CSS
2041hits

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

Исходные файлы ДЕМО

 

Несколько слов перед началом:

  • Вы не увидите префиксы в коде CSS, но конечно найдете их в файлах.
  • Я использую box-model где, [width] = [element-width] + [padding] + [borders]. Активировать этот код можно при помощи следующего отрывка:
*,
*:after,
*:before {
    box-sizing: border-box;
}

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

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

<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() {
        $('.wrapper-dropdown-1').removeClass('active');
    });
 
});

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

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

Пример 1

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

HTML разметка

Нам нужно несколько элементов: оболочка, (скрытый) выпадающий список и "метка", которую мы поместим в оболочку.

<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 {
    /* размер и позиция */
    position: relative; /* подключаем абсолютное расположение для дочерних элементов и псевдо-элементов */
    width: 200px;
    padding: 10px;
    margin: 0 auto;
 
    /* стили */
    background: #9bc7de;
    color: #fff;
    outline: none;
    cursor: pointer;
 
    /* настройки шрифта */
    font-weight: bold;
}

Здесь мы устанавливаем ширину css выпадающего списка и добавили отступы. Мы также добавили некоторые настройки шрифта.

Также установим "метку", добавим небольшую стрелку справа с псевдо-элементом.

.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 при помощи границ.

У нас есть миленькая кнопка, но без фактического css выпадающего списка у нее нет никакого смысла.

.wrapper-dropdown-1 .dropdown {
    /* размер и позиция */
    position: absolute;
    top: 100%;
    left: 0; /* Size */
    right: 0; /* Size */
 
    /* Styles */
    background: #fff;
    font-weight: normal; 
 
    opacity: 0;
    pointer-events: none;
}

Мы задали позицию css выпадающему списку и поместили под кнопкой (top: 100%;). И что еще более важно, мы сделали его скрытым, уменьшая его непрозрачность до 0. Что относительно событий курсора? Установка событий курсора, предотвращает щелчок по css выпадающему списку, в то время как он находится в скрытом состоянии.

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

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

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

/* активное состояние */
.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%);
}         

Что вы должны знать:

  • Во-первых, мы заставляем css выпадающий список появиться, изменяя его непрозрачность к 1. Не забывайте установить событие указателя со значением 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;
    }
}

Очень простой код: когда по элементу щелкают, мы получаем его значение и выводим его на экран.

Пример 2

Для чего ещё нужны css выпадающие списки, чтобы выбрать способ регистрации! Я знаю, обычно для этого мы используем необычные кнопки, но давайте попробуем что-то новое.

HTML разметка

<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

Давайте начнем с оболочки. Оболочка почти такая же как и в предыдущем примере.

.wrapper-dropdown-2 {
    /* размер и позиция */
    position: relative; /* подключаем абсолютное расположение для дочерних элементов и псевдо-элементов */
    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;
}

Добавим css выпадающий список, опять же, как и в предыдущем примере:

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

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

Теперь, дополнительное состояние. Довольно просто: стрелка изменяет направление, и css выпадающий список становится видимым. Благодаря свойству перехода, выпадающий список появляется постепенно (анимация непрозрачности от 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

Этот элемент мы используем чаще всего в виде css выпадающего списка. Действительно, когда выбираете что-то, значение по умолчанию выбранного элемента, должно совпадать со значением самого элемента.

HTML разметка

<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

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

Такой же код как и прежде, поэтому сразу перейдем к css выпадающему списку и его дочерним элементам.

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

Примечания:

  • Мы используем box-shadow на ссылках, чтобы создать тонкий световой эффект.
  • Мы добавили закругленные углы у ссылки.
  • Мы удаляем границу у последней ссылки, чтобы избежать 1px границы у основания css выпадающего списка.
  • Мы не изменяем разметку, для того чтобы разместить значки справа.

Все прекрасно работает, кроме небольшой стрелки на css выпадающем списке.

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

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

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

.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

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

HTML разметка

<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 {
    /* размер и позиция */
    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;
}

CSS выпадающий список:

.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 чтобы вытянуть позицию css выпадающего списка, дадим ему ту же границу как и у родительского элемента.

.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 /* Checkboxes */ {
    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;
}

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

Теперь, мы должны настроить две красные строки слева. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте рассмотрим оба этих способа.

/* красные линии: псевдо-элемент */
.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%);
}

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

Дополнительное состояние:

/* активное состояние */
 
.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

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

HTML разметка

<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 {
    /* размер и позиция */
    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;
}

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

.wrapper-dropdown-5 .dropdown {
    /* размер и позиция */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
 
    /* стили */
    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;
 
    max-height: 0;
    overflow: hidden;
}

На этот раз мы не изменяем непрозрачность к 0, чтобы скрыть меню. Мы устанавливаем max-height в 0 и overflow: hidden. Почему max-height, а не его основная высота? Потому что мы не знаем точной высоты расширенного списка.

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

.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;
}
 
.wrapper-dropdown-5 .dropdown li:hover a {
    color: #57a9d9;
}

Активное состояние:

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

Когда css выпадающий список открыт, мы изменяем нижние углы кнопки, цвет, направление стрелки и удаляем тень и границу.
В активном состоянии, мы устанавливаем max-height выпадающего списка к 400px.

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 удивительных работ, но как они будут работать в устаревших браузерах?
Эти браузеры не понимают свойства непрозрачности. И если некоторые из них работают с фильтрами, они не понимают события указателя. Поэтому для нашего проекта нужно применить нейтрализацию.

В этом поможет наш друг - Modernizr. Для тех, кто не знает что такое Modernizr, это - библиотека JavaScript, которая определяет поддержку функции HTML5 и CSS3 в браузере пользователя.
Благодаря этому удивительному сценарию мы можем сказать браузеру, "если не поддерживаете *это * свойство, то делайте *вот это *". С Modernizr можно легко добавить классы к HTML, например, "no", если браузер не поддерживает события указателя. Пример управления нейтрализацией:

/* без поддержки CSS3 */
 
.no-opacity       .wrapper-dropdown-1 .dropdown,
.no-pointerevents .wrapper-dropdown-1 .dropdown {
    display: none;
    opacity: 1; 
    pointer-events: auto; 
}
 
.no-opacity       .wrapper-dropdown-1.active .dropdown,
.no-pointerevents .wrapper-dropdown-1.active .dropdown {
    display: block;
}

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

Когда класс .active переключен, мы показываем css выпадающей список с display: block;.

Исходные файлы ДЕМО

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(4 голосов)

Оставить комментарий