Поле со списком, называемое еще ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек, в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создается следующим образом.
Пункт 1 Пункт 2
Тег выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега , который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри . Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift и раскрывающийся список.
Атрибуты тегаРассмотрим атрибуты тега , с помощью которых можно изменять представление списка.
multipleНаличие multiple сообщает браузеру отображать содержимое элемента как список множественного выбора. Конечный вид списка зависит от используемого атрибута size . Если он отсутствует, то высота списка равна количеству пунктов, если значение size меньше числа пунктов, то появляется вертикальная полоса прокрутки.
Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.
В примере 1 показано создание списка множественного выбора.
Пример 1. Список множественного выбора
HTML5 IE Cr Op Sa Fx
Список
Чебурашка Крокодил Гена Шапокляк Крыса Лариса
nameОпределяет уникальное имя элемента . Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения серверным обработчиком.
sizeУстанавливает высоту списка. Если значение size равно единице, то список превращается в раскрывающийся. Значение по умолчанию зависит от атрибута multiple . Если он присутствует, то размер списка равен числу элементов. Когда multiple нет, то значение атрибута size равно 1.
Атрибуты тегаТег также имеет атрибуты, влияющие на вид списка, они представлены далее.
selectedДелает текущий пункт списка выделенным. Если у тега добавлен атрибут multiple , то можно выделять более одного пункта.
valueОпределяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега , а значение - атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.
labelПредназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри . Если атрибут label присутствует, то текст внутри тега игнорируется и в списке выводится значение label . Браузер Firefox не поддерживает этот атрибут.
Создание списка показано в примере 2.
Пример 2. Использование списка
HTML5 IE Cr Op Sa Fx
Список
Выбери персонажа
Чебурашка Крокодил Гена Шапокляк Крыса Лариса
Группирование элементов спискаПри достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег . Он представляет собой контейнер, внутри которого располагаются теги объединённые в одну группу. Особенностью тега является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label , как показано в примере 3.
Пример 3. Группирование элементов списка
HTML5 IE Cr Op Sa Fx
Список
Закуска Барская Раки, фаршированные по-царски Биточки в горшочке Галушки славянские Пампушки украинские Жаркое по-харьковски
Результат примера показан на рис. 1.
Рис. 1. Группированный список
Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.
Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как можно создать выпадающий список:
Green Yellow Black
- Выпадающий список создается с помощью тега ;
- Внутри тега определяются варианты для выбора с помощью тега ;
- В теге можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.
Также можно задать класс CSS вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.
В следующем разделе я покажу примеры использования выпадающего списка HTML в JavaScript / JQuery . В примерах также будет показано, как задавать стили с помощью CSS / CSS3 и фреймворка Bootstrap .
Пример создания простого выпадающего спискаВ этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор:
В приведенном выше примере для создания выпадающего списка используется следующая разметка:
5 10 15 20 25
Использование атрибута valueКак упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.
В следующем примере мы создадим выпадающий список с атрибутом value :
Посмотреть онлайн демо-версию и код
Для тега используется следующий код:
Maroon Green Yellow Blue Red
Пример получения доступа к выбранному варианту в JavaScriptТеперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:
Посмотреть онлайн демо-версию и код
Для option value HTML используется следующий код:
Maroon Green Yellow Blue Red Other
Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта :
var seltheme = document.getElementById(“selcolor”).value;
При нажатии кнопки вызывается функция JS , которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.
Получение доступа к видимому тексту в JQueryНа этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML :
Посмотреть онлайн демо-версию и код
В коде для каждого варианта в теге значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега следующий:
Maroon Green Yellow Blue Red
Вот как обеспечивается доступ к этому значению в HTML select option selected JavaScript :
var selectedcolor = $("#jqueryselect option:selected").text();
Также можно получить доступ к значению с помощью JQuery-метода $.val() :
var selectedcolor = $("#jqueryselect").val();
Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.
Пример получения значения в скрипте PHPВ этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет:
Посмотреть онлайн демо-версию и код
Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью массива PHP $_POST[“”] . Это код формы, используемый в примере:
Select A Color: Maroon Green Yellow Blue Red
А вот как PHP-скрипт используется, чтобы получить значение HTML select option :
Если в форме указан метод GET , тогда используйте PHP-массив $_GET[“”] .
Определение стилей выпадающего списка с помощью CSSТеперь рассмотрим, как определить стили выпадающего списка , используя возможности CSS . В следующей демо-версии я использовал несколько простых свойств CSS и свойства градиента CSS3 :
Посмотреть онлайн демо-версию и код
Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:
Selcls { padding: 3px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; width:150px; }
Закругленные углы с помощью свойства border-radiusДля HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:
Посмотреть онлайн демо-версию и код Использование нескольких атрибутов и стилей CSS
Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :
Посмотреть онлайн демо-версию и код Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков
Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .
В этой статье мы покажем, как создавать красивые выпадающие списки без использования изображений, только при помощи CSS. Также мы добавим немного кода jQuery, чтобы заставить их работать.
Обратите внимание на некоторые вещи, прежде чем мы начнем:
- В примерах кода пропущены префиксы браузеров для CSS-свойств, но вы, конечно, можете найти их в исходных файлах.
- Лично я использую бокс-модель, где = + + . Чтобы её активировать, необходим следующий фрагмент кода:
*,
*
:after
,
*
:before
{
box-sizing:
border-box;
}
Первый вопрос: что нам нужно для создания выпадающего меню? В общем, мы будем использовать блок DIV с вложенным тегом span и неупорядоченный список для выпадающего меню:
I"m kinda the label!
- Во-первых, мы делаем выпадающий список видимым, изменив его прозрачность до 1.
- Далее, мы меняем направление и цвет маленькой стрелки.
- Затем мы изменим фон позади стрелки с помощью градиента. JavaScript
- Google Plus
- ВКонтакте
- RSS
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
-
+База знаний /* Блок раскрытия списка */
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
-
+База знаний /* Блок раскрытия списка */
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
- Главное меню
- База знаний
- Компоненты
- Плагины
- Модули
- Отзывы
- Контакты
- База знаний
I"m hidden!
Me too!
So do I.
JavaScript
Нам нужнен небольшой JavaScript, чтобы наш выпадающий список работал как нужно. Этот фрагмент JS мы будем использовать для всех примеров:
//...
Obj.dd
.on
("click"
,
function
(event)
{
return
false
;
}
)
;
//...
$(function () {
var dd = new DropDown( $("#dd" ) ) ;
$(document)
.click
(function
()
{
// all dropdowns
$(".wrapper-dropdown-1"
)
.removeClass
("active"
)
;
}
)
;
} ) ;
Так что же это скрипт делает? Во-первых, он переключает класс .active , когда вы кликаете на враппер. Это означает, что если враппер не имеет класс .active , то он добавляется, а если этот класс уже присвоен, то он удаляется.
Во-вторых, скрипт создает поведение по умолчанию для раскрывающегося списка, закрывая его, если вы щелкните в любом другом месте на экране.
Что ж, теперь мы понимаем, как это работает, я думаю, пришло время для создания примеров!
Пример 1Давайте начнем с чего-нибудь простого: простой раскрывающийся список для указания пола. Давайте сначала посмотрим на разметку:
HTML-разметкаНам нужно несколько вещей: обертка (div с id#dd), (скрытый) раскрывающийся список и "лейбл", который будет обернут тегом span. Мы используем ссылки-якоря, потому что мне кажется так будет семантически правильно, но вы можете также использовать другой тег.
Пол
Мужской
Женский
CSS
Давайте теперь перейдем к CSS. Начнем с обертки (враппера):
Wrapper-dropdown
{
/* размер и положение */
position
:
relative
;
width
:
200px
;
padding
:
10px
;
margin
:
0
auto
;
/* цвет и фон */
background
:
#9bc7de
;
color
:
#fff
;
outline
:
none
;
cursor
:
pointer
;
/* шрифт */
font-weight
:
bold
;
}
Итак, мы сделали несколько вещей. Сначала мы установили ширину списка и некоторые отступы. Далее, мы задали ему цвет и фон. И, наконец, мы установили параметры для шрифта.
Давайте закончим с "лейблом", добавив небольшую стрелку справа при помощи псевдо-элемента.
Wrapper-dropdown
:after
{
content
:
""
;
width
:
0
;
height
:
0
;
position
:
absolute
;
right
:
16px
;
top
:
50%
;
margin-top
:
-6px
;
border-width
:
6px
0
6px
6px
;
border-style
:
solid
;
border-color
:
transparent
#fff
;
}
Я думаю, мы все знаем, как создать маленький треугольник на CSS при помощи бордера (границы). Это конечно хак, но если он работает очень хорошо, так почему бы и нет? Там нет ничего особенного: маленькая белая стрелка справа.
Итак, у нас есть симпатичная небольшая кнопка, но без раскрывающегося содержания она имеет никакого смысла. Давайте разберемся с нашим списком!
Wrapper-dropdown-1
.dropdown
{
/* Size & position */
position
:
absolute
;
top
:
100%
;
left
:
0
;
/* Size */
right
:
0
;
/* Size */
/* Styles */
background
:
#fff
;
font-weight
:
normal
;
/* Overwrites previous font-weight: bold; */
/* Hiding */
opacity:
0
;
pointer-events:
none
;
}
Мы зададим раскрывающемуся списку абсолютное позиционирование и разместим его позади кнопки (top: 100%;). Зададим ему такую же ширину, как для кнопки. И, наконец, скроем его, уменьшив его прозрачность до 0.
Теперь зададим стили для элементов списка:
Wrapper-dropdown-1
.dropdown
li a {
display
:
block
;
text-decoration
:
none
;
color
:
#9e9e9e
;
padding
:
10px
20px
;
}
/* Hover state */
.wrapper-dropdown-1
.dropdown
li:hover
a {
background
:
#f3f8f8
;
}
С помощью JavaScript мы будем переключать класс .active , когда мы нажимаем на кнопку, на основе этого класса мы можем изменить наш CSS для отображения раскрывающегося списка.
/* Active state */
.wrapper-dropdown-1
.active
.dropdown
{
opacity:
1
;
pointer-events:
auto
;
}
Wrapper-dropdown-1
.active
:after
{
border-color
:
#9bc7de
transparent
;
border-width
:
6px
6px
0
6px
;
margin-top
:
-3px
;
}
Wrapper-dropdown-1
.active
{
background
:
#9bc7de
;
background
:
linear-gradient(to right
,
#9bc7de
0%
,
#9bc7de
78%
,
#ffffff
78%
,
#ffffff
100%
)
;
}
Три вещи, которые необходимо отметить:
Последнее, но не менее важное, мы также должны добавить еще один фрагмент JavaScript, чтобы кнопка отображала выбранное значение.
function
DropDown(el)
{
this
.dd
=
el;
this
.placeholder
=
this
.dd
.children
("span"
)
;
this
.opts
=
this
.dd
.find
("ul.dropdown > li"
)
;
this
.val
=
""
;
this
.index
=
-
1
;
this
.initEvents
()
;
}
DropDown.prototype
=
{
var
obj =
this
;
$(this
)
.toggleClass
("active"
)
;
return
false
;
}
)
;
Obj.opts
.on
("click"
,
function
()
{
var
opt =
$(this
)
;
obj.val
=
opt.text
()
;
obj.index
=
opt.index
()
;
obj.placeholder
.text
("Gender: "
+
obj.val
)
;
}
)
;
}
,
getValue :
function
()
{
return
this
.val
;
}
,
getIndex :
function
()
{
return
this
.index
;
}
}
Очень простой код: при нажатии на элемент мы получаем его значение и отображаем его в теге span.
Пример 2Во втором примере мы создадим красивое меню для регистрации в различных социальных сетях.
HTML-разметка
Регистрация
Github
Теги используются для отображения маленьких иконок из FontAwesome . Я не буду объяснять что такое FontAwesome здесь, потому как об этом уже было не раз сказано в предыдущих статьях. Просто убедитесь, что это работает.
CSSДавайте начнем с обертки. В значительной степени она такая же, как и обертка в предыдущем примере. Обратите внимание на левую границу в 5px.
Wrapper-dropdown-2
{
/* Size and position */
position
:
relative
;
/* Enable absolute positioning for children and pseudo elements */
width
:
200px
;
margin
:
0
auto
;
padding
:
10px
15px
;
/* Styles */
background
:
#fff
;
border-left
:
5px
solid
grey;
cursor
:
pointer
;
outline
:
none
;
}
Теперь маленькая стрелка. Точно такая же, как раньше:
Wrapper-dropdown-2
:after
{
content
:
""
;
width
:
0
;
height
:
0
;
position
:
absolute
;
right
:
16px
;
top
:
50%
;
margin-top
:
-3px
;
border-width
:
6px
6px
0
6px
;
border-style
:
solid
;
border-color
:
grey transparent
;
}
А это раскрывающийся список. Опять же, в значительной степени такой же, как и в предыдущем примере:
Wrapper-dropdown-2
.dropdown
{
/* Size & position */
position
:
absolute
;
top
:
100%
;
left
:
-5px
;
right
:
0px
;
/* Styles */
background
:
white
;
list-style
:
none
;
/* Hiding */
opacity:
0
;
pointer-events:
none
;
}
Обратите внимание, что мы будем использовать переход, чтобы сделать раскрывающийся список постепенно появляющимся (анимированным), а не просто открывающимся, как в первом демо.
Некоторые стили для ссылок и иконок:
Wrapper-dropdown-2
.dropdown
li a {
display
:
block
;
text-decoration
:
none
;
color
:
#333
;
border-left
:
5px
solid
;
padding
:
10px
;
transition:
all 0.3s ease-out;
}
Wrapper-dropdown-2
.dropdown
li:nth-
child(1
)
a {
border-left-color
:
#00ACED
;
}
Wrapper-dropdown-2
.dropdown
li:nth-
child(2
)
a {
border-left-color
:
#4183C4
;
}
Wrapper-dropdown-2
.dropdown
li:nth-
child(3
)
a {
border-left-color
:
#3B5998
;
}
Wrapper-dropdown-2
.dropdown
li i {
margin-right
:
5px
;
color
:
inherit
;
vertical-align
:
middle
;
}
/* Hover state */
Wrapper-dropdown-2
.dropdown
li:hover
a {
color
:
grey;
}
И теперь, займемся стилями списка в раскрытом состоянии. Изменим направление стрелки, а раскрывающийся список станет видимым.
Wrapper-dropdown-2
.active
:after
{
border-width
:
0
6px
6px
6px
;
}
Wrapper-dropdown-2
.active
.dropdown
{
opacity:
1
;
pointer-events:
auto
;
}
function
DropDown(el)
{
this
.dd
=
el;
this
.initEvents
()
;
}
DropDown.prototype
=
{
initEvents :
function
()
{
var
obj =
this
;
Obj.dd
.on
("click"
,
function
(event)
{
$(this
)
.toggleClass
("active"
)
;
event.stopPropagation
()
;
}
)
;
}
}
Перейдем к третьему примеру, в данном случае выбранный пункт будет заменять собой значение по умолчанию.
HTML-разметка
Транспорт
Почта
UPS доставка
Частный самолет
Кода не намного больше, чем раньше. Перейдем к CSS!
CSSWrapper-dropdown-3
{
/* Size and position */
position
:
relative
;
width
:
200px
;
margin
:
0
auto
;
padding
:
10px
;
/* Styles */
background
:
#fff
;
border-radius:
7px
;
border
:
1px
solid
rgba(0
,
0
,
0
,
0.15
)
;
box-shadow:
0
1px
1px
rgba(50
,
50
,
50
,
0.1
)
;
cursor
:
pointer
;
outline
:
none
;
/* Font settings */
font-weight
:
bold
;
color
:
#8AA8BD
;
}
Здесь мы используем границы, тени для блоков и закругленные углы. Нам также нужна маленькая стрелка:
.wrapper-dropdown-3
:after
{
content
:
""
;
width
:
0
;
height
:
0
;
position
:
absolute
;
right
:
15px
;
top
:
50%
;
margin-top
:
-3px
;
border-width
:
6px
6px
0
6px
;
border-style
:
solid
;
border-color
:
#8aa8bd
transparent
;
}
Тут все также, как и раньше, так что не будем описывать код подробно.
.wrapper-dropdown-3
.dropdown
{
/* Size & position */
position
:
absolute
;
top
:
140%
;
left
:
0
;
right
:
0
;
/* Styles */
background
:
white
;
border-radius:
inherit
;
border
:
1px
solid
rgba(0
,
0
,
0
,
0.17
)
;
box-shadow:
0
0
5px
rgba(0
,
0
,
0
,
0.1
)
;
font-weight
:
normal
;
transition:
all 0.5s ease-in;
list-style
:
none
;
/* Hiding */
opacity:
0
;
pointer-events:
none
;
}
.wrapper-dropdown-3
.dropdown
li a {
display
:
block
;
padding
:
10px
;
text-decoration
:
none
;
color
:
#8aa8bd
;
border-bottom
:
1px
solid
#e6e8ea
;
box-shadow:
inset
0
1px
0
rgba(255
,
255
,
255
,
1
)
;
transition:
all 0.3s ease-out;
}
.wrapper-dropdown-3
.dropdown
li i {
float
:
right
;
color
:
inherit
;
}
.wrapper-dropdown-3
.dropdown
li:first-of-type
a {
border-radius:
7px
7px
0
0
;
}
.wrapper-dropdown-3
.dropdown
li:last-of-type
a {
border-radius:
0
0
7px
7px
;
border
:
none
;
}
/* Hover state */
.wrapper-dropdown-3
.dropdown
li:hover
a {
background
:
#f3f8f8
;
}
Все выглядит замечательно, за исключением маленькой стрелки в верхней правой части раскрывающегося списка. Эта стрелка важна: без неё, выпадающий список выглядит как будто он плавает без какой-либо связи с кнопкой.
.wrapper-dropdown-3
.dropdown
:after
{
content
:
""
;
width
:
0
;
height
:
0
;
position
:
absolute
;
bottom
:
100%
;
right
:
15px
;
border-width
:
0
6px
6px
6px
;
border-style
:
solid
;
border-color
:
#fff
transparent
;
}
.wrapper-dropdown-3
.dropdown
:before
{
content
:
""
;
width
:
0
;
height
:
0
;
position
:
absolute
;
bottom
:
100%
;
right
:
13px
;
border-width
:
0
8px
8px
8px
;
border-style
:
solid
;
border-color
:
rgba(0
,
0
,
0
,
0.1
)
transparent
;
}
Мы использовали два псевдо-элемента для этой стрелки, так как мы хотим создать границу вокруг неё.
Теперь стили для раскрытого состояния. Все одно и то же. Тем не менее, обратите внимание, что мы установили переход к .dropdown немного дольше, чем обычно (0,5 вместо 0,3 с). Таким образом, открытие меню будет очень гладким.
.wrapper-dropdown-3
.active
.dropdown
{
opacity:
1
;
pointer-events:
auto
;
}
Чтобы закончить этот демо-пример, мы должны добавить немного JavaScript, чтобы заменить значение выбранной кнопки по умолчанию. Мы видели, как это делается в первом примере, но, поскольку мы не оставляем слово "Транспорт" здесь, то JS немного отличается.
function DropDown(el)
{
this.dd
=
el;
this.placeholder
=
this.dd
.children("span"
)
;
this.opts
=
this.dd
.find("ul.dropdown > li"
)
;
this.val
=
""
;
this.index
=
-1
;
this.initEvents()
;
}
DropDown.prototype
=
{
initEvents :
function()
{
var obj =
this;
Obj.dd
.on("click"
,
function(event)
{
$(this)
.toggleClass("active"
)
;
return false;
}
)
;
Obj.opts
.on("click"
,
function()
{
var opt =
$(this)
;
obj.val
=
opt.text
()
;
obj.index
=
opt.index()
;
obj.placeholder
.text
(obj.val
)
;
}
)
;
}
,
getValue :
function()
{
return this.val;
}
,
getIndex :
function()
{
return this.index;
}
}
Выглядит по-другому, не так ли? Здесь мы создадим список обязательных дел, которые можно отметить и тем самым вычеркнуть. В общем ничего особенного, но этот пример значительно отличается от предыдущих демонстраций.
HTML-разметка
Сделать
Съесть пирожок
Следить за соседями
Покормить кота
Здесь нибудет ни ссылок, ни значков. Для каждого элемента, у нас есть две тега: чекбокс с лейблом.
CSS.wrapper-dropdown-4
{
/* Size and position */
position
:
relative
;
width
:
270px
;
margin
:
0
auto
;
padding
:
10px
10px
10px
30px
;
/* Styles */
background
:
#fff
;
border
:
1px
solid
silver
;
cursor
:
pointer
;
outline
:
none
;
}
Мы используем отступ слева, чтобы создать достаточно места для красных линий. Теперь, маленькая стрелка справа:
.wrapper-dropdown-4
:after
{
content
:
""
;
width
:
0
;
height
:
0
;
position
:
absolute
;
right
:
10px
;
top
:
50%
;
margin-top
:
-3px
;
border-width
:
6px
6px
0
6px
;
border-style
:
solid
;
border-color
:
#ffaa9f
transparent
;
}
Стили для выпадающего списка такие же, как и в предыдущих примерах:
.wrapper-dropdown-4
.dropdown
{
/* Size & position */
position
:
absolute
;
top
:
100%
;
margin-top
:
1px
;
/* border of wrapper */
left
:
-1px
;
right
:
-1px
;
/* Styles */
background
:
white
;
border
:
1px
solid
silver
;
border-top
:
none
;
list-style
:
none
;
transition:
all 0.3s ease-out;
/* Hiding */
opacity:
0
;
pointer-events:
none
;
}
Мы должны установить margin-top равный 1px, потому что мы должны немного сдвинуть его вниз из-за границы обертки.
.wrapper-dropdown-4
.dropdown
li {
position
:
relative
;
/* Enable absolute positioning for checkboxes */
}
.wrapper-dropdown-4
.dropdown
li label {
display
:
block
;
padding
:
10px
10px
10px
30px
;
/* Same padding as the button */
border-bottom
:
1px
dotted
#1ccfcf
;
transition:
all 0.3s ease-out;
}
.wrapper-dropdown-4
.dropdown
li:last-of-type
label {
border
:
none
;
}
.wrapper-dropdown-4
.dropdown
li input /* Checkboxes */
{
position
:
absolute
;
display
:
block
;
right
:
10px
;
top
:
50%
;
margin-top
:
-8px
;
}
/* Hover state */
.wrapper-dropdown-4
.dropdown
li:hover
label {
background
:
#f0f0f0
;
}
/* Checked state */
.wrapper-dropdown-4
.dropdown
li input:
checked ~ label {
color
:
grey;
text-decoration
:
line-through
;
}
Чекбоксы имеют абсолютное позиционирование и размещены справа по середине на каждой линии, но так как они связаны с лейблами, то вы можете нажать в любом месте пункта, чтобы отметить их.
Когда флажок установлен, текст становится серым и перечеркнутым. Просто, но эффективно.
У нас есть еще две тонкие красные линии слева в нашей маленькой записной книжке. Есть два способа сделать это: один с псевдо-элементами и один с градиентами. Давайте посмотрим на оба варианта.
/* красные линии с псевдо-элементами */
.wrapper-dropdown-4
.dropdown
:before
,
.wrapper-dropdown-4
:before
{
content
:
""
;
width
:
4px
;
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
15px
;
border
:
1px
solid
#ffaa9f
;
border-top
:
none
;
border-bottom
:
none
;
z-index
:
2
;
}
/* Или: */
/* красные линии при помощи градиента */
.wrapper-dropdown-4
.dropdown,
.wrapper-dropdown-4
{
background
:
linear-gradient(left
,
white
5%
,
#ffaa9f
5%
,
#ffaa9f
5.3%
,
white
5.3%
,
white
6.5%
,
#ffaa9f
6.5%
,
#ffaa9f
6.8%
,
white
6.8%
)
;
}
.wrapper-dropdown-4
.dropdown
li:hover
label {
background
:
linear-gradient(left
,
#f0F0F0
5%
,
#ffaa9f
5%
,
#ffaa9f
5.3%
,
#f0F0F0
5.3%
,
#f0F0F0
6.5%
,
#ffaa9f
6.5%
,
#ffaa9f
6.8%
,
#f0F0F0
6.8%
)
;
}
Так какой из этих способов лучше? Вероятно, первый, потому что, если вы хотите изменить эффект при наведении на элементы списка, вы должны изменить градиент, что довольно непросто. Кроме того, псевдо-элементы лучше поддерживаются браузерами (начиная с IE8), в отличии от градиентов (не поддерживаются до IE10).
Теперь стили для раскрытого состояния. Ничего нового здесь нет.
/* Active state */
.wrapper-dropdown-4
.active
:after
{
border-width
:
0
6px
6px
6px
;
}
.wrapper-dropdown-4
.active
.dropdown
{
opacity:
1
;
pointer-events:
auto
;
}
function
DropDown(el)
{
this
.dd
=
el;
this
.opts
=
this
.dd
.find
("ul.dropdown > li"
)
;
this
.val
=
[
]
;
this
.index
=
[
]
;
this
.initEvents
()
;
}
DropDown.prototype
=
{
initEvents :
function
()
{
var
obj =
this
;
Obj.dd
.on
("click"
,
function
(event)
{
$(this
)
.toggleClass
("active"
)
;
event.stopPropagation
()
;
}
)
;
Obj.opts
.children
("label"
)
.on
("click"
,
function
(event)
{
var
opt =
$(this
)
.parent
()
,
chbox =
opt.children
("input"
)
,
val =
chbox.val
()
,
idx =
opt.index
()
;
($.inArray
(val,
obj.val
)
!==
-
1
)
?
obj.val
.splice
( $.inArray
(val,
obj.val
)
,
1
)
:
obj.val
.push
( val )
;
($.inArray
(idx,
obj.index
)
!==
-
1
)
?
obj.index
.splice
( $.inArray
(idx,
obj.index
)
,
1
)
:
obj.index
.push
( idx )
;
}
)
;
}
,
getValue :
function
()
{
return
this
.val
;
}
,
getIndex :
function
()
{
return
this
.index
;
}
}
Наш последний пример будет похож на выпадающее меню в некоторых админ-панелях. Для этого мы будем использовать анимацию, когда мы переключаем его. Вместо появления/исчезновения, он будет скользить вверх и вниз.
HTML-разметка
Иван Иванов
Профиль
Настройки
Выйти
CSS
.wrapper-dropdown-5
{
/* Size & position */
position
:
relative
;
width
:
200px
;
margin
:
0
auto
;
padding
:
12px
15px
;
/* Styles */
background
:
#fff
;
border-radius:
5px
;
box-shadow:
0
1px
0
rgba(0
,
0
,
0
,
0.2
)
;
cursor
:
pointer
;
outline
:
none
;
transition:
all 0.3s ease-out;
}
.wrapper-dropdown-5
:after
{
/* Little arrow */
content
:
""
;
width
:
0
;
height
:
0
;
position
:
absolute
;
top
:
50%
;
right
:
15px
;
margin-top
:
-3px
;
border-width
:
6px
6px
0
6px
;
border-style
:
solid
;
border-color
:
#4cbeff
transparent
;
}
Это основные стили. Теперь перейдем к раскрывающемуся списку, который немного отличается от обычного.
.wrapper-dropdown-5
.dropdown
{
/* Size & position */
position
:
absolute
;
top
:
100%
;
left
:
0
;
right
:
0
;
/* Styles */
background
:
#fff
;
border-radius:
0
0
5px
5px
;
border
:
1px
solid
rgba(0
,
0
,
0
,
0.2
)
;
border-top
:
none
;
border-bottom
:
none
;
list-style
:
none
;
transition:
all 0.3s ease-out;
/* Hiding */
max-height
:
0
;
overflow
:
hidden
;
}
На этот раз мы не изменяли непрозрачность до 0, чтобы скрыть меню. Мы установили max-height равную 0 и overflow: hidden. Почему установили max-height, а не height? Потому что мы не знаем точную высоту раскрытого списка.
Простые стили для элементов списка.
.wrapper-dropdown-5
.dropdown
li {
padding
:
0
10px
;
}
.wrapper-dropdown-5
.dropdown
li a {
display
:
block
;
text-decoration
:
none
;
color
:
#333
;
padding
:
10px
0
;
transition:
all 0.3s ease-out;
border-bottom
:
1px
solid
#e6e8ea
;
}
.wrapper-dropdown-5
.dropdown
li:last-of-type
a {
border
:
none
;
}
.wrapper-dropdown-5
.dropdown
li i {
margin-right
:
5px
;
color
:
inherit
;
vertical-align
:
middle
;
}
/* Hover state */
.wrapper-dropdown-5
.dropdown
li:hover
a {
color
:
#57a9d9
;
}
А теперь, в активном состоянии:
/* Active state */
.wrapper-dropdown-5
.active
{
border-radius:
5px
5px
0
0
;
background
:
#4cbeff
;
box-shadow:
none
;
border-bottom
:
none
;
color
:
white
;
}
.wrapper-dropdown-5
.active
:after
{
border-color
:
#82d1ff
transparent
;
}
.wrapper-dropdown-5
.active
.dropdown
{
border-bottom
:
1px
solid
rgba(0
,
0
,
0
,
0.2
)
;
max-height
:
400px
;
}
Когда выпадающий список открыт, мы меняем нижние углы кнопки, ее цвет, направление стрелки и цвет стрелки и удаляем её тень и границы.
И, чтобы показать меню, мы устанавливаем max-height выпадающего списка равную 400 пикселей. Мы могли бы установить её равную 500px или 1000px, это не имеет значения.
function
DropDown(el)
{
this
.dd
=
el;
this
.initEvents
()
;
}
DropDown.prototype
=
{
initEvents :
function
()
{
var
obj =
this
;
Obj.dd
.on
("click"
,
function
(event)
{
$(this
)
.toggleClass
("active"
)
;
event.stopPropagation
()
;
}
)
;
}
}
Итак, теперь у нас есть 5 раскрывающихся списков, которые замечательно работают, но как насчет старых браузеров?
Эти браузеры не понимают, например, свойство opacity.
В этом нам поможет библиотека Modernizr . Грубо говоря, для тех, кто не знает, Modernizr это библиотека JavaScript, которая обнаруживает поддерживаемые HTML5 и CSS3 свойства в браузер пользователя.
Благодаря этому, мы можем "указать" браузеру, если вы не поддерживаете *это* свойство, то делайте следующее. Ниже приведен пример того, как мы можем управлять стилями для браузеров, которые не поддерживают определенные свойства CSS:
/* Нет поддержки CSS3 */
.no-opacity
.wrapper-dropdown-1
.dropdown,
.no-pointerevents
.wrapper-dropdown-1
.dropdown
{
display
:
none
;
opacity:
1
;
/* If opacity support but no pointer-events support */
pointer-events:
auto
;
/* If pointer-events support but no pointer-events support */
}
.no-opacity
.wrapper-dropdown-1
.active
.dropdown,
.no-pointerevents
.wrapper-dropdown-1
.active
.dropdown
{
display
:
block
;
}
Если браузер не поддерживает opacity или pointer-events, то используется свойство display: block;. Ну и так далее.
Заключение.
Я надеюсь, что эта статья помогла вам понять, как создавать пользовательские раскрывающиеся меню. Как вы можете видеть, это довольно просто.
ДемонстрацияЕсли у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Сегодня хочу представить небольшой «рецепт» создания списка на CSS. Никакого JQuery, никакого CSS3 — только старый, добрый, кроссбраузерный CSS. Пример достаточно простой, поэтому опытным товарищам, возможно, будет неинтересно. Будем реализовывать выпадающий список с социальными кнопками.
Итак, не будем долго рассуждать, перейдем сразу к делу
HTML Поделись записьюЯ сознательно опускаю общие моменты, вроде подключения стилей, чтобы код не разрастался. Внизу страницы я дам ссылку на исходники — там все есть.
Что у нас в HTML — обычный список и необычный заголовок. Его необычность в том, что сделан он гиперссылкой, которая позволяет отследить событие :hover
, то есть наведение. Выпадающий список будет работать при наведении курсора на заголовок.
Для начала рассмотрим базовые стили выпадающего списка. Я старался комментировать каждую строку кода, чтобы было понятнее:
/*Сбросим отступы*/ .droplink ul,.droplink h3,.droplink h3 a{ padding:0;margin:0 } /*Базовая обертка*/ .droplink { width:200px; position:absolute; margin:10px 0 0 25px } /*Стиль блока при наведении*/ .droplink:hover{ height:auto; background-color:#3E403D; border:solid 1px #3A3C39 } /*Заголовок в обычном состоянии*/ .droplink h3 a{ text-align:center; width:100%; display:block; padding:12px 0px; color:#999; text-decoration:none } .droplink h3 a img{border:none} /*Стиль для заголовка при наведении*/ .droplink:hover h3 a { color:#FFF; font-weight:bold; position:absolute }
Тут ничего особенного, указали размеры и стиль блока, стиль заголовка и для обеих элементов — их стили при наведении курсора. Идем дальше:
/*Скрываем список без наведения*/ .droplink ul{ list-style:none; display:none } /*Отображаем список при наведении*/ .droplink:hover ul{ display:block; margin-top:40px } .droplink li{display:block}
Этот код уже поинтереснее и показывает, как ведет себя выпадающий список при наведении курсора. В обычном состоянии стоит display:none, то есть он не отображается. При наведении — показываем его блоком. Вот и весь секрет. Теперь немного оформим элементы списка и вставим иконки:
/*Стиль элемента списка*/ .droplink li a{ padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px; background-repeat:no-repeat; background-position: 10px 3px } /*Стиль элемента при наведении*/ .droplink li a:hover{ background-color:#999 } /*Иконки*/ .facebook a {background-image:url("icons/facebook.png")} .twitter a {background-image:url("icons/twitter.png")} .vk a {background-image:url("icons/vk.png")} .rss a {background-image:url("icons/rss.png")} .gplus a {background-image:url("icons/gplus.png")}
Вот, собственно, и все. Выпадающий список готов и смотрится достаточно симпатично. Можно оформить элементы на свое усмотрение, добавить закругленных углов и прочих «примочек».
Если необходимо, чтобы список «перекрывал» текст под ним при наведении — смотрите в сторону z-index .
Если что-то непонятно или не получается — спрашивайте в комментариях или воспользуйтесь кнопкой «Отправить сообщение», она там —>
Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.
1. Пример обычного HTML спискаПрисвоим тегу
- класс
treeline для создания соединительных линий каждого раздела списка.
- /* Присваиваем класс treeline */
К предыдущей разметке добавляем + для реализации функции раскрытия элементов древовидного списка.
К CSS из предыдущего примера необходимо дописать следующие стили:
Treeline .drop { position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; line-height: 1em; text-align: center; background: #9F9F9F; color: #fff; /* Фон и цвет кнопки, раскрывающей список */ font-size: 78%; /* Размер +/- */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; } .treeline li:last-child > .drop {margin-left: 1px;} .treeline .drop + ul {display: none;} .treeline .dropM + ul {display: block;}
Скрипт, реализующий функцию раскрывающегося спискаПомимо HTML и CSS, данный способ оформления древовидных списков требует использование JS:
$(function() { var ul = document.querySelectorAll(".treeline > li:not(:only-child) ul, .treeline ul ul"); for (var i = 0; i < ul.length; i++) { var div = document.createElement("div"); div.className = "drop"; div.innerHTML = "+"; ul[i].parentNode.insertBefore(div, ul[i].previousSibling); div.onclick = function() { this.innerHTML = (this.innerHTML == "+" ? "−" : "+"); this.className = (this.className == "drop" ? "drop dropM" : "drop"); } } })();
Данный JS код можно вставить в конец материала, пройдя в режим просмотра исходного кода. Учтите, что код скрипта может обрезаться редактором и, соответственно, не работать. В этом случае пройдите в настройки редактора и разрешите использование тега .
4. Пример вертикального древовидного списка- /* Присваиваем класс treevertical */