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

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

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

Навигация

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

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

Ниже представлен использованный HTML- и CSS-код.

<!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 {
  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;
}
#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {background-image: url("images/tab_active_left.gif");
}
#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
  background-image: url("images/tab_active_right.gif");
  background-color: transparent;
  color:#FFFFFF;
}

</style>
</head>

<body id="recipes">
	<div id="header">
		<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>
	<div id="content">
		<h1>Recipes</h1>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis tellus sit amet diam 
		consectetuer scelerisque. Nulla facilisi. Praesent sit amet justo. Sed mattis arcu sed nisl. 
		Vestibulum ante urna, gravida rhoncus, porta vel, sodales id, nisl. Vestibulum lectus velit, 
		dignissim quis, molestie vel, iaculis quis, tellus. Cum sociis natoque penatibus et magnis 
		dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin dolor quis dolor. Donec at 
		nisl ac felis vestibulum placerat. Fusce sollicitudin tristique nibh. Donec aliquam. Proin vitae 
		neque iaculis dolor eleifend rhoncus. Curabitur dictum lobortis arcu. Vivamus tincidunt metus at 
		justo. Aliquam dui. Nulla semper, nunc sit amet viverra placerat, mauris wisi sodales massa, et 
		tincidunt sapien nisl eget nulla. Vivamus a neque vel quam cursus tincidunt. Fusce porttitor 
		justo nec nisl. In vel velit eget tortor feugiat placerat.</p>
		<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam 
		nulla nunc, interdum nec, interdum non, hendrerit in, enim. Donec eget risus. In eget neque vel 
		nunc posuere iaculis. In adipiscing justo in enim. Donec commodo, dui ac pharetra interdum, 
		libero wisi tincidunt arcu, sed ornare magna velit vel elit. Sed nec risus a massa imperdiet 
		euismod. Nunc hendrerit. Fusce sit amet eros. Etiam vitae nulla at lectus fermentum rhoncus. </p>
	</div>
</body>

</html>

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

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

tab_left.gif
teb_left		tab_right.gif
tab_right
tab_active_left.gif
tab_active_left		tab_active_right.gif
tab_active_right

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

<div id="header">
    <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>

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

#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;
    font:.8em/1.8em Verdana, Arial;
}

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

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

#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 пункты списка располагаются по горизонтали, оставаясь при этом блочными элементами. Затем на сцену выходит одно из изображений «раздвижных дверей» – тонкая полоса, отображаемая слева от вкладки. Оно будет выступать в качестве фонового. Отступ справа в один пиксел создает зазор между вкладками. Выше видно, что теперь слева от каждой вкладки отображается соответствующее изображение.

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

#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;
}

Результат показан ниже.

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

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

<body id="recipes">

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

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

#recipes #header li.recipes,
#contact #header li.contact,
#articles #header li.articles,
#buy #header li.buy {
    background-image: url("images/tab_active_left.gif");
}
#recipes #header li.recipes a,
#contact #header li.contact a,
#articles #header li.articles a,
#buy #header li.buy a {
    background-image: url("images/tab_active_right.gif");
    background-color: transparent; color:#FFFFFF;
}

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

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