Урок 5. Создание меню для сайта

Горизонтальная  панель навигации будет находится под шапкой, (в подвале мы сделаем простое дублирование обычными ссылками). Для её реализации мы воспользуемся таким элементом как маркированный список.

Данный список в HTML обозначается тэгом ul. Элементы списка обозначаются тэгом li. Тэги имеют парные закрывающие тэги, и тэг li вложен в тэг ul.

После конструкции

<div id= «header» >
</div>

запишем следующее:

<div id= «nav» >
<ul>
< li >Главная</ li >
<li><a href= «#»>Рейтинги</a></li>
<li><a href= «#»>Статьи</a></li>
<li><a href= «#»>Аналитика</a></li>
<li><a href= «#» >Электронные услуги</a></li>
</ul>
</div>

Наши разделы оформлены как пункты списка, и каждый пункт, кроме первого, является ссылкой. Вместо адреса несуществующих страниц мы поставили решётку (#), которая всегда возвращает нас на текущую страницу.

В файле style.css запишем правило для блока навигации:

#nav {
background: url(img/nav-bg.jpg) repeat-x;
color: #f00;
font-size: 120%;
font-weight: bold;
line-height: 1.8em;
text-align: center;
}

Блок навигации мы назвали атрибутом nav. Вначале укажем общие настройки для него: бэкграунд — это картинка с именем nav-bg.jpg размером 8х35 пикселей.  Это обычный “столбик” с градиентом от белого к серому сверху вниз (Чтобы растянуть его по всей полосе навигации, мы указали в значении слово repeat-x, что означает “повторить по оси х”, то есть по горизонтали). Создадим столбик в графическом редакторе и сохраним в папке img.

Значение 1.8em показывает, что шрифт увеличен на 1.8 высоты стандартной буквы, text-align: center; —  выравнивание текста по центру.

#nav ul {
list-style-type: none;
}

Это правило указывает, что у списка не должно быть никаких маркеров. Это задаётся значением none.

#nav li {display: inline;
margin: 0 8px;
}

По умолчанию строки списков всегда располагаются в столбик. Чтобы этого не происходило, мы указываем для строк списка расположение по горизонтали, то есть в линию — display: inline;

Добавляем отступы: сверху и снизу по нулям, с боков по 8 пикселей.

#nav li a {color: #0c0;
}

#nav li a:hover {color: #f00;
}

Укажем, каким образом наше меню будет реагировать на наведение мышки.

#nav li a {
color: #0c0;
}

#nav li a:hover {
color: #f00;
}

В первом мы обозначили цвет ссылки в обычном состоянии, а во втором — в активном, то есть при наведении мыши.

a {
text-decoration: none;
}

При создании стилей для меню каждое последующее правило получает “в наследство” характеристики предыдущего: от nav к ul, от ul к li. Все вместе они являются вложенными в тэг контейнера и получают также от него часть правил (в частности, центрирование посередине экрана и заданную ширину в 760 пикселей). Это и является своеобразным каскадом.

Сохраним страницу и смотрим, что получилось в браузере