Предлагаем вашему вниманию меню с выбором элементов. Существует много возможностей, и сегодня мы изучаем некоторые варианты того, как позволить пользователю сделать выбор на свой вкус.
Демо ИсходникиСегодня мы хотели бы поделиться с вами идеями по созданию выпадающего меню с выбором вариантов. В формах, где мы хотели бы использовать пользовательские стили для входных элементов, мы можем использовать библиотеки JavaScript, которые преобразуют HTML элементы в структуру, которая позволит нам сделать стили лучше, особенно для более сложных материалов, таких как элементы выбора.
Для демонстрационных результатов в наших примерах мы используем очень сырой сценарий, где обычные элементы выбора могут быть доступны с помощью клавиши TAB.
Обратите внимание, что некоторые стили являются экспериментальными, с единственной целью показать что это возможно реализовать (в современных браузерах).
В демо мы используем иконки из следующих наборов значков: Ionicons, Font Awesome, Linecons and Maki.
Давайте взглянем на наш обычный сценарий выбора. Имеются select элементы вроде этих:
<select class="cs-select cs-skin-rotate"> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
…теперь трансформируем это в эту структуру:
<div class="cs-select cs-skin-rotate"> <span class="cs-placeholder">Choose your option</span> <div class="cs-options"> <ul> <li data-option data-value="1" class="cs-selected"><span>Option 1</span></li> <li data-option data-value="2"><span>Option 2</span></li> <li data-option data-value="3"><span>Option 3</span></li> </ul> </div> <select class="cs-select cs-skin-rotate"> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div>
Доступны следующие опции:
newTab : true, // открывать ссылки в новой вкладке (когда data-link используются в опции) stickyPlaceholder : true, // при открытии выбирается элемент, по умолчанию (если таковые имеются) onChange : function( val ) { return false; } // обратный вызов при изменении значения
Основные стили для наших примеров находятся в cs-select.css. Здесь мы определяем некоторые необходимые стили для создания пользовательского выбора, похожего на обычное выпадающее меню. Пример для конкретной оболочки заключается в следующем:
@font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot?-rdnm34'); src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'), url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'), url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg'); font-weight: normal; font-style: normal; } div.cs-skin-border { background: transparent; font-size: 2em; font-weight: 700; max-width: 600px; } @media screen and (max-width: 30em) { .cs-skin-border { font-size: 1em; } } .cs-skin-border > span { border: 5px solid #000; border-color: inherit; transition: background 0.2s, border-color 0.2s; } .cs-skin-border > span::after, .cs-skin-border .cs-selected span::after { font-family: 'icomoon'; content: '\e000'; } .cs-skin-border ul span::after { content: ''; opacity: 0; } .cs-skin-border .cs-selected span::after { content: '\e00e'; color: #ddd9c9; font-size: 1.5em; opacity: 1; transition: opacity 0.2s; } .cs-skin-border.cs-active > span { background: #fff; border-color: #fff; color: #2980b9; } .cs-skin-border .cs-options { color: #2980b9; font-size: 0.75em; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; } .cs-skin-border.cs-active .cs-options { opacity: 1; transition: opacity 0.2s; } .cs-skin-border ul span { padding: 1em 2em; backface-visibility: hidden; } .cs-skin-border .cs-options li span:hover, .cs-skin-border li.cs-focus span { background: #f5f3ec; }Демо Исходники
Взгляните на демо, и вы увидите примеры того, как некоторые обычные элементы выбора могут быть стилизованы.
Надеемся, вам понравилось!
Источник урока: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!