Приднестровская поддержка XOOPS
Во всех предыдущих примерах мы рассматривали вертикальную панель навигации, которую чаще всего можно встретить на сайте слева или справа по отношению к области с основным контентом. Однако навигационные ссылки также часто располагаются по горизонтали в верхней части документа.
Решение
Как видно на рис. 4.8, такое меню можно создать путем написания CSS-стилей для списка. Свойству display для элементов li нужно присвоить значение inline во избежание переноса каждого следующего пункта на новую строку.
Рис. 4.8. Создание горизонтально расположенной панели навигации с помощью CSS (DEMO)
Ниже представлен использованный HTML- и CSS-код.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Chapter 4 - horizontal list menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="listnav_horiz.css" />
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Галерея</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</body>
</html>
body {
background-color: #ffffff;
color: #000000;
margin: 0;
padding: 1em;
font: 1em Arial, Helvetica, sans-serif;
}
#navigation {
font-size: 90%;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
Обсуждение
Чтобы разместить пункты меню по горизонтали, вначале создадим список, аналогичный тому, что был использован для реализации вертикальной панели навигации:
<div id="navigation">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Галерея</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
Напишем для контейнера #navigation несколько правил стилей для задания базовых параметров шрифта, как и в примере с вертикальным
меню. Для данного элемента также скорее всего потребуется задать
свойства для его позиционирования на странице:
#navigation {
font-size: 90%;
}
Затем уберем маркеры и отступы, создаваемые браузером по умолчанию для элемента ul:
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 1em;
}
Свойство, располагающее список по горизонтали, применяется по отношению к элементу li. Таким образом, после присваивания свойству display значения inline список будет выглядеть, как показано на рис. 4.9.
#navigation li {
display: inline;
}
Рис. 4.9. Отображение пунктов меню по горизонтали
Теперь остается только определить стилевое оформление ссылок навигационной панели:
#navigation a:link, #navigation a:visited {
padding: 0.4em 1em 0.4em 1em;
color: #FFFFFF;
background-color: #B51032;
text-decoration: none;
border: 1px solid #711515;
}
#navigation a:hover {
color: #FFFFFF;
background-color: #711515;
}
Если вы хотите, чтобы каждая ссылка располагалась в «окошке», как в этом примере, запомните, что для создания пустого пространства между его краями и ссылкой необходимо задать больше внутренних отступов (padding) справа и слева, а для отделения элементов навигационного меню друг от друга – задать внешние отступы (margin) справа и слева.
Отправитель | Нити |
---|
5 пользователь(ей) активно (3 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 5 далее... |