КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ

[Главная страница] [HTML/CSS] [Контакты]

Как видно на рис. 1, такое меню можно создать путем написания CSS-стилей для списка. Свойству display для элементов li нужно присвоить значение inline во избежание переноса каждого следующего пункта на новую строку.

Рис. 1. Создание горизонтально расположенной панели навигации с помощью CSS

Чтобы разместить пункты меню по горизонтали, вначале создадим список, аналогичный тому, что был использован для реализации вертикальной панели навигации:

<div id="navigation">
  <ul>
    <li><a href="#">Recipes</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Buy Online</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 список будет выглядеть, как показано на рис. 2.

#navigation li {
  display: inline;
}

Рис. 3. Отображение пунктов меню по горизонтали

Теперь остается только определить стилевое оформление ссылок навигационной панели:

#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) справа и слева.

Полный текст исходного кода

<!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" />

<style type="text/css">
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;
}
</style>

</head>
<body>
<div id="navigation">
  <ul>
    <li><a href="#">Recipes</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Buy Online</a></li>
  </ul>
</div>
</body>
</html>

Создание средствами CSS навигационной панели с кнопками

С помощью CSS можно без особого труда сделать элементы панели навигации похожими на кнопки. Такой эффект основан на использовании свойства border.

Ниже представлен необходимый код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
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 {
  margin-right: 0.2em;
  padding: 0.2em 0.6em 0.2em 0.6em;
  color: #A62020;
  background-color: #FCE6EA;
  text-decoration: none;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}

#navigation a:hover {
  border-top: 1px solid #717171;
  border-left: 1px solid #717171;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
</style>
</head>

<body>
<div id="navigation">
  <ul>
    <li class="recipes"><a href="#">Recipes</a></li>
    <li class="contact"><a href="#">Contact Us</a></li>
    <li class="articles"><a href="#">Articles</a></li>
    <li class="buy"><a href="#">Buy Online</a></li>
  </ul>
</div>

</body>

</html>

Для создания такого эффекта мы будем использовать горизонтальное меню навигации, созданное в разделе «Создание горизонтального меню с помощью списков и CSS». Чтобы пункты меню стали похожими на кнопки, окрасим левую и нижнюю части рамки одним цветом, а верхнюю и правую – другим, более светлым. Таким образом, кнопка будет казаться объемной:

#navigation a:link, #navigation a:visited {
  margin-right: 0.2em;
  padding: 0.2em 0.6em 0.2em 0.6em;
  color: #A62020;
  background-color: #FCE6EA;
  text-decoration: none;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}

При наведении указателя мыши на кнопку цвет разных частей рамки поменяется местами, создавая эффект нажатия:

#navigation a:hover {
  border-top: 1px solid #717171;
  border-left: 1px solid #717171;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}

Источник: Рейчел Эндрю "CSS и 101 совет"

КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

Навигация