Простые эффекты для выпадающего списка

1 ответ(ов) в теме
moto
не в сети 8 часов
На сайте с 12.03.2017
Администратор
Тем 3411
Сообщения 13605
0
18:35

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

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

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

Без JavaScript будет выводиться обычный выпадающий список.

DEMO: ссылка

Исходники: тыЦ

В качестве основы демонстрации воспользуемся элементом select:
<select id="cd-dropdown" class="cd-select"><br> <option value="-1" selected>Выберите любимого зверя</option><br> <option value="1" class="icon-monkey">Обезьяна</option><br> <option value="2" class="icon-bear">Медведь</option><br> <option value="3" class="icon-squirrel">Белка</option><br> <option value="4" class="icon-elephant">Слон</option><br></select>

Плагин подключается просто:
$( '#cd-dropdown' ).dropdown();

Элемент select трансформируется в следующую структуру:
<div class="cd-dropdown"><br> <span>Выберите любимого зверя</span><br> <input type="hidden" name="cd-dropdown"><br> <ul><br> <li data-value="1"><span class="icon-monkey">Обезьяна</span></li><br> <li data-value="2"><span class="icon-bear">Медведь</span></li><br> <li data-value="3"><span class="icon-squirrel">Белка</span></li><br> <li data-value="4"><span class="icon-elephant">Слон</span></li><br> </ul><br></div>

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

Опции

Для плагина доступны следующие опции:
speed : 300,<br>easing : 'ease',<br>gutter : 0,<br> <br>// Эффект складывания в стопку<br>stack : true,<br> <br>// Задержка между анимациями пунктов<br>delay : 0,<br> <br>// Случайный угол и позиционирование для опций<br>random : false,<br> <br>// rotated [right || left || false]: опции будут вращаться вправо или влево<br>// Нужно установить свойство transform-origin в таблице стилей<br>rotated : false,<br> <br>// Эффект выскальзывания<br>// Значение - ширина поля для начала движения<br>slidingIn : false

Основные стили определены в файле common.css, а специфические правила определяются для каждой демонстрации в файлах styleN.css.

источник

Редакции сообщения
0

Ваше имя *

Ваш E-mail *

не публикуется

Текст сообщения *