Стилизация выпадающего списка для сайта

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

Данные решения будут разработаны с помощью небольшого плагина jQuery, Шрифт и значки были созданы с помощью ресурса icomoon.io. И так, приступим.

Шаг 1. HTML

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

<select id="cd-dropdown" class="cd-select">
 <option value="-1" selected>Выберите любимое животное</option>
 <option value="1" class="icon-monkey">Обезьяна</option>
 <option value="2" class="icon-bear">Мишка</option>
 <option value="3" class="icon-squirrel">Белка</option>
 <option value="4" class="icon-elephant">Слоник</option>
</select>

После этого нам необходимо подключить сам плагин.

$( '#cd-dropdown' ).dropdown();

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

<div class="cd-dropdown">
 <span>Выберите любимое животное</span>
 <input type="hidden" name="cd-dropdown">
 <ul>
 <option value="1" class="icon-monkey">Обезьяна</option>
 <option value="2" class="icon-bear">Мишка</option>
 <option value="3" class="icon-squirrel">Белка</option>
 <option value="4" class="icon-elephant">Слоник</option>
 </ul>
</div>

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

Опции

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

speed : 300,
easing : 'ease',
gutter : 0,

// Начальный stack эффект
stack : true,

// Задержка между каждой опцией анимации
delay : 0,

// Случайным варианты позиции углов
random : false,

// Вращаем [right || left || false]: варианты будут вращаться с правой стороны или с левой стороны
// Убедитесь, что режим вращения находиться в таблице стилей
rotated : false,

// Эффек скольжения в опциях
//Значение полей, которые начинаются..
slidingIn : false

Общий стиль определяется в файле common.css, кроме этого вы можете посмотреть индивидуальные стили в styleN.css.

Вот и все. Готово!

Материал взят из зарубежного источника - tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists и представлен исключительно в ознакомительных целях.