Этот и многие другие уроки вы можете найти на моей странице - knights2005.narod.ru. Добро пожаловать!
Мое меню вы можете скачать здесь - knights2005.narod.ru/portfolio.html
Рассмотрим вариант создания горизонтального меню с помощью списков (теги <ul> и <li>). Замечу, что этот вариант является наиболее распространенным.
Создадим такую заготовку в документе:
<ul id="menu">
<li><a href="#">Пункт меню 1</a></li>
<li><a href="#">Пункт меню 2</a></li>
<li><a href="#">Пункт меню 3</a></li>
<li><a href="#">Пункт меню 4</a></li>
<li><a href="#">Пункт меню 5</a></li>
</ul>
Проставьте свои названия пунктов вместо "Пункт меню"
Начнем с присвоения параметрам padding и margin значения 0 для тегов <body>, <ul> и <li>:
<style>
body, ul, li { margin: 0; padding: 0; }
</style>
Добавим такие параметры для нашего меню:
#menu { background: url(путь к изображению...) repeat-x; float: left; list-style: none; min-width: 750px; width: 100%; }
Рассмотрим их по порядку. С помощью параметра background мы задаем путь к фоновому изображению для меню. В моем примере это изображение размером 1 на 45 пикселей. Вы можете нарисовать свое фоновое изображение, Photoshop вам в помощь. Благодаря значению repeat-x мы заполняем изображение по горизонтали.
Наиболее важный параметр здесь - float, который задает обтекание меню по левому краю.
list-style: none убирает маркеры списков, которые стоят по умолчанию. min-width задает минимальную ширину меню, width со значением 100% расширяет меню на всю ширину содержащего его родительского элемента (в нашем случае на тег <body>, т.е. на весь документ).
Теперь поработаем над нашими пунктами меню:
#menu li { background: url(путь к изображению) repeat-x; border-left: white solid 1px; display: block; float: left; line-height: 1.5em; min-width: 10%; padding: 10px; text-align: center; }
Для пунктов меню мы задаем то же фоновое изображение, что и для меню, слева от пунктов меню делаем рамку толщиной 1 пиксель (border-left). Для отображения рамки справа в последнем пункте меню в теге <li> используем атрибут style и указываем border-right. Показываю на примере моего последнего пункта:
<li style="border-right: solid 1px #fff;"><a href="#">О нас</a>
Вернемся к стилям меню. Необходимые параметры здесь - display со значением block и float: left, наконец-то делающие наше меню горизонтальным.
line-height увеличивает высоту строки, min-width устанавливает минимальную ширину пункта меню, padding задает отступы вокруг текста, text-align со значением center выравнивает пункты меню по центру
Наше меню почти готово. Осталось только сделать несколько штрихов.
#menu a { color: white; font-family: Tahoma, Courier, Arial; font-size: 15px; text-decoration: none; text-transform: uppercase; }
#menu li:hover { background: #f29a79; }
Здесь мы настраиваем ссылки меню, задавая им параметры форматирования, такие как размер и семейство шрифта, цвет пунктов меню и т.д. text-decoration: none отключает подчеркивание ссылок, параметр text-transoform: uppercase делает все символы заглавными. Стоит отметить, что шрифтов можно указать несколько. При отсутствии одного шрифта браузер сможет выбрать другой.
#menu li:hover изменяет бэкграунд при наведении на него курсора мыши.
Полность приведу полученный документ с кодом:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Горизонтальное меню сайта</title>
<style type="text/css">
body, ul, li { margin: 0; padding: 0;}
#menu { background: url(путь к изображению) repeat-x; list-style: none; width: 100%; float: left;}
#menu li { background: url(путь к изображению) repeat-x; border-left: white solid 1px; display: block; float: left; line-height: 1.5em; min-width: 10%; padding: 10px; text-align: center; }
#menu a { color: white; font-family: Tahoma, Courier, Arial; font-size: 15px; text-decoration: none; text-transform: uppercase; }
#menu li:hover { background: #f29a79; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Помощь</a>
<li><a href="#">Контакты</a>
<li style="border-right: white solid 1px;"><a href="#">О нас</a></li>
</ul>
</body>
</html>
Примечание: стили естественно лучше вынести в отдельный файл.
Все - наше меню готово! Наслаждайтесь проделанной работой!