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

Горизонтальное меню сделать достаточно легко, нужно лишь немного воображения и знания 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

Добавить комментарий