Автор

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

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


 

Выпадющие списки часто встречаются в структуре современного сайтостроения, это не удивительно, ведь это не только эффективно с точки зрения организации материала на сайте, сохранения места на сайте, но и эффектно выглядит. Зачастую списки стилизую достаточно просто. Они не радуют взор, и не привлекают внимание. В данном уроке мы рассмотрим как можно стилизовать выпадающие списки 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



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

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

Сегодняшний ресурс - это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.


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

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


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

Это наверое самый интересный проект на сегодняшний день. Сайт создавался в двух версиях: английской и русской. Использовался американский хостинг, так как сайт рассчитан в первую очередь на американских клиентов и английская версия основная!


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

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


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

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


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

Надёжный хостинг

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

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


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close