Оглавление

Создание горизонтального меню с помощью списков и CSS

Во всех предыдущих примерах мы рассматривали вертикальную панель навигации, которую чаще всего можно встретить на сайте слева или справа по отношению к области с основным контентом. Однако навигационные ссылки также часто располагаются по горизонтали в верхней части документа.

 

Решение
Как видно на рис. 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) справа и слева.

9
 << Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити