Крутые идеи для выпадающего меню

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

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

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

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

В демо мы используем иконки из следующих наборов значков: Ionicons, Font Awesome, Linecons and Maki.
Давайте взглянем на наш обычный сценарий выбора. Имеются select элементы вроде этих:

<select class="cs-select cs-skin-rotate">
 <option value="" disabled selected>Choose your option</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
</select>

…теперь трансформируем это в эту структуру:

<div class="cs-select cs-skin-rotate">
 <span class="cs-placeholder">Choose your option</span>
 <div class="cs-options">
 <ul>
 <li data-option data-value="1" class="cs-selected"><span>Option 1</span></li>
 <li data-option data-value="2"><span>Option 2</span></li>
 <li data-option data-value="3"><span>Option 3</span></li>
 </ul>
 </div>
 <select class="cs-select cs-skin-rotate">
 <option value="" disabled selected>Choose your option</option>
 <option value="1">Option 1</option>
 <option value="2">Option 2</option>
 <option value="3">Option 3</option>
 </select>
</div>

Доступны следующие опции:

newTab : true,
// открывать ссылки в новой вкладке (когда data-link используются в опции)

stickyPlaceholder : true,
// при открытии выбирается элемент, по умолчанию (если таковые имеются)

onChange : function( val ) { return false; }
// обратный вызов при изменении значения

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

@font-face {
 font-family: 'icomoon';
 src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
 src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
 url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
 url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
 url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

div.cs-skin-border {
 background: transparent;
 font-size: 2em;
 font-weight: 700;
 max-width: 600px;
}

@media screen and (max-width: 30em) {
 .cs-skin-border { font-size: 1em; }
}

.cs-skin-border > span {
 border: 5px solid #000;
 border-color: inherit;
 transition: background 0.2s, border-color 0.2s;
}

.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
 font-family: 'icomoon';
 content: '\e000';
}

.cs-skin-border ul span::after {
 content: '';
 opacity: 0;
}

.cs-skin-border .cs-selected span::after {
 content: '\e00e';
 color: #ddd9c9;
 font-size: 1.5em;
 opacity: 1;
 transition: opacity 0.2s;
}

.cs-skin-border.cs-active > span {
 background: #fff;
 border-color: #fff;
 color: #2980b9;
}

.cs-skin-border .cs-options {
 color: #2980b9;
 font-size: 0.75em;
 opacity: 0;
 transition: opacity 0.2s, visibility 0s 0.2s;
}

.cs-skin-border.cs-active .cs-options {
 opacity: 1;
 transition: opacity 0.2s;
}

.cs-skin-border ul span {
 padding: 1em 2em;
 backface-visibility: hidden;
}

.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
 background: #f5f3ec;
}

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

Источник урока: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/