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

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

Сложность
css список

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

  • Вы не увидите префиксы в 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 выпадающий список, при нажатии по любому пустому месту на кране.

Пример 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 при помощи рамок.

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

.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. Что относительно событий курсора? Определение событий курсора, предотвращает нажатие по выпадающему списку, в то время как он находится в скрытом состоянии.

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

.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 код, для отображения выпадающешл списка.

/* активное состояние */
.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. Не забывайте поменять значение указателя на 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;
}

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

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

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

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

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

Все прекрасно работает, кроме небольшой стрелки.

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

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, чтобы поместить ее немного ниже рамки основного контейнера.

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

Расположим чекбоксы на каждой строке при помощи свойства position: absolute;, но так как они соединены с ссылками, для переключения можно нажать в любом месте строки.
При нажатии на чекбокс, соответствующая ссылка становится серой и зачеркнутой. Просто, но эффективно.

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

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

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

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

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

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

ДЕМО СКАЧАТЬ Перевод статьи Custom Drop-Down List Styling

 

Тэги: menudropdown

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.