В этой статье я покажу примеры создания меню сайта с помощью CSS. Не знаю, насколько распространен такой вид верстки меню, но я придумал его сам. Надеюсь, что не заново изобрел колесо :). Наверное, с помощью таблицы сверстать меню было бы проще всего, но так как сейчас в моде верстка div'ами, я верстал с помощью тега <div>
Сложность: высокий уровень
Горизонтальное меню
Итак, верстаем горизонтальное меню. Для начала открываю всю свою пачку браузеров (Google Chrome, Internet Explorer, Mozilla Firefox, Opera, Safari) для просмотра того, что я "слеплю".
Примечание: заметка для юного верстальщика - если все корректно изображается в "ослике" IE, значит с 90% вероятностью будет корректно отображаться в других браузерах :).
Вот то, что я сверстал:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Делаем меню сайта</title>
<style type="text/css">
body {
margin: 0; /* убираем поля для body */
padding: 0; /* убираем отступы для body */
}
div.menu {
background: #000000; /* фон для меню */
min-width: 1000px; /* устанавливаю минимальную ширину для меню */
padding: 10px; /* отступы для меню */
text-align: center; /* выравниваю элементы меню по центру */
width: 100%; /* ширина меню в процентах */
}
a.point {
color: #ffffff; /* цвет ссылок меню */
font-size: 15pt; /* размер шрифта */
padding: 10px 50px 10px 50px; /* отступы для элементов меню */
text-decoration: none; /* убираю подчеркивание */
}
div.menu a:hover { /* изменяем ссылку при наведении указателя мыши */
background: #b4b4b4; /* меняю фон при наведении */
text-decoration: underline; /* подчеркивание при наведении */
}
</style>
</head>
<body>
<div class="menu">
<a href="index.html" class="point">Главная</a>
<a href="hobbies.html" class="point">Мой досуг</a>
<a href="photo.html" class="point">Фотки</a>
<a href="about.html" class="point">Обо мне</a>
<a href="guestbook.html" class="point">Гостевая</a>
</div>
</body>
</html>
Стили конечно лучше задать отдельным файлом через связывание с помощью тега <link>, а для примера сойдет <style>.
Не знаю насколько такой вариант меню актуален, но ИМХО неплохо и легко. На всех моих браузерах отображалось корректно.