Мы рассмотрели то, как можно сделать горизонтальное выпадающее CSS меню и вертикальное выпадающее CSS меню. Сегодня мы поговорим о том, как создать горизонтальное CSS меню для сайта. Но в этот раз меню не будет выпадающим, то есть мы планируем, что не потребуются подразделы.

Создание CSS меню. Просто меню для сайта. Горизонтальное CSS меню.

Как и в прошлой публикации, меню сайта будет создано при помощи маркированного HTML списка (при помощи тегов <li> и <ul>). Оформлять горизонтальное меню для сайта мы будем при помощи таблицы стилей (CSS), мы не будем использовать JavaScript для создания горизонтального CSS меню. Как и в прошлый раз, мы не будем использовать изображений для создания горизонтального CSS меню.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 1 -создание HTML макета меню.

И так, начнем мы с создания HTML макета меню сайта. Для этого мы воспользуемся HTML списком, ненумерованным списком:

[php]</p>
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Создание CSS меню</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div id="hmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Ссылка1</a></li>
<li><a href="#">Ссылка2</a></li>
<li><a href="#">Ссылка3</a></li>
<li><a href="#">Ссылка4</a></li>
</ul>
<span style="color: #222222;"><span style="line-height: 18px;"><br></span></span>
</div>
</body>
</html>
<p style="text-align: justify;">[/php]

Сразу подключаем файл таблиц стилей, который называется style.css. При помощи тегов <ul> и <li> создаем HTML макет меню для сайта. Поскольку, пункты нашего горизонтального CSS меню должны куда-нибудь вести, делаем их ссылками при помощи тега <a>, в качестве значения атрибута href устанавливаем #(хэш), ссылки с таким атрибутом никуда не ведут. HTML список меню помещаем в контейнер <div> с идентификатором hmenu, поскольку внутри элемента <body> могут находиться только блочные HTML элементы и элементы <ins> и <del>. После созданного списка стоит тег <br> — перевод строки, он нужен для того, чтобы растянуть меню сайта по горизонтали на всю ширину окна браузера.

Создание меню для сайта. Горизонтальное CSS меню. Шаг 2 — Задаем стили для меню сайта.

Первое, что нужно сделать — это задать цвет фона и ширину контейнера <div> в CSS, хотя вы знаете, что блочные HTML элементы занимают всю доступную ширину, в отличие от строчных HTML элементов:

[php]
#menu{
width: 100%;
background-color: #333;
}
[/php]

Затем нам нужно задать общий стиль для горизонтального CSS меню:

[php]

#menu ul{

margin: 0;

padding: 0;

float: left;}

[/php]

Здесь мы убираем внутренние и внешние отступы, а также «прижимаем» меню сайта к левой границе окна браузера.

Теперь можно задать стиль отображения для всех пунктов меню сайта:

[php]

#menu ul li{
display: inline;}

[/php]

Мы знаем, что элемент <li> относится к блочным, то есть занимает всю область, в которой он стоит, из-за этого наше меню было вертикальным, добавив CSS свойство display: inline, мы сделали элементы <li> строчными, а наше меню стало горизонтальным.

Теперь мы можем задать CSS стили для содержимого контейнеров <li>, то есть стили для навигации горизонтального меню(для тега <a>):

[php]

#menu ul li a{
float: left;
text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; }

[/php]

CSS свойство float:left выравнивает горизонтальное меню и контейнер <div> по верхней границе. Все ссылки по умолчанию подчеркиваются браузером, чтобы избавиться от этого недоразумения мы используем свойство text-decoration:none. Далее мы задаем цвет ссылок, то есть цвет текста меню сайта. Внутренними отступами мы расширяем наше горизонтальное меню.

Задаем стили для посещенных пунктов меню и то, как будут отображаться пункты меню, при наведение на них курсора мыши:

[php]</p>
#menu ul li a:visited{
color: white;}

#menu ul li a:hover{
color: #fff;
background-color:#0b75b2;}
<p style="text-align: justify;">[/php]

Ну тут все понятно: мы задаем цвет текста и цвет фона для горизонтального CSS меню.

Осталось задать стиль для тега <br>, чтобы выровнять по высоте горизонтальное меню и элемент <div>:

[php]</p>
<p style="text-align: justify;">br{clear:left;}</p>
<p style="text-align: justify;">[/php]

Это горизонтальное CSS меню будет растягиваться на всю ширину окна браузера и при это данное меню корректно отображается во всех браузерах.

Исходные коды примеров вы можете скачать на публичных страницах вконтакте: раз и два.

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru. Не забываем комментировать и делиться с друзьями;)

Возможно, эти записи вам покажутся интересными


Выберете удобный для себя способ, чтобы оставить комментарий

This article has 8 comments

  1. Евгений Reply

    Мне надо типа такого шаблона и чтобы форум бы с таким же стилями.

    Смотреть тут - http://web-j.ru/index.php/forum

    Кто нибудь подскажет, может видели.

    Спасибо...

  2. Дмитрий Reply

    Здравствуйте, я новчиек, но либо я такой нуб еще в HTML или я нашел ошибку. Прсмотритесь, название блока hmenu, а стили создаете вы для блока «menu», по идее которого даже нету в коде.

    • Кирилл Reply

      Спасибо, что заметили, обязательно исправлю.

  3. saksonskiy Reply

    Подскажите что не так делаю. сделал как написано но у меня все менюшки накладываются один на одну как с этим бороться?

  4. Алексей Reply

    Статья очень помогла. Спасибо.

  5. Борис Борисович Reply

    Спасибо за труд , не шедевр (я про объяснение само) но хороша

    • Кирилл Reply

      Борис Борисович, да не за что, знаю, что не шедевр, будем над этим работать.

  6. Макс Reply

    Исправьте ошибку ! В разметке div — «hmenu» , а в стилях же просто div — «menu»

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Loading Disqus Comments ...