Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

Шаг 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.

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

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

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


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

Библиотека анимационных эффектов перехода, основанная на анимации CSS.


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

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


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

Любой вебразработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close