2.5. Меню на основе списка
Р
ассмотрим
построение двухуровневого раскрывающегося
меню, состоящего из горизонтального
главного меню и вертикальных подменю,
которые появляются при наведении
указателя мыши на соответствующий пункт
главного меню. Необходимый для этого
код можно получить путем некоторой
модификации кода для двухуровневого
раскрывающегося списка (см. листинг
3).
Пример №4 для самостоятельной реализации:
В нашем примере главное горизонтальное меню содержит три пункта, первые два из которых раскрываются. В листинге 4 приведен вариант такого меню, а на рис. - его внешний вид. Обратите внимание, что горизонтальное расположение пунктов меню обеспечивается параметром float:left. Маркеры элементов списка удалены параметром list-style-type: none.
Листинг 4. Раскрывающееся двухуровневое меню
<!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 {
list-style-type:none; /* маркеры не нужны */
cursor:default
}
#mylist ul li.opening { /* горизонтальное меню*/
float:left;
width:100px;
border-left:solid 1px;
border-right:solid 1px;
}
/* Появление/скрытие: */
#mylist ul li ul {
display:none;
border:solid 1px;
width:120px;
background:yellow;
font-weight:normal;
}
#mylist ul li:hover ul{
display:block
}
.opening { /* пункт главного меню*/
background:#00ffff;
font-weight:bold;
}
</style>
/head> <body>
<div id="mylist">
<ul >
<li class="opening">Раздел 1
<ul>
<li> Подраздел l.l</li>
<li> Подраздел 1.2</li>
</ul>
</li>
<li class="opening">Раздел 2
<ul>
<li> Подраздел 2.1</li>
<li> Подраздел 2.2</li>
<li> Подраздел 2.3</li>
</ul>
</li>
<li class="opening">Раздел 3
</ul>
</div>
</body>
</html>
Данное меню обладает рядом очевидных недостатков, связанных с выравниванием элементов: положение названий пунктов горизонтальной части меню не центрировано, отступы названии пунктов вертикальных подменю слишком велики и прямоугольник подменю немного сдвинут вправо относительно границы между пунктами горизонтального меню.
2.6. Выравнивание элементов списка
Элементы многоуровневого списка позиционируются относительно друг друга с некоторыми отступами. Маркеры также занимают некоторое предопределенное по умолчанию положение. Отступы и положение маркеров можно задавать с помощью параметров CSS.
Н
а
рис. слева приведен пример двухуровневого
списка без каких-либо параметров CSS
кроме задающих границы блоков. Это
сделано только для наглядности вложенности
элементов: границы <ul>
отображаются штриховой линией, a
<li>-
сплошной. Обратите внимание на
различия в определениях блоков
браузерами Internet
Explorer
и Firefox.
Opera,
Safari
и Chrome
создают блоки для элементов списка так
же, как и Firefox.
В
идимые
отступы элементов списка определяются
параметрами margin
и padding.
Если они не указаны явно в таблице
стилей, то устанавливаются браузером
автоматически. При этом Internet
Explorer
устанавливает отступы заданием
значения параметра margin-left,
а остальные браузеры - padding-left
(рис. справа). Поэтому, если вы попытаетесь
задать отступ посредством только
какого-нибудь одного параметра, то
получите разные результаты для Internet
Explorer
и других браузеров. Чтобы отображение
было одинаковым, необходимо задать
значения, как для margin,
так и для padding.
Положение маркера относительно элемента списка задается параметром list-style-position, принимающим значения:
inside- маркер располагается внутри блока элемента и обтекается содержимым последнего;
outside - маркер располагается вне блока элемента (значение по умолчанию).
На нижнем рис. показан список при различных значениях параметра list-style-position. Для наглядности элементам списка заданы видимые границы шириной 1 рх. Соответствующий код приведен в листинге 5.
Пример №5 для самостоятельной реализации:
Листинг 5. Положение маркера относительно элемента списка
<!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"> /* Границы для наглядности */
ul {
border: dashed 2px;
margin-left:30рх;
padding-left:50px;
list-style-position:outside; /*другое значение: inside*/
}
li {
border:solid 1px;
}
</style>
</head>
<body>
<ul>
<li>Раздел 1 Раздел 1 Раздел 1