2.4. Иерархический раскрывающийся список
Иерархические списки, рассмотренные в предыдущих разделах, являются статическими и полностью развернутыми. Для экономии места на странице можно скрыть элементы нижних уровней и раскрывать их при необходимости наведением указателя мыши на ближайший элемент верхнего уровня. Такие списки будем называть раскрывающимися.
Пример №3 для самостоятельной реализации:
Р
ассмотрим
создание двухуровневого списка. Прежде
всего, следует представить себе его
структуру в развернутом виде и написать
соответствующий HTML-код
(т. е. сделать разметку списка). На рис.
слева показан пример двухуровневого
списка: внешний вид и HTML-код.
Это всего лишь начальный эскиз нашего
проекта. Пункты "Раздел 1" и
"Раздел 4" содержат списки второго
уровня вложенности.
В начальном состоянии все списки второго уровня (подсписки) должны быть невидимыми и появляться только при наведении указателя мыши на элемент <li>, содержащий подсписок. Видимость подсписка можно регулировать параметром display. Чтобы пользователь видел, что элемент списка можно раскрыть, последний можно снабдить соответствующим графическим маркером или/и еще как-то выделить (например, цветом, шрифтом, формой указателя мыши). В данном примере раскрывающиеся элементы ("Раздел 1" и "Раздел 4") выделены графическим маркером с изображением символа "+", а также полужирным шрифтом. Когда элемент раскроется, маркер должен стать обычным, а шрифт - нормальным. Вид маркера задается параметром list-style-image. Итак, нам остается создать таблицу стилей.
В листинге 3 приведен код двухуровневого раскрывающегося списка с указанными характеристиками, а на рис. справа - его внешний вид до и после раскрытия одного из подсписков. В данном примере список заключен в элемент <div id="mylist">, чтобы при желании ему можно было назначить общие параметры, например размеры, позиционирование, шрифт и др.
В обычном состоянии все подсписки не видны, что задается правилом
#mylist ul li ul {display:none}
Сложный селектор данного правила лучше читать справа налево: список, расположенный в элементе списка, который находится в #mylist. Если на элементе списка, содержащем подсписок, находится указатель мыши, то этот подсписок виден, о чем говорит правило
#mylist ul li:hover ul{display:block}
Для элементов, содержащих раскрывающиеся подсписки, предусмотрен класс .opening, в котором указаны графический маркер, полужирный шрифт, а также указатель мыши в виде стрелки (cursor:default), т. к. по умолчанию для списков устанавливается курсор ввода (cursor: text) Разумеется, оформление списка может быть и иным. Элементы подсписков, а также элементы, не содержащие подсписков, вместо обычных текстов могут включать ссылки.
Листинг 3. Раскрывающийся двухуровневый список
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN"
"http://www.w3.org/TR/HTML4.01/loose.dtd">
<html>
<head>
<title>Раскрывающийся двухуровневый список</title>
<style type="text/css">
/* Появление/скрытие: */
#mylist ul li ul {display:none;}
#mylist ul li:hover ul {display:block;}
#mylist ul li:hover {
list-style-image: none;
font-weight:normal
}
.opening { /* раскрывающийся пункт */
list-style-image:url("plus.gif");
font-weight:bold;
cursor:default
}
</style>
</head>
<body>
<div id="mylist">
<ul >
<li class="opening">Раздел 1
<ul>
<li> Подраздел l.l</li>
<li> Подраздел 1.2</li>
</ul>
</li>
<li> Раздел 2</li>
<li> Раздел 3</li>
<li class="opening">Раздел 4
<ul>
<li> Подраздел 4.1</li>
<li> Подраздел 4.2</li>
<li> Подраздел 4.3</li>
</ul>
</li>
<li> Раздел 5</li>
<li> Раздел 6</li>
</ul>
/div>
/body>
/html>