В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.
В уроке задействуем:
П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .
Все meta удалю кроме кодировки, пропишу свой заголовок «Tom menu ».
Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href="#" . Затем будет идти иконка I с классом .fa .fa-
ul>li*5>a>i.fa.fa-
Жмем применить.
Пропишем название пунктов меню (Главная, Продукция, Услуги, Новости, Контакты ).
Далее отбираем и подключаем иконки. Переходим на сайт
Font Awesome , отберем себе иконки под данные пункты меню:
Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.
В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .
В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (home , shopping-cart , cogs , th-list , envelope-open ).
Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css
и подключим его к index.html
. Для проверки, что стили подключены, создам папку img
, в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background
.
Body{ background-image: url("../img/ep_naturalwhite.png"); }
Описываем CSS стили горизонтального менюПервым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:
Dws-menu *{ margin: 0; padding: 0; }
Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.
Header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Скроем маркеры у списков:
Dws-menu ul, .dws-menu ol{ list-style: none; }
Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:
Dws-menu > ul{ display: flex; justify-content: center; }
В header сделаем отступ только сверху, пропишем margin-top .
Header{ margin-top: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; }
Оформим наше меню, зададим цвет кнопок, шрифт и т.д.
Dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; }
Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:
Dws-menu > ul li{ position: relative; }
Dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; }
Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.
Dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; }
Делаем разделители спискам LI :
.dws-menu > ul li{ position: relative; border-right: 1px solid #c7c8ca; }Меню приобрело внешний вид, затем можно приступать к описанию стилей при наведении.
Анимируем горизонтальное меню при наведениеDws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; }
И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:
.dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; }Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.
Описываем выпадающее меню CSS / HTMLО ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .
ul>li*5>a
Жмем применить, пропишем название пунктов (Одежда, Электроника, Продукты питания, Инструменты, Быт. химия ).
Затем открываем style.css
и опишем стили подменю.
Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; }
Пропишем спискам border в 1 пик.
Dws-menu li > ul li{ border: 1px solid #c7c8ca; }
Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .
Dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; }
Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (Камеры, Компьютеры, Телефоны ) и сохраняемся.
Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:
Dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; }
/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; display: none; }А для их появления отберем списки при наведении и отобразим их при помощи display: block; .
Dws-menu li:hover > ul{ display: block; }
Теперь можно добавлять многоуровневые меню просто простым копированием блока UL , изменением его пунктов.
Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь
CSS генератором , у меня создано несколько Presets
, вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background
который прописывал до этого.
При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.
Здравствуйте, уважаемые читатели блога сайт. В рамках изучения премудростей в качестве очередной задачи продолжим разбирать подробности создания форм на сайте с помощью соответствующих .
Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки , в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend .
Напомню, что любая форма, присутствующая на странице, создается при помощи и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — ).
К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эту информацию, поэтому с помощью HTML мы создаем лишь внешний вид формы, а необходимые данные отправляются для обработки. С этой целью на вебсервере целенаправленно создается специальный файл, написанный на одном из серверных языков (чаще всего, PHP). Скажем, для обратной связи можно сотворить файлик mail.php, который и будет являться обработчиком.
При практическом использовании полученной в этой публикации информации не забудьте о том, как должна выглядеть , где коды всех видимых элементов страницы, включая формы, всегда находятся в пределах тега body.
Эта информация крайне необходима, поскольку даже в случае использовании всех современных встроенных в инструментов разработчиков (напомню, первой ласточкой в реализации этого функционала был ), вы должны четко представлять себе механизм использования основных тегов, тогда редактирование кода HTML, необходимость которого возникает время от времени, превратится в приятное занятие.
2. Multiple — этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):
Option Textarea Label Fieldset Legend |
3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки , а, например, при size="5" будут видны уже пять:
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
4. Required (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
5. Autofocus (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:
Выберите из списка Option Textarea Label Fieldset Legend |
6. Disabled (параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:
Выберите из списка Option Textarea Label Fieldset Legend |
7. Form — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера . При этом в роли значения атрибута form прописывается параметр глобального атрибута id , который добавлен к тегу form:
Выберите из списка Option Textarea Label Fieldset Legend |
Выберите из списка Option Textarea Label Fieldset Legend |
Не путайте атрибут тега select и основной тэг для создания формы. В примере выше к тегу form добавлен атрибут id="data", а к select — form="data", что и позволило связать выпадающий список с конкретной формой.
Атрибуты тега option1. Value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:
Выберите из списка Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
2. Disabled — блокирует для выбора элемент выпадающего списка.
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.
3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между и вовсе отсутствует.
Тег Textarea Тег Label Тег Fieldset Тег Legend |
Тег Textarea Тег Label Тег Fieldset Тег Legend |
Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label="Тег Option", в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label="Textarea".
4. Selected — выделяет текущий пункт выпадающего списка:
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
Если выпадающий список необходимо как-то упорядочить, например, разделить по группам, то для каждой из этих групп используют контейнер, состоящий из открывающего и закрывающего тегов optgroup, внутри которого содержится часть пунктов выпадающего списка. При этом существуют два атрибута для настройки подобного раскрывающегося списка.
1. Label — устанавливает название каждой группы в качестве параметра:
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
То же самое, но с multiple и size="7" тега select:
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:
Option Textarea Label Fieldset Legend |
Option Textarea Label Fieldset Legend |
Небольшой видеоролик будет здесь как нельзя кстати:
Текстовое поле в форме посредством textareaЕще один элемент формы для сайта, который мы рассмотрим — поле с возможностью ввода в него многострочного текста. Его можно создать с помощью тега textarea. Без атрибутов по умолчанию применение этого тега даст такой результат:
Введите текст: |
Введите текст: |
В поле можно осуществлять переносы строк, при этом текст будет передаваться обработчику на сервер с учетом сделанных переносов. Поле можно растягивать по ширине и длине, захватив мышкой нижний правый угол, который отмечен двумя диагональными полосками.
Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:
1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.
2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20 .
3. Rows — высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.
4. Maxlength — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.
Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):
Введите текст: |
Введите текст: |
5. Minlength — указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.
7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:
Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:
8. Autoсomplete — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.
Имеет всего два параметра : on (включен) и off (выключен). Вот пример кода:
Введите текст:
Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.
9. Wrap — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:
Soft — набор символов, который не помещается в поле по ширине, автоматически переносится на новую строчку. При этом обработчику текст будет передан в виде одной строки . В том случае, если пользователь осуществит перенос текста в любом нужном месте с помощью клавиши «Enter», то такой перенос сохраняется при отправке вебформы.
Введите текст: |
Введите текст: |
Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols :
Введите текст: |
Введите текст: |
Off — отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:
Введите текст: |
Введите текст: |
10. Autofocus (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.
11. Disabled — в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет:
Неактивное текстовое поле |
В этой статье мы покажем, как создавать красивые выпадающие списки без использования изображений, только при помощи CSS. Также мы добавим немного кода jQuery, чтобы заставить их работать.
Обратите внимание на некоторые вещи, прежде чем мы начнем:
*,
*
:after
,
*
:before
{
box-sizing:
border-box;
}
Первый вопрос: что нам нужно для создания выпадающего меню? В общем, мы будем использовать блок DIV с вложенным тегом span и неупорядоченный список для выпадающего меню:
I"m kinda the label!
Нам нужнен небольшой 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. Начнем с обертки (враппера):
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-разметка
Регистрация
Теги используются для отображения маленьких иконок из 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-разметка
Транспорт
Кода не намного больше, чем раньше. Перейдем к 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-разметка
Иван Иванов
.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;. Ну и так далее.
Заключение.
Я надеюсь, что эта статья помогла вам понять, как создавать пользовательские раскрывающиеся меню. Как вы можете видеть, это довольно просто.
ДемонстрацияЕсли у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Древовидный вид HTML списков является лучшим вариантом визуального обзора и изучения их иерархической структуры. Рассмотрим несколько преобразований обычного HTML списка в более наглядное древовидное состояние при помощи магии CSS стилей.
1. Пример обычного HTML спискаПрисвоим тегу
К предыдущей разметке добавляем + для реализации функции раскрытия элементов древовидного списка.
К 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. Пример вертикального древовидного спискаВ этой статье мы с Вами рассмотрим элементы, которые позволяют создавать раскрывающиеся списки, научимся формировать группы в этих списках, рассмотрим как отключать пункты и даже группы списков, познакомимся с элементом, который позволяет создать многострочное текстовое поле, его в дальнейшем вы можете использовать внутри HTML форм (элемент ).
Раскрывающийся списокПервый пункт в списке, как правило, отображается как выбранный, но вы можете добавить к этому элементу атрибут selected , чтобы задать предопределенный вариант.
Давайте
Пример использования элемента Tupac Amaru Shakur Curtis Jackson Calvin Cordozar Broadus, Jr.В этом примере мы тегом создали раскрывающийся список, внутри него мы поместили три элемента , которые определяют его пункты. Атрибутом selected указали, что третий пункт предопределен (будет выбран по умолчанию вместо первого).
Обращаю Ваше внимание на то, что необходимо использовать атрибут value (значение) тега , чтобы указать какое значение отправляется на сервер для дальнейшей обработки.
Отключение пункта менюС помощью логического атрибута disabled (HTML тега ) допускается отключать определенный пункт меню (параметр). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено параметр неактивен.
в раскрывающемся списке Option A Option B Option CВ браузере это выглядит следующим образом:
Группировка пунктов менюДавайте рассмотрим следующий тег , который используется для группировки связанных данных в раскрывающемся списке и предназначен для более удобного представления информации пользователям.
Пример использования:
Пример использования HTML тега Tupac Amaru Shakur Curtis Jackson Calvin Cordozar Broadus, Jr. Marshall Bruce Mathers IIIВ данном примере мы выделили 2 группы тегом . Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:
В следующем примере с использованием логического атрибута disabled мы отключим одну группу ("Group B "):
Пример использования атрибута disabled HTML тега A.1 B.1 B.2 C.1 C.2 C.3Результат нашего примера:
Отключение списка и мультивыбор Атрибуты disabled и multiple тега 1 2 3 A B C DВ этом примере мы создали два раскрывающихся списка. Для первого списка мы использовали атрибут disabled , который не дает взаймодействовать со списком (отключает его).
Для второго списка мы использовали атрибут multiple , который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).
В браузере это выглядит следующим образом:
Текстовая область
Результат нашего примера:
Отключение текстовой областиПо аналогии с ранее рассмотренными элементами тег имеет логический атрибут disabled , который указывает, что текстовая область должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.
Рассмотрим пример использования:
Атрибуты disabled и name тега Текстовое поле доступно к заполнению. Текстовое поле не доступно к заполнению.), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы.
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент с типом кнопки "отправка формы": type = "submit" ).
Результат нашего примера:
Подсказка для текстовой областиИ так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.
Благодаря атрибуту (HTML тега ) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.
Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.
Рассмотрим пример использования:
Атрибуты placeholder и readonly тегаВ этом примере мы создали две текстовые области (элемент ), для первой и второй области атрибутом мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).
Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его.
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент с типом кнопки "отправка формы": type = "submit" ).
Результат нашего примера:
Вопросы и задачи по темеПеред тем как перейти к изучению следующей темы пройдите практическое задание:
Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи . Если вы пропустили её, то вернитесь для её изучения.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.