Горизонтальные меню
Горизонтальные меню могут быть резиновыми и фиксированными. Резиновые растягиваются при увеличении размера окна браузера, а фиксированные - нет.
Для фиксированного меню создаем таблицу из одного ряда и необходимого количества столбцов, в которые помещаются пункты меню. У таблицы обнуляем отступы, расстояния между ячейками и устанавливаем ширину ячеек.
В резиновом меню ширину каждой ячейки задаем пропорционально ширине таблицы.
Создадим такое горизонтальное резиновое меню:
В Photoshop делаем пять картинок, по числу пунктов меню. Каждый рисунок должен быть на прозрачном фоне и сохранен в формате gif.
Затем создаем таблицу из двух рядов. В первом будут картинки, а во втором их текстовые эквиваленты. Каждый ряд будет состоять из 5 ячеек. Так как ширина таблицы 100%, а ячеек, по числу пунктов меню, надо пять, то ширина каждой ячейки будет 20%.
Картинку в каждой ячейке, и текст под ней располагаем по центру ячейки:
#menu td {text-align:center;
font: bold 10px Verdana
}
Посмотреть как выглядит меню и разобраться с HTML-кодом можно здесь.
Дублирующая навигация
Дублирующая навигация располагается внизу страницы, представляет собой дублирование ссылок на важные разделы сайта и может быть совсем не похожа на основное меню.
Чтобы изменить цвет текста, или назначить свой шрифт, задаем новый стиль с помощью контекстного селектора:
#double_menu a {color: red;
font: bold 14px
}
Код дублирующего меню выгладит так:
<html><head>
<style type="text/css">
#double_menu a {
color: red;
font: 14px
}
</style>
</head>
<body>
<div id="double_menu">
<center><a href=""> HTML</a> | <a href=""> CSS</a> | <a href=""> Photoshop</a> | <a href=""> Flash</a> | <a href=""> Контакты</a></center>
</div>
</body>
</html>
