Html выпадающий список css: Горизонтальное выпадающее меню

Содержание

Создаем стильные выпадающие списки

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

Обратите внимание на некоторые вещи, прежде чем мы начнем:

  • В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.

  • Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Чтобы её активировать, необходим следующий фрагмент кода:

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

Итак, с чего же мы начнем.

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

<div>
    <span>I’m kinda the label!</span>
    <ul>
        <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, то он добавляется, а если этот класс уже присвоен, то он удаляется.

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

Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!

Пример 1

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

HTML-разметка

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

<div tabindex=»1″>
    <span>Пол</span>
    <ul>
        <li><a href=»#»>Мужской</a></li>
        <li><a href=»#»>Женский</a></li>
    </ul>
</div>

CSS

Давайте теперь перейдем к CSS. Начнем с обертки (враппера):

.wrapper-dropdown {
    /* размер и положение */
    position: relative; /* Enable absolute positioning for children and pseudo elements */
    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;  
}

Я думаю, мы все знаем, как создать маленький треугольник на CSS при помощи бордера (границы). Это конечно хак, но если он работает очень хорошо, так почему бы и нет? Там нет ничего особенного: маленькая белая стрелка справа.

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

.wrapper-dropdown-1 .dropdown {
    /* Size &amp; 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.

Теперь зададим стили для элементов списка:

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

  2. Далее, мы меняем направление и цвет маленькой стрелки.

  3. Затем мы изменим фон позади стрелки с помощью градиента.

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

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

Пример 2

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

HTML-разметка

<div>Регистрация
    <ul>
        <li><a href=»#»><i></i>Twitter</a></li>
        <li><a href=»#»><i></i>Github</a></li>
        <li><a href=»#»><i></i>Facebook</a></li>
    </ul>
</div>

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

CSS

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

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

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

.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 tabindex=»1″>
    <span>Транспорт</span>
    <ul>
        <li><a href=»#»><i></i>Почта</a></li>
        <li><a href=»#»><i></i>UPS доставка</a></li>
        <li><a href=»#»><i></i>Частный самолет</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 &amp; 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;
}

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

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

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

HTML-разметка

<div>Сделать
    <ul>
        <li><input type=»checkbox» name=»el-1″ value=»donut»><label for=»el-1″>Съесть пирожок</label></li>
        <li><input type=»checkbox» name=»el-2″ value=»neighbour»><label for=»el-2″>Следить за соседями</label></li>
        <li><input type=»checkbox» name=»el-3″ value=»T-rex»><label for=»el-3″>Покормить кота</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 &amp; 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, потому что мы должны немного сдвинуть его вниз из-за границы обертки.

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

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

Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.

У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.

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

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

Теперь стили для раскрытого состояния. Ничего нового здесь нет.

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

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

HTML-разметка

<div tabindex=»1″>Иван Иванов
    <ul>
        <li><a href=»#»><i></i>Профиль</a></li>
        <li><a href=»#»><i></i>Настройки</a></li>
        <li><a href=»#»><i></i>Выйти</a></li>
    </ul>
</div>

CSS

.wrapper-dropdown-5 {
    /* Size &amp; 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 &amp; 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? Потому что мы не знаем точную высоту раскрытого списка.

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

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

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

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

В этом нам поможет библиотека Modernizr. Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя.

Благодаря этому, мы можем «указать» браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS:

/* Нет поддержки CSS3 */
 
.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;
}

Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее.

Заключение.

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

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Как создать в HTML выпадающий список?

Приветствую вас, друзья и коллеги!

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

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

Навигация по статье:

Как сделать раскрывающийся список html

Для создания в html выпадающего списка существует тег <select>, который совместно с тегом <option>, позволяет создавать элементы интерфейса, содержащие перечень параметров в виде выпадающего списка с возможностью единичного или множественного выбора.

Перечень атрибутов для тега <select>:

autofocus – установка фокуса на элементе при загрузки страницы
disabled – отключение элемента
multiple – множественный выбор элементов раскрывающегося списка html
required – делает обязательным для заполнения
size – определяет высоту в закрытом состоянии. Задается числовым значением.
form – подключение к форме обратной связи
name – имя, для получения выбранного значения и передачи его в скрипт для обработки

Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>

Атрибуты для тега <option>:

disabled – позволят заблокировать пункт для выбора
label — дает возможность задать метку для элемента
selected – устанавливает пункт выбранным по умолчанию
value – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.

Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>

Пример самого простого раскрывающегося списка html:

Код:

<select>
<option>Опция 1</option>
<option>Опция 2</option>
</select>

<select>

  <option>Опция 1</option>

  <option>Опция 2</option>

</select>

Размер выпадающего элемента, то есть, количество отображаемых элементов зависит от заданного параметра size. В случае, если он не задан, то в раскрывающемся списке html отображается по умолчанию 1 элемент.

Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.

HTML выпадающий список с множественным выбором

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

<select multiple>
<option>Москва </option>
<option>Санкт-Петербург</option>
</select>

<select  multiple>

  <option>Москва </option>

  <option>Санкт-Петербург</option>

</select>

Выбор нескольких позиций осуществляется при помощи зажатой клавиши CTRL + клик указателем мышки по нужному элементу.

При использовании множественного выбора, атрибут size будет принимать значение, равное количеству пунктов.

Как задать выбранный пункт по умолчанию

В случае если вам нужно задать в html выпадающем списке опцию, которая будет отображаться по умолчанию, используем атрибут selected. Например:

<select name=»country»>
<option disabled>Выберите страну</option>
<option selected>Россия</option>
<option >Белоруссия</option>
</select>

<select name=»country»>

    <option disabled>Выберите страну</option>

    <option selected>Россия</option>

    <option >Белоруссия</option>

</select>

Обратите внимание. Если первый пункт раскрывающегося списка html задать с атрибутом disabled, то его можно использовать как подсказку или placeholder.

Как подключить раскрывающийся список html к форме

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

Атрибут name позволяет задать имя для <select>. Далее, заданное имя можно использовать в качестве переменной в скриптах.

Например:

<select name=»count» >
<option value=» Москва «>Москва</option>
<option value=» Казахстан «>Казахстан</option>
<option value=» Белоруссия «>Белоруссия</option>
</select>

<select name=»count» >

    <option value=» Москва «>Москва</option>

    <option value=» Казахстан «>Казахстан</option>

    <option value=» Белоруссия «>Белоруссия</option>

</select>

Далее, вы можете использовать полученные данные в php-функции. Например, вот так:

function dataSelect(a) {
n = a.count.selectedIndex
if(n) alert(«Страна: » + f.count.options[n].value)
}

function dataSelect(a) {

      n = a.count.selectedIndex

      if(n) alert(«Страна: » + f.count.options[n].value)

    }

Атрибут form дает нам возможность подключить наш раскрывающийся список html к какой-либо форме на нашем сайте, в случае если он находится вне тега <form>. В кавычках нужно указать идентификатор формы, к которой мы хотим подключить наш html выпадающий список.

Например:

<select form=»cont-form «>
<option value=»2″>2х2</option>
<option value=» 3 «>3х3</option>
<option value=» 4 «>4х4</option>
</select>

<select form=»cont-form «>

    <option value=»2″>2х2</option>

    <option value=» 3 «>3х3</option>

    <option value=» 4 «>4х4</option>

</select>

Где «cont-form» — это ID формы.

Надеюсь, данная статья поможет вам разобраться, как сделать в html выпадающий список для своего сайта. Если вам понравилась данная статья, не забудьте поделиться ею в социальных сетях и оставить комментарий. Так же вы можете заглянуть на мой YouTube-канал, где найдете много интересного материала по созданию сайтов и интернет магазинов.

Успехов вам в создании выпадающих списков!
До встречи в следующих статьях!

С уважением Юлия Гусарь

Выпадающий список. Справка

Тип поля: select — выпадающий список.

да

нет

Атрибут для поля выходных данных. Содержит имя поля выходных данных.

да

нет

Название выпадающего списка в интерфейсе.

нет

нет

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

зависит от длины подписи

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

Размер поля.

Допустимые значения: "S", "M", "L".

нет

CSS-класс для поля. Например: class="annotation".

нет

".field" ".field_type_select"

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

Направление, в котором раскрывается список:

  • mode="dropdown" — вниз.

  • mode="dropup" — вверх.

нет

Текст, который записывается в файл с выходными данными при выборе данного элемента.

нет

нет

Название элемента списка.

нет

нет

Элемент списка, который выбран по умолчанию:

  • selected=true — сделать элемент списка выбранным по умолчанию.

  • selected=false — оставить элемент списка невыбранным по умолчанию.

нет

HTML5 | Список select

Список select

Последнее обновление: 08.04.2016

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

Создадим выпадающий список:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label>
				<select name="phone">
					<option value="iphone 6s">iPhone 6S</option>
					<option value="lumia 950">Lumia 950</option>
					<option value="nexus 5x">Nexus 5X</option>
					<option value="galaxy s7">Galaxy S7</option>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Внутрь элемента select помещаются элементы option — элементы списка. Каждый элемент option содержит атрибут
value, который хранит значение элемента. При этом значение элемента option не обязательно должно совпадать с отображаемым им текстом. Например:

<option value="apple">iPhone 6S</option>

С помощью атрибута selected мы можем установить выбранный по умолчанию элемент — это необязательно должен быть первый элемент в списке:


<select name="phone">
	<option value="iphone 6s">iPhone 6S</option>
	<option value="lumia 950">Lumia 950</option>
	<option value="nexus 5x" selected>Nexus 5X</option>
</select>

С помощью другого атрибута disabled можно запретить выбор определенного элемента. Как правило, элементы с этим атрибутом служат для создания заголовков:


<select name="phone">
	<option disabled selected>Выберите модель</option>
	<option value="iphone 6s">iPhone 6S</option>
	<option value="lumia 950">Lumia 950</option>
	<option value="nexus 5x" selected>Nexus 5X</option>
</select>

Для создания списка с множественным выбором к элементу select надо добавить атрибут multiple:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label> <br/>
			
				<select multiple name="phone">
					<option value="iphone 6s">iPhone 6S</option>
					<option value="lumia 950">Lumia 950</option>
					<option value="nexus 5x">Nexus 5X</option>
					<option value="galaxy s7">Galaxy S7</option>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Зажав клавишу Ctrl, мы можем выбрать в таком списке несколько элементов:

Select также позволяет группировать элементы с помощью тега <optgroup>:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label>
			
				<select name="phone">
					<optgroup label="Apple">
						<option value="iphone 6s">iPhone 6S</option>
						<option value="iphone 6s plus">iPhone 6S Plus</option>
						<option value="iphone 5se">iPhone 5SE</option>
					</optgroup>
					<optgroup label="Microsoft">
						<option value="lumia 950">Lumia 950</option>
						<option value="lumia 950 xl">Lumia 950 XL</option>
						<option value="lumia 650">Lumia 650</option>
					</optgroup>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Использование групп элементов применимо как к выпадающему списку, так и к списку со множественным выбором.

Тег HTML выпадающий список

Тег <select> в HTML используется для создания выпадающего списка в HTML форме.

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name), содержащая значение выбранного пункта списка. Если в выбранном пункте списка <option> есть атрибут value, то значением считается его содержимое, в противном случае значением считается содержимое тега <option>.

Синтаксис

<select>элементы списка</select>

Примеры использования выпадающего списка <select> в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

Простой HTML выпадающий список

СинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код простого выпадающего списка

<select name="user_profile_color_1">
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Выпадающий список с выбором нескольких значений

Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple. Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size.

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».

NissanToyotaBMWWolksvagenSkodaMercedes-Benz

HTML код выпадающего списка с выбором нескольких значений

<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>

Раскрывающийся список с группами пунктов

Пункты в HTML списке select можно группировать с помощью тега <optgroup>. Название группы не доступно для выбора, служит для удобства пользователей.

МоскваСанкт-ПетербургНовосибирскКиевХарьковЛьвовМинскБобруйскГомель

HTML код раскрывающегося списка с группами пунктов

<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.

Выберите значениеСинийЗеленыйЖелтыйКрасныйОранжевыйЧерный

HTML код выпадающего списка обязательного для выбора (заполнения)

<select name="user_profile_color_2" required="required">
<option value="">Выберите значение</option>
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Поддержка браузерами

Атрибуты тега select









АтрибутЗначенияОписание
autofocusне указывается / autofocus

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.

disabledне указывается / disabled

Логический атрибут. Если указан, делает список неактивным.

Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).

formid формы

Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы.

Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.

multipleне указывается / multiple

Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.

nameтекст

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

requiredне указывается / required

Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.

Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.

sizeчисло

Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.

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

Тег <select> также поддерживает глобальные HTML атрибуты.

Переход при выборе пункта из выпадающего списка

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

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

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

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

В третьей сточке у нас указывается имя функции («linklist» в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.

Далее вставляем сам код выпадающего списка.

<form name="menu">
<select name="sel" onChange="linklist(document.menu.sel)">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
</select>
</form>

Имя формы (<form name=»имя_формы»>) и имя списка (<form name=»имя_списка» … >) указываются произвольными, главное чтобы были уникальными. Самое важное — не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):

onChange=»имя_функции(document.имя_формы.имя_списка)»

В нашем случае onChange=»linklist(document.menu.sel)»

Если прописать тэгу элемента (<option>)списка атрибут target=»new», то ссылка будет открываться в новом окне (пятая строчка).

В атрибуте title=»…» указываем всплывающую подсказку для ссылки (точно так же, как для тэга <a>).

Так же можно сделать, чтобы переход по ссылке осуществлялся не сразу, а после нажатия кнопки. Скрипт остается тем же самым:

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

А в коде списка меняем событие OnChange на OnClick

<form name="menu">
<select name="sel">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход">
</select>
</form>

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

И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме «Без редактора».

Скрипт для выпадающего списка — Блог Костаневича Степана

Всем привет!
Решил сегодня выложить маленький, готовый скрипт для выпадающего списка.
В чем же заключается сама фишка скрипта? В том, что при выборе пункта из списка, меняется соответствующая картинка. Вот, например, из списка выбираете пункт «metallica» и появляется соответствующая картинка группы.
Я думаю, вы найдете хорошее применение этого скрипта у себя на сайте.
Итак, сам код:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>скрипт на блоге BlogGood.ru</title>
</head>
<body>
<div>
<select onchange="document.getElementById('image').src=this.value">
<option value="metallica.jpg">Metallica</option>
<option value="pod.jpg">P.O.D.</option>
<option value="type-o-negative.png">Type o negative</option>
<option value="helloween.png">helloween</option>
</select>
</div>
<br>
<div><img src="metallica.jpg" alt=""></div>
</body>
</html>

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

Результат скрипта можете посмотреть вот тут:

MetallicaP.O.D.Type o negativehelloween

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html, javascript, для сайта, эффекты для сайта

: HTML-элемент Select — HTML: HyperText Markup Language

HTML-элемент . Ему дается атрибут id , чтобы его можно было связать с для целей доступности, а также атрибут name для представления имени связанной точки данных, отправленной на сервер.Каждая опция меню определяется элементом , вложенным в имеет некоторые уникальные атрибуты, которые вы можете использовать для управления им, например, , несколько , чтобы указать, можно ли выбрать несколько параметров, и размер , чтобы указать, сколько параметров должно отображаться одновременно. Он также принимает большинство атрибутов ввода общей формы, таких как требуется , отключено , автофокус и т. Д.

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

Дополнительные примеры см. В разделе Виджеты собственных форм: раскрывающееся содержимое.

Этот элемент включает глобальные атрибуты.

автозаполнение

DOMString , предоставляющая подсказку для функции автозаполнения пользовательского агента. См. Атрибут автозаполнения HTML для получения полного списка значений и подробностей о том, как использовать автозаполнение.

автофокус

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

отключен

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

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

форма

Элемент

, чтобы связать связан со своим предком

элементом, если таковой имеется.)

Этот атрибут позволяет связать элементы с атрибутом multiple :

Пользователи мыши могут удерживать клавиши Ctrl , Command или Shift (в зависимости от того, что имеет смысл для вашей операционной системы), а затем щелкать несколько параметров, чтобы выбрать / отменить их.

Предупреждение: Механизм выбора нескольких несмежных элементов с помощью клавиатуры, описанный ниже, в настоящее время работает только в Firefox.

В macOS ярлыки Ctrl + Up и Ctrl + Down конфликтуют с ярлыками ОС по умолчанию для Mission Control и Application windows , поэтому вам придется отключить их, прежде чем он Работа.

Пользователи клавиатуры могут выбрать несколько смежных элементов:

  • Сосредоточившись на элементе (например,грамм. с использованием
    Выступ
    ).
  • Удерживая
    Ctrl
    ключ, затем используя
    вверх
    а также
    вниз
    клавиши курсора для изменения «сфокусированного» варианта выбора, то есть того, который будет выбран, если вы решите это сделать. Вариант выбора «с фокусом» выделяется пунктирным контуром так же, как и ссылка с фокусом на клавиатуре.
  • Нажатие
    Космос
    для выбора / отмены выбора «сфокусированных» опций выбора.

Элемент сложна, и ее трудно контролировать. Если вы хотите получить полный контроль, вам следует рассмотреть возможность использования библиотеки с хорошими возможностями для стилизации виджетов форм или попробовать развернуть собственное раскрывающееся меню с использованием несемантических элементов, JavaScript и WAI-ARIA для обеспечения семантики.

Для получения дополнительной информации о стилизации .

Базовый выбор

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

Расширенный выбор с несколькими функциями

Следующий пример более сложен и демонстрирует дополнительные функции, которые вы можете использовать в элементе

Вы увидите, что:

  • Можно выбрать несколько опций, потому что мы включили множественный атрибут .
  • Атрибут размера вызывает одновременное отображение только 4 строк; вы можете прокрутить, чтобы просмотреть все варианты.
  • Мы включили элементов , чтобы разделить параметры на разные группы. Это чисто визуальная группировка, ее визуализация обычно состоит из имени группы, выделенного жирным шрифтом, и отступа параметров.
  • Параметр «Хомяк» включает отключенный атрибут и поэтому не может быть выбран вообще.

Настройка стилей выбора

В этом примере показано, как можно использовать некоторые CSS и JavaScript для предоставления расширенных пользовательских стилей для блока ( s) в родительскую оболочку и повторно реализует стандартное ожидаемое поведение с использованием дополнительных элементов HTML и JavaScript. Это включает в себя базовое поведение вкладок для обеспечения доступности клавиатуры.

  • Сопоставляет некоторые стандартные атрибуты с атрибутами данных новых элементов для управления состоянием и CSS.

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

    HTML 
      <форма>
 
    
     Стандартные элементы управления 
    <выберите
       name = 1A
       id = выберите
       autocomplete = off
       требуется
       >
       
       
       
       
    
 
    
 
    
     Пользовательские элементы управления 
    <выберите
       name = "2A"
      
       autocomplete = "выкл"
       требуется
       >
    CSS 
      кузов {
  семейство шрифтов: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}

.select: focus {
  цвет границы: синий;
}

html body form fieldset # custom div.select [data-multiple] div.header {
  дисплей: нет;
}

html body form fieldset # custom div.select div.header {
  содержание: '↓';
  отображение: -webkit-inline-box;
  дисплей: -ms-inline-flexbox;
  дисплей: встроенный гибкий;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  отступ: 0;
  положение: относительное;
}

html body form fieldset # custom div.select div.header :: after {
  содержание: '↓';
  выровнять себя: растянуть;
  дисплей: гибкий;
  выровнять контент: центр;
  justify-content: center;
  justify-items: center;
  align-items: center;
  обивка:.5em;
}

html body form fieldset # custom div.select div.header: hover: after {
  цвет фона: синий;
}

.select .header select {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;
  семейство шрифтов: наследовать;
  размер шрифта: наследовать;
  отступ: 0;
  ширина границы: 0;
  ширина: 100%;
  гибкость: 1;
  дисплей: нет;
}

.select .header select optgroup {
  дисплей: нет;
}

.select select div.option {
  дисплей: нет;
}

html body form fieldset # custom div.select {
  выбор пользователя: нет;
  размер коробки: рамка-рамка;
  положение: относительное;
  радиус границы: 4 пикселя;
  стиль границы: сплошной;
  ширина границы: 0;
  цвет границы: серый;
  ширина: авто;
  дисплей: встроенный блок;
}

html body form fieldset # custom div.select: focus {
  цвет границы: синий;
}

html body form fieldset # custom div.select:hover {
  цвет границы: синий;
}

html body form fieldset # custom div.select [data-open] {
  граница-нижний-левый-радиус: 0;
  граница-нижний-правый-радиус: 0;
}

html body form fieldset # custom div.select [открытие данных] datalist {
  дисплей: начальный;
}

html body form fieldset # custom div.select datalist {
  -webkit-appearance: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;
  позиция: абсолютная;
  стиль границы: сплошной;
  ширина границы: 1px;
  цвет границы: серый;
  слева: 0;
  дисплей: нет;
  ширина: 100%;
  размер коробки: рамка-рамка;
  z-индекс: 2;
  граница-нижний-левый-радиус: 4px;
  граница-нижний-правый-радиус: 4px;
}

html body form fieldset # custom div.выберите datalist div.option {
  цвет фона: белый;
  нижнее поле: 1px;
  курсор: указатель;
  заполнение: 0.5em;
  ширина границы: 0;
}

html body form fieldset # custom div.select datalist div.option: hover {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.select datalist div.option: focus {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.select datalist div.option: checked {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.выберите div.optgroup div.option [данные отключены] {
  цвет: серый;
}

html body form fieldset # custom div.select div.optgroup div.option [данные проверены] {
  цвет фона: синий;
  цвет белый;
}

html body form fieldset # custom div.select div.optgroup div.label {
  font-weight: жирный;
}

html body form fieldset # custom div.select div.optgroup div.option div.label {
  шрифт: нормальный;
  набивка: .25em;
}

html body form fieldset # custom div.select div.header {
  гибкость: 1;
  дисплей: гибкий;
  ширина: авто;
  размер коробки: рамка-рамка;
  ширина границы: 1px;
  стиль границы: наследование;
  цвет границы: наследовать;
  граница-радиус: наследовать;
}

html body form fieldset # custom div.выберите div.header span {
  гибкость: 1;
  заполнение: .5em;
}
    JavaScript 
      const selects = custom.querySelectorAll ('выбрать');
for (const select of selects) {
    const div = document.createElement ('div');
    const header = document.createElement ('div');
    const datalist = document.createElement ('datalist');
    const optgroups = select.querySelectorAll ('optgroup');
    const span = document.createElement ('диапазон');
    const options = select.options;
    const parent = выберите.parentElement;
    const multiple = select.hasAttribute ('несколько');
    const onclick = function (e) {
        const disabled = this.hasAttribute ('данные отключены');
        select.value = this.dataset.value;
        span.innerText = this.dataset.label;
        если (отключено) возврат;
        if (multiple) {
            if (e.shiftKey) {
                const checked = this.hasAttribute ("данные проверены");
                if (проверено) {
                    this.removeAttribute ("данные проверены");
                } еще {
                    это.setAttribute ("данные проверены", "");
                };
            } еще {
                const options = div.querySelectorAll ('. option');
                for (i = 0; i
    Результат

    Таблицы BCD загружаются только в браузере

    Выпадающая навигация CSS, вызывающая перемещение содержимого HTML

    Мой первый вопрос по SO, надеюсь, он на высоте, должен быть простым решением для тех, кто хорошо разбирается в искусстве css...

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

    Самое близкое, что мне удалось получить, это добавить position: absolute; в тег #nav li: hover ul , и это действительно останавливает перемещение содержимого, но создает новую проблему, выпадающее подменю отображается только тогда, когда указатель мыши находится над элементом меню верхнего уровня и пытается переместиться при перемещении мыши по подменю оно исчезает... еще одна проблема, которую мне не менее сложно решить ...

    html для навигации - стандартные вложенные списки:

    и соответствующий css:

      #navigation_panel {border-radius: 18px 18px 0 0 / 18px 18px 0 0; ширина: 900 пикселей; height: 50px;}

#nav {маржа: 0; отступ: 0; стиль списка: нет;}
#nav a {цвет: черный; размер шрифта: 20 пикселей; текстовое оформление: нет; минимальная высота: 50 пикселей; width: 95px;}
#nav li {выравнивание текста: центр; плыть налево; отступ: 14px 8px; курсор: указатель; width: 95px;}
#nav li.последняя {ширина: 99 пикселей;}

#nav li ul {маржа-верх: 14px; маржа слева: -8 пикселей; отступ: 0; дисплей: нет; стиль списка: нет;}
#nav li ul li {граница: 1px сплошной черный; ширина: 95 пикселей; padding: 6px 8px;}
#nav li ul li a {/ * font-family: arial; * / font-size: 14px;}

#nav li: hover {украшение текста: подчеркивание; }
#nav li: hover ul {display: block;}
#nav li: hover ul li {clear: left;}

    Я пытался найти решения по обычному маршруту (поиск в Google, SO и т. Д.), А также поигрался с различными конфигурациями позиционирования, но я просто не могу решить эту проблему...
    Заранее спасибо за любую помощь, эта проблема сводила меня с ума весь день!

    Научитесь создавать и стилизовать с помощью CSS

    Как создать раскрывающийся список выбора HTML с параметрами

    Тег . Вот как вы можете создать раскрывающийся список, например.грамм.

    Вот как вы можете создать раскрывающийся список, например

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

    Вы также можете указать класс CSS вместо использования ID для стилизации раскрывающегося списка вариантов выбора.

    В следующем разделе я покажу вам примеры использования раскрывающегося списка HTML от выбора единственного параметра до его использования с JavaScript / jQuery.Пример также включает стилизацию HTML-тега select с помощью CSS / CSS3, Bootstrap framework. Позвольте мне начать с базового примера создания простого раскрывающегося списка.

    Пример создания простого select-option

    В этом примере тег

    Использование атрибута значения

    Вы можете использовать атрибут value в теге используется следующий код:

    Пример доступа к выбранной опции в JavaScript

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

    См. Онлайн-демонстрацию и код

    Для создания раскрывающегося списка

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

    Вот как его значение доступно в коде jQuery:

    var selectedcolor = $ ('# jqueryselect option: selected').текст();

    См. Полный код jQuery и разметку на демонстрационной странице.

    Аналогично, вы можете получить доступ к значению, используя метод jQuery $ .val () :

    var selectedcolor = $ ('# jqueryselect'). Val (); ();

    Замените эту строку в приведенном выше примере, и она отобразит шорткод / ​​значение цвета в значении атрибута довольно видимого текста.

    Пример получения значения в PHP-скрипте

    В этом примере получения значения выбранной опции раскрывающегося списка HTML создается форма с тегом

    < p>

    И вот как скрипт PHP используется для получения значения:

    if ($ _POST ["selphp"]! = "")

    {

    echo "Вы выбрали следующий цвет: ".$ _POST ["selphp"]. "";

    }

    ?>

    Если вы указали метод «get» в форме, вы можете использовать PHP-массив $ _GET [«»] .

    Стилизация раскрывающегося списка с помощью CSS

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

    Используя несколько атрибутов, пользователь может выбрать более одной опции, нажав клавишу ctrl , как при использовании платформы Windows.

    Просмотрите демонстрацию онлайн, щелкнув по ссылкам ниже:

    См. Онлайн-демонстрацию и код

    Используйте платформу Bootstrap и подключаемый модуль для создания красивых раскрывающихся списков

    Если вы используете фреймворк Bootstrap, то есть хорошие плагины для создания классных выпадающих списков.

    Одним из таких подключаемых модулей является Bootstrap-Select , который описывается здесь. Он добавляет полезные функции в раскрывающиеся списки по умолчанию. Например, вы можете искать варианты, добавляя текстовое поле. Это особенно полезно, если в раскрывающемся списке есть много вариантов.

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

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

    Слева направо, вот начальный вид он все равно подберет индивидуальные стили браузера для списка option . Это нормально - мы можем справиться с этим, чтобы сохранить бесплатную доступность нативного выбора!

    Базовый HTML #

    Для начала мы сосредоточимся на одном







    Метка не является частью нашего упражнения по стилизации, но она включена в качестве общего требования, особенно с для атрибута , имеющего значение id на .

    С clip-path мы получаем четкое масштабируемое «изображение» стрелки, которое ощущается как SVG, но с преимуществами возможности использовать нашу настраиваемую переменную и содержаться в стиле по сравнению с разметкой HTML.

    Чтобы создать стрелку, мы определим ее как псевдоэлемент :: after .

      .select :: after {
     content: ""; 
     ширина: 0.8em; 
     высота: 0,5 мм; 
     background-color: var (- стрелка выбора); 
     clip-path: многоугольник (100% 0%, 0 0%, 50% 100%); 
    }

    Синтаксис clip-path немного странный, и, поскольку он не является предметом внимания данной статьи, я рекомендую следующие ресурсы:

    • Колби Фэйок объясняет синтаксис на примере в этом видео про яйцеголовых
    • Clippy - это онлайн-инструмент, который позволяет вам выбирать форму и настраивать точки, динамически генерируя clip-path CSS

    Если вы следите по тексту, то, возможно, заметили, что стрелка не появляется, несмотря на определение ширины и высоты .При осмотре было обнаружено, что :: после фактически не допускается его ширина.

    Мы решим эту проблему, обновив наш .select , чтобы использовать макет сетки CSS.

     . Выбрать {
     дисплей: сетка; 
    }

    Это позволяет стрелке появляться, существенно расширяя ее отображаемое значение, подобное «блоку».

    На этом этапе мы можем проверить, действительно ли мы создали треугольник.

    Чтобы исправить выравнивание, мы воспользуемся моим любимым приемом CSS-сетки (старая шляпа для вас, если вы читали здесь несколько статей!).

    Старое решение CSS: позиция: абсолютная
    Новое решение CSS: одна grid-template-area , содержащая их все

    .

    Сначала мы определим нашу область, а затем определим, что выбирает и :: после используют его. Имя привязано к элементу, для которого он создан, и мы упростим его, назвав его "select":

      .select {
     grid-template-sizes: "select"; 
    } 
     select, 
     .select: после {
     grid-area: select; 
    }

    Что дает нам перекрытие стрелки над собственным выбором из-за контекста стекирования через исходный порядок:

    Теперь мы можем использовать свойства сетки, чтобы завершить выравнивание каждого элемента:

     .выберите {
     align-items: center; 
    } 
     .select: после {
     justify-self: end; 
    }

    Та-да!

    : фокус Состояние #

    Ах да - помните, как мы удалили контур ? Нам нужно исправить отсутствующее состояние : focus , чтобы оно не пропало.

    В ближайшее время мы могли бы использовать свойство под названием : focus-within , но на данный момент все же лучше включить для него полифилл.

    В этом уроке мы будем использовать альтернативный метод, который дает тот же результат, только немного посильнее.

    К сожалению, это означает, что нам нужно добавить еще один элемент в DOM.

    После собственного элемента select в качестве последнего дочернего элемента в пределах . Выберите , добавьте:

    Почему после? Поскольку, поскольку это чистое решение CSS, размещение его после собственного выбора означает, что мы можем изменить его, когда select сфокусирован, используя соседний родственный селектор - + .

    Это позволяет нам создать следующее правило:

      выберите: focus +.фокус {
     позиция: абсолютная; 
     верх: -1px; 
     слева: -1px; 
     справа: -1px; 
     bottom: -1px; 
     граница: сплошная 2px var (- select-focus); 
     border-radius: наследовать; 
    }

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

    Причина в том, чтобы избежать пересчета корректировок на основе заполнения. Если вы попробуете это самостоятельно, вы увидите, что даже установка ширины и высоты на 100% по-прежнему заставляет его сидеть внутри отступа.

    Задание position: absolute лучше всего соответствует размеру элемента. Мы растягиваем лишний пиксель в каждом направлении, чтобы убедиться, что он перекрывает свойство границы.

    Но нам нужно сделать еще одно добавление к .select , чтобы гарантировать, что оно относительно нашего выбора по ... ну, position: relative .

      .select {
     позиция: относительная;

    А вот и все вместе, как показано в Chrome:

    Множественный выбор #

    Selects имеет второй вариант, который позволяет пользователю выбрать более одного варианта.С точки зрения HTML это просто означает добавление атрибута multiple , но мы также добавим класс для помощи в создании настроек стиля под названием select - multiple :

    .

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

    Это быстрое исправление для настройки нашего селектора, определяющего стрелку. Мы используем : not () , чтобы исключить наш недавно определенный класс:

      .select: not (.select - multiple) :: после

    У нас есть пара незначительных корректировок для множественного выбора, первая - это удаление отступов, которые были ранее добавлены, чтобы освободить место для стрелки:

      выберите [несколько] {
     отступ справа: 0; 
    }

    По умолчанию параметры с длинным значением будут выходить за пределы видимой области и будут обрезаны, но я обнаружил, что основные браузеры позволяют переопределить перенос, если вы хотите:

      выберите [несколько] вариант {
     пробел: нормальный; 
    }

    При желании мы можем установить высоту для выбора, чтобы обеспечить более надежное кроссбраузерное поведение.В ходе тестирования я узнал, что Chrome и Firefox будут отображать частичный вариант, но Safari полностью скроет параметр, который не может быть полностью отображен.

    Высота должна быть установлена ​​непосредственно в собственном выборе. Учитывая наши другие стили, значение 6rem сможет показать 3 варианта:

      выберите [несколько] {
     высота: 6 бэр; 
    }

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

    Состояние : selected для параметров довольно легко настраивается в Chrome, в некоторой степени в Firefox и совсем не в Safari. См. Демонстрацию CodePen для раздела, который можно раскомментировать для предварительного просмотра.

    : отключено стилей #

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

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

      .select - отключено {
     курсор: запрещено; 
     цвет фона: #eee; 
     background-image: linear-gradient (вверх, #ddd, #eee 33%); 
    }

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

    Это приводит к следующим выступлениям:

    Демо #

    Вы можете протестировать это самостоятельно, но вот предварительный просмотр полного решения (слева) в Firefox, Chrome и Safari:

    Стефани Эклс (@ 5t3ph)

    10 бесплатных фрагментов окна выбора CSS и JavaScript

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

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

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

    Панель инструментов веб-дизайнера

    Неограниченное количество загрузок: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!

    1.Пользовательское меню выбора

    Началом коллекции являются пользовательские стили меню выбора Уоллеса Эрика.

    Он использует как CSS для рестайлинга, так и JavaScript для настройки UX меню. Они ведут себя немного иначе, чем стандартные элементы HTML, и я думаю, что их немного удобнее использовать.

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

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

    2. Простой выбор

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

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

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