CSS. Навигация.

Навигация (продолжение)

Некоторые виды вертикальных текстовых меню все же легче реализовать с помощью таблиц. Например, меню, пункты которого имеют заданную ширину и разделяются пунктирной линией. Текущий пункт выделен фоном, а ссылки не имеют подчеркивания.

Создаем таблицу из четырех строк и одного столбца. Ширину меню задаем в 160 пикселей. Исходя из этого, рассчитываем ширину таблицы в 152 px и отступы равные 4 px каждый. В сумме получится 160 пикселей. В ячейки таблицы вставим пункты меню:

<table width="152" cellpadding="4" cellspacing="0">
<tr><td><a href="имя1.html">HTML</a></td></tr>
<tr><td><a href="имя2.html">CSS</a></td></tr>
<tr><td><a href="имя3.html">Photoshop</a></td></tr>
<tr><td><a href="имя4.html">Flash</a></td></tr>
</table>

Пишем стили.

Назначаем размер шрифта, его цвет и отменяем подчеркивание:
#menu a {
color: green;
font: 16px Arial;
text-decoration: none
}

Примечание: text-decoration позволяет также - underline(подчеркнуть текст), overline (провести линию над текстом), line-through (зачеркнуть текст).

Чтобы сделать пунктирные линии-разделители между ячейками таблицы, создаем в Photoshop фоновое изображение шириной 3px и высотой 1px. Первый пиксель будет красного цвета, а два других белого. Если размножить такой маленький рисунок по оси x, то получится пунктирная линия. Сохраняем изображение под именем bg.gif в папке "image". Задаем пунктирные границы для ячеек при помощи контекстного селектора. Рисунок размножаем по оси x и выравниваем линию по переднему краю:
#menu td {
background: url(images/bg.gif) repeat-x,
text-align: right
}

Примечание: Свойство repeat указывает направление, по которому будет размножено фоновое изображение. Значение repeat-x (размножает изображение только по вертикали), repeat-у (размножает изображение только по горизонтали), no-repeat (запрет на размножение изображения). Если свойство не указано, выполняется действие, положенное по умолчанию для данного элемента.

Так как ячеек в таблице столько, сколько пунктов меню, а пунктирных линий должно быть на одну больше, добавляем одну строку с пустой ячейкой в конце таблицы.

Выделяем пункт текущего раздела серым фоном. Для этого создаем отдельный класс "current":
#menu td.current {
background: #ddd url(images/bg.gif) repeat-x
}

Обязательно дублируем фоновый рисунок и в стиле для класса "current". Если этого не сделать, то фоновый цвет закроет фоновое изображение и пунктира в той ячейке, которая имеет класс "current", не будет.

Для раздела "HTML", итоговый код будет таким:

<html>
<head>
<style type="text/css">
#menu a {
color: green;
font: 14px Arial;
text-decoration: none
}
#menu td {background: url(images/bg.gif) repeat-x;
text-align: right
}
#menu td.current {
background: #ddd url(images/bg.gif) repeat-x
}
</style>
</head>
<body>
<table id="menu" width="160" cellpadding="4" cellspacing="0">
<tr><td class="current"><a href="">HTML</a></td></tr>
<tr><td><a href="">CSS</a></td></tr>
<tr><td><a href="">Photoshop</a></td></tr>
<tr><td><a href="">Flash</a></td></tr>
<tr><td></td></tr>
</table>
</body>
</html>

Меню будет выглядеть так:
menu2

на следующую страницу