Как сделать горизонтальное меню в HTML

[Дим]

Как сделать горизонтальное меню в HTML
Автор: Сеоша

Горизонтальное меню сделать достаточно легко, нужно лишь немного воображения и знания html и css. Для начала попробуем сделать простое горизонтальное меню.

Самое главное понять принцип, потом самостоятельно сможете сделать более сложное. Само меню размечается следующим фрагментом html кода:

Code: Select all

<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. Первое что нам надо, это то, чтобы пункты меню отображались друг рядом с другом, а не друг под другом. Для этого пишем следующее:

Code: Select all

#menu ul li {display: inline;} 

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

Code: Select all

#menu ul {border-bottom:1px solid #000000; margin-left:0; padding:3px 0;} 

Далее создаем сами прямоугольники, куда будут помещены пункты и внутреннее расстояние в них.

Code: Select all

#menu ul li a {text-decoration:none; margin-left:3px; border:1px solid #000000; padding: 3px 4px; border-bottom:0; background:#CEDEFF;} 

Задаем, как будут выглядеть посещённые, не посещённые и пункты меню под указателем мыши.

Code: Select all

#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} 

И, наконец, указываем вид пункта текущей страницы.

Code: Select all

#menu ul li a#nowopen {background:#fff; border-bottom: 1px solid #fff;} 

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

Таблица стилей.

Code: Select all

#menu ul li {display: inline;}
#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;}