#10 — Выпадающее меню и списки
itProger Видеокурсы Изучение технологии Bootstrap (верстка сайта) #10 — Выпадающее меню и списки
Bootstrap HTML5Начиная с этой лекции мы приступаем к изучению Bootstrap стилей в связке с JavaScript скриптами. Мы изучим создание выпадающих списков, а также меню за счёт заранее подготовленных JavaScript скриптов.
Исходный код
Шапка с выпадающими списками
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap уроки</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Навигация</span> <span></span> <span></span> <span></span> </button> <a href="#">itProger</a> </div> <div> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> <li></li> <li><a href="#">Еще одна отдельная ссылка</a></li> </ul> </li> </ul> <form role="search"> <div> <input type="text" placeholder="Поиск"> </div> <button type="submit">Отправить</button> </form> <ul> <li><a href="#">Ссылка</a></li> <li> <a href="#" data-toggle="dropdown">Dropdown <b></b></a> <ul> <li><a href="#">Действие</a></li> <li><a href="#">Другое действие</a></li> <li><a href="#">Что-то еще</a></li> <li></li> <li><a href="#">Отдельная ссылка</a></li> </ul> </li> </ul> </div> </div> </nav> <div> <button data-toggle="dropdown">Список <span></span></button> <ul> <li>Заголовок 1</li> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">jQuery</a></li> <li></li> <li>Заголовок 2</li> <li><a href="#">Javascript</a></li> </ul> </div> <!-- jQuery --> <script src="https://ajax. 
googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
Онлайн редактор кода
Загрузка…
Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
# Веб сайты
Видеокурс по PHP, MySQL / Создание динамического сайта# Веб сайты
Уроки Python Django / Создание сайта12 уроков
# Веб сайты
Создание блога на Ruby On Rails8 уроков
# Веб сайты
Современная вёрстка адаптивного веб-сайта# Веб сайты
Вёрстка адаптивного сайта на Bootstrap 46 уроков
Мы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта.
Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.
Хорошо
Настройки
Создание выпадающего меню на css
В html5 стандартным способом считается создавать его в контейнере nav с помощью маркированного списка. Давайте именно так и сделаем. Маркеры мы позже уберем с помощью css, в меню они нам совершенно не нужны.
Собственно, я сразу напишу в html разметку с вложенными списками. То есть наши список будет двухуровневым – в нем будут другие списки. А именно, на каждый пункт 1 список, который и будет формировать выпадающее меню.
Тут есть важный момент, который заключается в том, что вам, возможно, не нужно каждый пункт делать выпадающим, а лишь некоторые. Без проблем, тогда в пунктах без выпадения просто не создаем вложенных списков.
Собственно, вот она, вся разметка:
01.<nav id = «nav»>
02.<ul>
03.<li><a href = «#»>Пункт 1</a>
04.
<ul class = «second»>
05.<li><a href = «#»>Подпункт</a></li>
06.<li><a href = «#»>
07.<li><a href = «#»>Подпункт</a></li>
08.</ul>
09.</li>
10.<li><a href = «#»>Пункт 2</a>
11.<ul class = «second»>
12.<li><a href = «#»>Подпункт</a></li>
13.<li><a href = «#»>Подпункт</a></li>
14.<li><a href = «#»>Подпункт</a></li>
15.</ul>
16.</li>
17.<li><a href = «#»>Пункт 3</a>
18.<ul class = «second»>
19.<li><a href = «#»>Подпункт</a></li>
20.
<li><a href = «#»>
21.<li><a href = «#»>Подпункт</a></li>
22.</ul>
23.</li>
24.<li><a href = «#»>Пункт 4</a>
25.<ul class = «second»>
26.<li><a href = «#»>Подпункт</a></li>
27.<li><a href = «#»>Подпункт</a></li>
28.<li><a href = «#»>Подпункт</a></li>
29.</ul>
30.</li>
31.</ul>
32.</nav>
Я понимаю, что она огромна. В этом-то и проблема вложенных списков, что требуется писать много кода. Но учитывайте тот факт, что мы делаем 4 основных пункта и для каждого будет выпадающее меню.
Собственно, я задал всей навигации идентификатор nav, а всем
вложенным спискам – стилевой класс second, чтобы понимать, что они являются
вложенными.
Отлично, разметка у нас готова, можно посмотреть на результат:
Да уж, выглядит ужасно. Но сейчас мы включим в работу css и уже через несколько минут наша навигация преобразится. Давайте работать.
Пишем css-стили
Первое, что я сделаю, это сброшу все отступы по умолчанию для всех элементов. Они нам будут только мешать, лучше зададим потом отступы сами, где это понадобится.
1.*{
2.margin: 0;
3.padding: 0;
4.}
Далее я пропишу общие стили для самого меню, а также для списков, чтобы убрать у них маркеры.
1.#nav{
2.height: 70px;
3.}
4.#nav ul{
5.list-style: none;
6.}
Теперь нам нужно, собственно, решить, каким будет наше меню. Горизонтальным или вертикальным? Я предлагаю сначала сделать горизонтальное и посмотреть все на его примере. Для этого нужно написать такие стили:
1.#nav > ul > li{
2.
float: left;
3.width: 180px;
4.position: relative;
5.}
Заметьте, что с помощью знака > мы обращаемся к пунктам списка, который непосредственно вложены в ul, а тот непосредственно вложен в nav. Это очень важно, так как позволяет не применить стиль к пунктам вложенных списков. Дело в том, что по моей задумке в главном списке пункты будут располагаться горизонтально, а во вложенных – вертикально.
Но вы, конечно, можете делать по-другому, в согласии со своей задумкой. Вы можете сделать так, чтобы все пункты были в одну строчку.
В любом случае, вышеприведенный код, я надеюсь, вы понимаете. Он заставляет пункты главного списка прижиматься к левому краю, так что все они встают в одну строку, хотя и являются блочными элементами. Также я задал им явную ширину и относительное позиционирование.
Для чего позиционирование? Оно необходимо для того, чтобы потом
абсолютно позиционировать вложенные списки. Если вы изучали позиционирование в
css, то наверняка знаете, что если задать блоку относительное позиционирование,
то все элементы в нем можно будет позиционировать абсолютно внутри именно этого
блока, а не всего окна браузера.
Тем временем, вот что у нас уже получилось:
По этому скриншоту вы можете уже представить себе примерный результат. Конечно, нам еще предстоит красиво оформить пункты, чтобы глаза не умоляли о пощаде при просмотре навигации.
Далее мы с вами преобразим внешний вид нашего меню. Вот такие стили для этого я прописал ссылкам:
01.#nav li a{
02.display: block;
03.background: #90DA93;
04.border: 1px solid #060A13;
05.color: #060A13;
06.padding: 8px;
07.text-align: center;
08.text-decoration: none;
09.}
10.#nav li a:hover{
11.background: #2F718E;
12.}
Во-первых, сами ссылки нужно сделать блочными. Это необходимо для
того, чтобы работали внутренние отступы и корректно применялись все свойства.
Далее указываю цвета фона, текста, параметры рамки, внутренние отступы и
выравнивание текста по центру. Наконец, отменяю подчеркивание ссылок.
Все эти параметры не обязательно прописывать так, как это сделал я. Цвета вы можете выбрать произвольно, рамку сделать другую или вообще не использовать, отступы можно уменьшать или увеличивать.
Заметьте, что в данном случае мы не использовали знак >, поэтому указанные правила применятся ко всем ссылкам, в том числе и тем, что находятся во вложенных пунктах. Итак, теперь имеем следующее:
Отлично, но ведь вы понимаете, что подпункты не должны быть видно, они должны раскрываться при наведении на нужный пункт. Без этого наше меню похоже на таблицу. Что ж, самое время спрятать вложенные пункты.
1.#nav li .second{
2.display: none;
3.position: absolute;
4.top: 100%;
5.}
Во-первых, скрываем полностью вложенные списки. Во-вторых, задаем
им абсолютное позиционирование и координату top: 100%. Это означает, что
выпадающее меню будет отображаться четко под основным пунктом, которому
принадлежит, четко под 100% высоты этого пункта.
Теперь мы видим на веб-странице только основное меню, что нам и нужно.
Реализуем выпадение
Нам осталось сделать самое главное – реализовать само выпадение. В этом нет ничего сложного, смотрите на этот код:
1.#nav li:hover .second{
2.display: block;
3.}
Этот код будет работать безукоризненно. При наведении на пункт основного меню, вложенный список будет становиться видимым. Причем только тот список, что вложен в пункт, на который наводится курсор.
Есть только одна незначительная проблема – ширина вложенных пунктов не соответствует ширине основных. Но это очень легко решается дописыванием соответствующих стилей:
1.#nav li li{
2.width: 180px;
3.}
Все, проблема решена:
Все работает отлично. При наведении на основной пункт появляется
соответствующее ему выпадающее меню. Если убрать курсор в сторону – оно
пропадает. Если перевести курсор на сами вложенные пункты, то можно будет по
ним кликнуть и перейти в нужный раздел сайта.
Таким образом, мы сделали с вами
очень простое и легкое выпадающее меню абсолютно без скриптов.
Переделываем меню в вертикальное
Ну хорошо, с горизонтальной навигацией мы с вами полностью разобрались, но ведь помимо нее на сайтах очень часто встречается и вертикальная и она тоже может быть выпадающей. На самом деле переделать меню с горизонтального на вертикальное очень легко, нам придется изменить буквально пару строк кода.
Во-первых, вам нужно будет убрать float:left у главных пунктов списка. Именно это свойство способствует тому, что наши пункты отображаются в одну строку, но зачем нам это, если навигация должна быть вертикальной?
Теперь остается изменить правила для селектора #nav li .second, то есть для вложенных списков, а именно, их нужно немного по-другому позиционировать. Вот так:
1.#nav li .second{
2.display: none;
3.position: absolute;
4.left: 100%;
5.top: 0;
6.}
То есть необходимо прописать две координаты вместо одной.
Во-первых, в случае с горизонтальной навигацией я говорил, что по задумке
пункты вложенных меню должны отображаться под основными пунктами. В случае с
вертикальным меню это не подходит – пункты должны отображаться сбоку.
Поэтому изменяем top: 100% на left: 100%. Кроме этого, координата top нам тоже нужна. Задаем ей 0, чтобы вложенное меню находилось на одном уровне с пунктом, которому соответствуют.
Все, теперь все работает так, как надо. Можете протестировать. Как видите, я не врал, когда говорил, что придется переписать всего несколько строк кода.
Горизонтальное меню с несколькими уровнями
Используя примерно такой же подход вы можете создать больше уровней меню, если это сильно необходимо. Например, давайте создадим для четвертого пункта главного меню список, который будет вложен в один из подпунктов.
01.<li><a href = «#»>Пункт 4</a>
02.<ul class = «second»>
03.<li><a href = «#»>Подпункт</a>
04.
<ul class = «third»>
05.<li><a href = «#»>Подпункт подпункта</a></li>
06.<li><a href = «#»>Подпункт подпункта</a></li>
07.</ul>
08.</li>
09.<li><a href = «#»>Подпункт</a></li>
10.<li><a href = «#»>Подпункт</a></li>
11.</ul>
12.</li>
Опять же, разметка превращается в громоздкую и непонятную, но если вы будете внимательным, то увидите, в чем здесь вся суть. Далее работаем с css:
01.#nav li li .third{
02.display: none;
03.position: absolute;
04.left: 100%;
05.top: 0;
06.}
07.#nav li li:hover .third{
08.display: block;
09.}
Соответственно, убираем вложенное меню третьего уровня с экрана,
делаем ему абсолютное позиционирование и прописываем такие координаты, как в
случае с вертикальным меню.
То есть данный список будет отображаться при
наведении на первый подпункт четвертого пункта и будет отображаться сбоку.
Внимание! Чтобы абсолютное позиционирование работало для списка third, у списков second должно быть задано относительное позиционирование. Но как, если мы же задавали для него абсолютное позиционирование?
Что ж, если вам нужно меню трех уровней, то придется убирать у second абсолютное позиционирование, а у главных пунктов убирать относительное. Вся фишка в том, что в случае с горизонтальным меню это никак не повлияет на отображение навигации – подпункты по-прежнему будут располагаться под главным пунктом при наведении на него.
Зато после этих изменений вы сможете добавить меню для каждого подпункта. Опять же, необязательно оно должно отображаться сбоку, это всего лишь моя идея, вы можете отображать его под подпунктом при наведении на него. Тогда вообще никакого позиционирования не понадобится!
В общем, итог таков:
При наведении на пункт 4 появляется первое выпадающее меню, при
наведении на первый подпункт появляется отдельное меню для него, которое
расположено сбоку.
У других подпунктов такое меню не отображается, так как мы
не создавали его в html-разметке.
Если вы смогли разобраться, то уже самостоятельно сможете создать нужное вам выпадающее меню и самостоятельно решить проблемы, если это возможно в рамках css.
Создать раскрывающееся меню CSS с использованием HTML 5
Меню CSS создаются с использованием форматирования и позиционирования стандартного HTML. Базовая структура представляет собой просто вложенный список. Видимая часть меню — это самый внешний список, а раскрывающиеся части — это подсписки. Каждый элемент в списке является ссылкой на контент. Соответствующее форматирование листа изменяет отображение подменю в зависимости от того, находится ли указатель мыши над элементом внешнего списка. В зависимости от используемого метода подменю можно настроить так, чтобы оно отображалось за пределами экрана или вообще не отображалось, если только указатель мыши не находится над «Главным заголовком». Когда указатель мыши наводится на заголовок, внутренний список отображается, перекрывая внешний, так что главная страница «выпадает».
На самом деле, навигация с помощью клавиатуры в меню такого типа практически невозможна, потому что, хотя клавиша табуляции перемещает «фокус» на элементы подменю, пользователь не может узнать, какой элемент выбран в данный момент, или даже какие предметы есть в наличии. Единственные элементы, к которым можно надежно получить доступ, — это элементы внешнего списка.
Шаг 1. Откройте Macromedia Dreamweaver.
Шаг 2. Затем создайте новый документ, выбрав в меню «Файл» пункт «Новый документ».
Нажмите кнопку «Создать».
Шаг 3: Тип документа HTML 5:
- <голова>
-
-
Название - <тело>
- Создайте здесь текст
Шаг 4: Определите часть тела и задайте содержимое раскрывающегося меню CSS:
Код
- <ул. >
-
-
> Шаг 5: Примените таблицу стилей раскрывающегося меню:
Код
Шаг 6: Напишите полный код для разработанного простого выпадающего меню CSS, в котором используются инструменты HTML 5.
Полное приложение:
Вывод
Создание раскрывающихся меню для сенсорного экрана
Поскольку Amazon Silk работает на устройствах с сенсорным экраном, он не обрабатывает псевдоклассы CSS. :hover так же, как это делает настольный браузер. В десктопном браузере : наведите курсор на становится совпадением при наведении указателя на элемент на
который установлен :hover . Это поведение полезно для раскрывающихся меню, поскольку вы
может создать меню, которое будет скрыто до тех пор, пока пользователь не наведет курсор на родительский элемент. Но на
сенсорный экран, такой дизайн меню на основе наведения может привести к проблемам.
Давайте рассмотрим пример. Следующий HTML-документ содержит два ненумерованных списка, одна вложена в другую. Каждый элемент
<голова>
css">
<тело>
<дел>
<ул>
nav ul li a {
цвет: #FFF;
текстовое оформление: нет;
}
div.nav li:hover {
цвет фона: #4C88BF;
}
div.nav ул ли ул {
дисплей:нет;
}
div.nav ul li: hover ul {
отображение: элемент списка;
положение: абсолютное;
поле сверху: 14px;
поле слева: -15px;
}
div.nav ul li: hover ul li {
поплавок: нет;
}
div.nav уль ли уль ли: hover {
поплавок: нет;
цвет фона: #66B5FF;
}
li.more: после {
содержимое: "\00BB";
поплавок: справа;
поле справа: 7px;
}
Для отображения
раскрывающееся меню, вы наводите курсор на соответствующий
Точно так же вы можете использовать сценарии, чтобы изменить способ отображения меню.
реагирует на сенсорные события. Superfish, подключаемый модуль jQuery, предоставляет такое решение.