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

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

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

Обсуждение:

Для создания панели навигации на основе маркированного списка необходимо прежде всего создать сам список, разместив ссылки внутри элементов li:

<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 с соответствующим ID:

<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{
width: 200px;
}

Затем займемся написанием правил стилей для списка:

#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}

Как видно ниже, вышеприведенное правило удаляет маркеры списка и убирает внешние отступы, создаваемые броузером вокруг списка по умолчанию.

Теперь настало время создать стиль для дочерних элементов li блока navigation, добавив для них нижнюю рамку:

#navigation li {
border-bottom: 1px solid #ED9F9F;
}

Наконец, зададим стиль для самой ссылки:

#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}

Большинство изменений вносятся именно с помощью указанных выше правил CSS, задающих стиль рамки справа и слева, удаляющих подчеркивание и т. д. Первое описание присваивает значение block свойству display, благодаря чему ссылка отображается как блочный элемент. Это означает, что при наведении указателя мыши на любое место навигационной «кнопки» она будет активирована. Аналогичного эффекта можно было бы достичь путем использования изображения в качестве ссылки.

Изменение вида ссылки при наведении на нее указателя мыши с помощью CSS без использования изображений или сценариев на JavaScript

Создать такой привлекательный эффект гораздо проще с помощью CSS, а не графики. Для этого используется селектор псевдокласса :hover, как и при задании стиля для ссылок при наведении на них указателя мыши.

Вернемся к рассмотренному ранее примеру навигационного меню и добавим в таблицу стилей следующее правило:

#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}

Ниже показан вид меню, который изменяется при наведении курсора на пункты меню:

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

<!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>Lists as navigation</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 {
  width: 200px;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation li {
  border-bottom: 1px solid #ED9F9F;
}

#navigation li a:link, #navigation li a:visited  {
  font-size: 90%;
  display: block;
  padding: 0.4em 0 0.4em 0.5em;
  border-left: 12px solid #711515;
  border-right: 1px solid #711515;
  background-color: #B51032;
  color: #FFFFFF;
  text-decoration: none;
}

#navigation li a:hover {
  background-color: #711515;
  color: #FFFFFF;
}
</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 в полной мере.

Вернемся к ранее созданному примеру и добавим в навигационное меню подуровень путем создания вложенного списка и задания стиля его пунктов:

				
<!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>Lists as navigation</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 {
  width: 200px;
}

#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#navigation li {
  border-bottom: 1px solid #ED9F9F;
}

#navigation li a:link, #navigation li a:visited  {
  font-size: 90%;
  display: block;
  padding: 0.4em 0 0.4em 0.5em;
  border-left: 12px solid #711515;
  border-right: 1px solid #711515;
  background-color: #B51032;
  color: #FFFFFF;
  text-decoration: none;
}

#navigation li a:hover {
  background-color: #711515;
  color: #FFFFFF;
}

#navigation ul ul {
  margin-left: 12px;
}

#navigation ul ul li {
  border-bottom: 1px solid #711515;
  margin:0;
}

#navigation ul ul a:link, #navigation ul ul a:visited {
  background-color: #ED9F9F;
  color: #711515;
}

#navigation ul ul a:hover {
  background-color: #711515;
  color: #FFFFFF;
}
</style>
</head>

<body>
<div id="navigation">
  <ul>
    <li><a href="#">Recipes</a>
      <ul>
        <li><a href="#">Starters</a></li>
        <li><a href="#">Main Courses</a></li>
        <li><a href="#">Desserts</a></li>
      </ul>
    </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>

Использование вложенных списков – оптимальный способ создания подобных панелей навигации. Основной список содержит ключевые разделы сайта, в то время как в списке второго уровня под пунктом Recipes отображаются подразделы данной категории. Структура списка отличается четкостью и ясностью и без использования CSS, как видно ниже.

Логичность структуры системы навигации очевидна и без использования CSS

Для создания такого списка используется простая HTML-разметка: вложенный список добавляется внутрь соответствующего элемента li.

<div id="navigation">
<ul>
    <li><a href="#">Recipes</a>
      <ul>
        <li><a href="#">Starters</a></li>
        <li><a href="#">Main Courses</a></li>
        <li><a href="#">Desserts</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Buy Online</a></li>
</ul>
</div>

При обработке данного HTML-кода в броузере без изменения таблицы стилей мы увидим результат, показанный ниже; в этом случае элементы вложенного списка унаследуют стили, определенные для пунктов основного меню.

Recipes

Оформим вложенный список таким образом, чтобы на вид можно было определить, что это список подразделов, отличный от основного меню:

#navigation ul ul {
margin-left: 12px;
}

Данное правило добавляет для вложенного списка внешний отступ от левого края меню и приводит к выравниванию всех пунктов меню по правому краю, как показано ниже.

Recipes

Наконец, добавим несколько простых правил стилей для элементов li и a, расположенных внутри вложенного списка:

#navigation ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}

#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}

#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}

Recipes

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

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

Навигация