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

Описание: Программирование в HTML
Модератор: Aleksandr

Дим M
Автор темы, Администратор
Администратор
Аватара
Дим M
Автор темы, Администратор
Администратор
Сообщения: 1608
Зарегистрирован: 5 апреля 2013
С нами: 10 лет 11 месяцев

#1 Дим » 13 мая 2013, 20:04

Как сделать горизонтальное меню в 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;} 


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

Код: Выделить всё

#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;} 
[center]i love you [s]mxIni[/s] Mysql[/center]


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «HTML»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 3 гостя