Автор

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

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


 

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

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

Мы выбрали лучшие 5 инфографических создателей, доступных в Интернете, для анализа их возможностей и планов.


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

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


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

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


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

Навигационное меню использующее новые возможности CSS3 (изображения и javascript не используются). Эффекты можно наблюдать только в последних webkit браузерах.


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close