Блоки в документах (стр. 3 из 6)

LI.empty {list-style-type: circle}

Итоговый HTML-код будет следующим:

<li class="empty"><a href="">О компании</a></li>

<li><a href="">Продукция</a></li>

<li><a href="">Услуги</a></li>

<li class="empty"><a href="">Контакт</a></li>

</ul>

А само меню будет выглядеть так, как показано на рис. 11

Рис. 11 Вертикальное текстовое меню, реализованное с помощью ненумерованного списка

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

Рис. 12 Вертикальное меню, реализованное с помощью таблицы

Давайте с вами пройдем нелегким путем, чтобы создать точно такое же меню. Путь будет достаточно познавательный. Начнем с того, что сделаем таблицу из четырех строк и одного столбца. В ячейки таблицы вставим пункты меню. Получится вот такой код:

<table>

</table>

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

#menu A {color: #000; font: 14px Arial; text-decoration: none}

Самое сложное - сделать пунктирные разделители между ячейками таблицы. Я для таких целей всегда использую фоновое изображение. Сейчас нам нужен фоновый рисунок шириной 3 пикселя и высотой 1 пиксель. Первый пиксель будет черного цвета, а два других белого. Если повторять такой маленький рисунок по оси Х, то как раз получится пунктирная линия. Думаю, вы легко себе представите, как такой рисунок формирует пунктир. Допустим, мы такое изображение сделали, назвали его bg1.gif и сохранили в каталог i. Теперь надо задать фон для ячеек таблицы. Для адресации к этим ячейкам будем использовать контекстный селектор.

#menuTD {background: url(i/bg1.gif) repeat-x}

То есть все ячейки таблицы сid=”menu” будут иметь фоновый рисунок. Фоновое изображение будет повторяться только по оси Х. Имеет смысл посмотреть на промежуточный результат. Он показан на рис. 13.

Рис. 13 Промежуточный результат создания вертикального меню

Если сравнить промежуточный результат с рис. 12, то становится ясно, что до него еще далеко. Во-первых, не хватает пунктира после последнего пункта. Это и понятно, потому что ячеек ровно столько, сколько пунктов меню, а пунктирных линий на одну больше. Проблема решается добавлением одно лишней строки с пустой ячейкой в конце таблицы. Кроме того, нет выравнивания по правому краю. Необходимо в стиль для ячеек таблицы добавить выравнивание с помощью свойства text-align.

#menu TD {background: url(i/bg1.gif) repeat-x; text-align: right}

Дальше надо задать ширину меню и увеличить отступы внутри ячейки, чтобы создать необходимое пространство. Дизайнер сделал меню шириной 148 пикселей. Мы зададим ширину таблицы 140 пикселей и отступы 4 пикселям. В сумме получится как раз 148 пикселей. HTML-код немного преобразуется:

<tr><td><a href="">О компании</a></td></tr>

<tr><td><a href="">Продукция</a></td></tr>

<tr><td><a href="">Услуги</a></td></tr>

<tr><td><a href="">Контакт</a></td></tr>

</table>

Осталось сделать совсем чуть-чуть, а именно выделить пункт текущего раздела серым фоном. Для этого можно ввести отдельный класс. Назовем его current. Стиль для класса current будет таким:

#menu TD.current {background: #DDD url(i/bg1.gif) repeat-x}

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

Итоговый код вот такой:

#menu TD {background: url(i/bg1.gif) repeat-x; text-align: right}

#menu TD.current {background: #DDD url(i/bg1.gif) repeat-x}

#menu A {color: #000; font: 14px Arial; text-decoration: none}

. . .

<tr><td class="current"><a href="">О компании</a></td></tr>

<tr><td><a href="">Продукция</a></td></tr>

<tr><td><a href="">Услуги</a></td></tr>

<tr><td><a href="">Контакт</a></td></tr>

</table>

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

Горизонтальные

Чаще всего используются графические горизонтальные меню. Принципиально есть две их разновидности: резиновые и фиксированные. Резиновые меню растягиваются при увеличении окна браузера, а фиксированные – нет.

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

Давайте лучше с вами реализуем резиновое меню, которое показано на рис. 14

Рис. 14 Графическое горизонтальное резиновое меню на сайте www.rubi.ru

Особенность меню в том, что текущий пункт помечен галочкой сверху. Для начала нам надо заготовить пять картинок: четыре с пунктами меню и один с галочкой. Затем начнем создавать таблицу. Понятно, что надо сделать два ряда: в первом будет галочка, а во втором пункты меню. Каждый ряд будет состоять из четырех ячеек.

Ширину каждой ячейки надо задавать пропорционально относительно ширины таблицы. Раз у нас ширина таблицы 100% а ячеек четыре, то ширина каждой ячейки будет 25%. Картинку в каждой ячейке надо центрировать.

Код таблицы будет вот такой:

<tr>

</tr>

<tr>

</tr>

</table>

Для центрирования картинок внутри таблицы можно написать такой стиль:

#menu TD {text-align: center}

Меню будет выглядеть практически правильно, как видно на рис. 15.

Рис. 15 Вид резинового горизонтального меню с небольшой ошибкой

Ошибка в том, что галочка прилипает к пункту меню. На макете отступ между ними составляет ровно 11 пикселей, так что необходимо его реализовать. Есть два способа: с помощью HTML и с помощью CSS. Для начала попробуем сделать отступ стандартными средствами HTML.

Для этого, конечно же, нужна распорка, то есть невидимый 0.gif. Его надо вставить в ячейку таблицы сразу после галочки и задать ему высоту 11 пикселей:

<td>

<br>

</td>

Второй способ менее надежный, но немного более красивый. Картинку с галочкой можно взять в отдельный блок и задать для блока нижний отступ:

<td>

</td>

На рис. 16 показан окончательный вид меню при разных размерах окна браузера.

Рис. 16 Вид горизонтального резинового меню при разных размерах окна браузера

Как видите, меню ведет себя совершенно правильно, то есть как и ожидалось.

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

Дублирующая навигация

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

Рис. 17 Дублирующее меню

Реализуется оно очень просто. Единственная особенность в том, что иногда ссылки в дублирующем меню отличаются от обычных ссылок. Реализовать такое отличие проще всего с помощью контекстного селектора. Например, следующим образом:

#double_menu A {color: #999; font-size: 11px}

. . .