Горизонтальное меню сделать достаточно легко, нужно лишь немного воображения и знания html и css.
Для начала попробуем сделать простое горизонтальное меню. Вот пример как оно будет выглядеть:
Самое главное понять принцип, потом самостоятельно сможете сделать более сложное. Само меню размечается следующим фрагментом html кода:
<div id="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#" id="nowopen">PHP</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>Видно, что это простой ненумерованный список, где одному из пунктов присвоен id. Он присвоен пункту текущей страницы, чтобы этот пункт отображался по-другому. То есть на каждой странице он должен быть присвоен соответствующему пункту меню. # - URL ссылки.
Теперь перейдём к правилам CSS. Первое что нам надо, это то, чтобы пункты меню отображались друг рядом с другом, а не друг под другом. Для этого пишем следующее:
#menu ul li {display: inline;}Потом поработаем с самим элементом ul. Нам нужна горизонтальная линия по всей длине страницы, на которой как бы будут расположены пункты меню и нужно изменить расстояние от края страницы. Это зависит от того, где вы хотите чтобы располагалось меню.
#menu ul {border-bottom:1px solid #000000; margin-left:0; padding:3px 0;}Далее создаем сами прямоугольники, куда будут помещены пункты и внутреннее расстояние в них.
#menu ul li a {text-decoration:none; margin-left:3px; border:1px solid #000000; padding: 3px 4px; border-bottom:0; background:#CEDEFF;}Задаем, как будут выглядеть посещённые, не посещённые и пункты меню под указателем мыши.
#menu ul li a:link {color:#493;}
#menu ul li a:visited {color:#647;}
#menu ul li a:hover {color:#000; background:#6699FF; border-color:#227}
И, наконец, указываем вид пункта текущей страницы.
#menu ul li a#nowopen {background:#fff; border-bottom: 1px solid #fff;}Выровнять меню по центру можно, задав #menu {margin:0 25% 0 25%;}
Используя вместо однотонных фонов изображения, можно получить самые разнообразные по дизайну меню.
Подключаем CSS к HTML, меню готово. Файл таблицы стилей.
Применяя различные изображения, мы получим вполне серьезные меню.
Скачать меню 1
Скачать меню 2
Скачать меню 3
Скачать меню 4
Скачать меню 5
Если для каждого пункта меню фон разный, нужно будет присвоить свой класс каждому пункту меню и для каждого класса прописать правила CSS, как сделано в следующем примере для второго пункта меню: Пример с разными фонами пунктов меню, или по аналогии сделать через id. Если фоном у вас являются изображения, заменяем соответствующие значения background: #цвет на background: url(путь до картинки.gif)
Скачать меню 6