Оглавление

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

На многих веб-сайтах в верхней части страницы можно встретить навигационное меню, состоящее из вкладок. Его часто создают с использованием изображений. Но такой подход снижает доступность сайта и может порождать сложности, если навигация создается с помощью системы управления контентом (CMS), предоставляющей пользователю возможность удаления и добавления вкладок, а также изменения текста ссылок. Однако вкладки можно создать с помощью фоновых изображений и текста, оформленных с помощью CSS.

 

Решение
Изображенная на рис. 4.11 панель навигации с вкладками была создана путем написания правил стилей для горизонтального списка.

 

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

Рис. 4.11. Создание навигационной панели с вкладками с помощью CSS


Ниже представлен использованный 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>Глава 4 - Панель навигации с вкладками</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="tabs.css" />
</head>
<body id="home">
<div id="header">
  <ul>
        <li class="home"><a href="#">Главная</a></li>
        <li class="news"><a href="#">Новости</a></li>
        <li class="forum"><a href="#">Форум</a></li>
        <li class="gallery"><a href="#">Галерея</a></li>
        <li class="contacts"><a href="#">Контакты</a></li>
  </ul>
</div>
<div id="content">
<h1>Что такое XOOPS?</h1>
<p>XOOPS - это динамический OO...</p>
</div>
</body>
</html>

 

 

body {
  font: .8em/1.8em verdana, arial, sans-serif;
  background-color: #FFFFFF;
  color: #000000;
  margin: 0 10% 0 10%;
}

#header {
  float: left;
  width: 100%;
  border-bottom: 1px solid #8DA5FF;
  margin-bottom: 2em;
}

#header ul {
  margin: 0;
  padding: 2em 0 0 0;
  list-style: none;
}

#header li {
  float: left;
  background-image: url("images/tab_left.gif");
  background-repeat: no-repeat;
  margin: 0 1px 0 0;
  padding: 0 0 0 8px;
}

#header a {
  float: left;
  display: block;
  background-image: url("images/tab_right.gif");
  background-repeat: no-repeat;
  background-position: right top;
  padding: 0.2em 10px 0.2em 0;
  text-decoration: none;
  font-weight: bold;
  color: #333366;
}
#home #header li.home,
#news #header li.news,
#forum #header li.forum,
#gallery #header li.gallery,
#contact #header li.contact 
{
    background-image: url("images/tab_active_left.gif");
}
#home #header li.home a,
#news #header li.news a,
#forum #header li.forum a,
#gallery #header li.gallery a,
#contact #header li.contact a {
  background-image: url("images/tab_active_right.gif");
  background-color: transparent;
  color:#FFFFFF;
}


Обсуждение
Для создания навигационного меню со вкладками в данном случае был использован многократно проверенный на практике метод «раздвижных дверей» Дугласа Боумана (Douglas Bowman). По структуре меню навигации является маркированным списком, подобным тому, с которым мы работали на протяжении настоящей главы, за тем лишь исключением, что теперь каждому элементу li был присвоен атрибут class для описания содержащейся внутри ссылки. Кроме того, список является дочерним элементом контейнера div с идентификатором (id) header. Название приема возникло по аналогии – используемые два изображения
перекрывают друг друга и при увеличении размера шрифта «разъезжаются».

 

Для создания такого эффекта нам потребуется четыре изображения: два для представления обычного вида вкладки и два для представления ее вида при наведении указателя мыши. Использованные в данном примере изображения показаны на рис. 4.12. Как видите, их размер значительно превышает обычный размер вкладки, что обеспечивает возможность ее увеличения, например, если пользователь сделает шрифт крупнее.

 

Файлы изображений для создания вкладок

Рис. 4.12. Файлы изображений для создания вкладок


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

<div id="header">
  <ul>
        <li class="home"><a href="#">Главная</a></li>
        <li class="news"><a href="#">Новости</a></li>
        <li class="forum"><a href="#">Форум</a></li>
        <li class="gallery"><a href="#">Галерея</a></li>
        <li class="contacts"><a href="#">Контакты</a></li>
  </ul>
</div>


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

#header {
  float: left;
  width: 100%;
  border-bottom: 1px solid #8DA5FF;
  margin-bottom: 2em;
}


Как видите, контейнер объявлен плавающим с помощью свойства float с выравниванием влево. Это свойство нужно указать и для отдельных пунктов списка; объявление родительского контейнера плавающим гарантирует, что плавающие элементы списка останутся внутри контейнера; соответственно, рамка всегда будет располагаться под ними.

 

Далее создадим стиль для дочернего элемента ul:


#header ul {
  margin: 0;
  padding: 2em 0 0 0;
  list-style: none;
}


Данное правило стиля удаляет маркеры списка и изменяет размер внешних и внутренних отступов. Теперь внутренний отступ элемента ul сверху составит 2em. На рис. 4.13 отображается текущий результат преобразований:

 

Вид меню навигации после задания стиля элемента ul

Рис. 4.13. Вид меню навигации после задания стиля элемента ul


Настало время создать стили для пунктов списка:

#header li {
  float: left;
  background-image: url("images/tab_left.gif");
  background-repeat: no-repeat;
  margin: 0 1px 0 0;
  padding: 0 0 0 8px;
}


С помощью свойства float пункты списка располагаются по горизонтали, оставаясь при этом блочными элементами. Затем на сцену выходит одно из изображений «раздвижных дверей» – тонкая полоса, отображаемая слева от вкладки. Оно будет выступать в качестве фонового. Отступ справа в один пиксел создает зазор между вкладками. На рис. 4.14 видно, что теперь слева от каждой вкладки отображается соответствующее изображение.

 

Панель навигации после добавления новых стилей

Рис. 4.14. Панель навигации после добавления новых стилей

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

 

#header a {
  float: left;
  display: block;
  background-image: url("images/tab_right.gif");
  background-repeat: no-repeat;
  background-position: right top;
  padding: 0.2em 10px 0.2em 0;
  text-decoration: none;
  font-weight: bold;
  color: #333366;
}


Результат показан на рис. 4.15.

 

Внешний вид вкладок

Рис. 4.15. Внешний вид вкладок

 

Попробуйте увеличить размер шрифта в браузере, и вы увидите, что размер вкладок изменится соответствующим образом. При этом они не перекрывают друг друга, а текст не вылезает за пределы вкладки – все это благодаря тому, что мы взяли размер изображения «с запасом».

 

Чтобы придать панели навигации более завершенный вид, нужно выделить вкладку, соответствующую текущей странице. Если помните, каждой ссылке было присвоено уникальное имя класса. Присвоим элементу body атрибут ID с таким же значением, а остальное за нас сделает CSS.

<body id="home">


Хотя может показаться, что CSS-код довольно длинен, но применяемый нами подход для выделения вкладки, имя класса которой совпадает с идентификатором элемента body, предельно прост. Используемые изображения в точности копируют две составляющие вкладку картинки, но окрашены другим цветом, за счет чего создается эффект выделения одной вкладки.


Ниже представлен CSS-код:

#home #header li.home,
#news #header li.news,
#forum #header li.forum,
#gallery #header li.gallery,
#contact #header li.contact 
{
    background-image: url("images/tab_active_left.gif");
}
#home #header li.home a,
#news #header li.news a,
#forum #header li.forum a,
#gallery #header li.gallery a,
#contact #header li.contact a {
  background-image: url("images/tab_active_right.gif");
  background-color: transparent;
  color:#FFFFFF;
}


При использовании таких правил стилей достаточно задать элементу body атрибут ID со значением home, и соответствующая вкладка Главная будет выделена; если значением будет contact, выделена будет вкладка Контакты и т. д. Результат проделанной работы можно увидеть на рис. 4.16.

 

Выделение вкладки Контакты

Рис. 4.16. Выделение вкладки Контакты путем присвоения значения contact атрибуту ID элемента body

 

Совет
Обратите внимание на полезный прием. Указание атрибута ID для элемента body может сослужить хорошую службу. К примеру, различные разделы вашего сайта могут иметь разное цветовое оформление, помогая пользователям сориентироваться. Для этого нужно задать элементу body идентификатор со значением, соответствующим названию раздела, а затем использовать его в таблице стилей, как в данном примере.
<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити