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


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

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

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

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

Шаг 1. HTML

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

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

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

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

Опции

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

 

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

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

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

Previous Вертикальное многоуровневое меню для сайта
Next Подборка php библиотек

Suggested Posts

Оформление карт Google под себя

Адаптивный шаблон OpenCart — Calcio

20 свежайших JQuery плагинов для улучшения интерфейса

OpenCart 2.2 — пять свежих адаптивных шаблонов от pavothemes

Адаптивный шаблон для Opencart — Fastor 2.0

Новый плагин для защиты WordPress — iThemes Security