Оглавление

Создание навигационного меню с подпунктами

В приводимых ранее примерах были рассмотрены навигационные панели в виде одноуровневых списков. Иногда этого недостаточно. Но можно ли создать многоуровневое меню навигации с помощью списков и CSS?

 

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

 

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

<!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" />
<link rel="stylesheet" type="text/css" href="listnav_sub.css" />
</head>
<body>
    <div id="navigation">
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Новости</a></li>
	   <ul>
	      <li><a href="#">Недавние</a></li>
	      <li><a href="#">Архив</a></li>
	      <li><a href="#">Добавить новость</a></li>
	   </ul>
        <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 {
  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;
}


Результат добавления данного кода представлен на рис. 4.5.

 

многоуровневое навигационное меню

Рис. 4.5. Созданное средствами CSS многоуровневое навигационное меню

 

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

 

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

 

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

 

    <div id="navigation">
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Новости</a></li>
	   <ul>
	      <li><a href="#">Недавние</a></li>
	      <li><a href="#">Архив</a></li>
	      <li><a href="#">Добавить новость</a></li>
	   </ul>
        <li><a href="#">Форум</a></li>
        <li><a href="#">Галерея</a></li>
        <li><a href="#">Контакты</a></li>		
      </ul>
    </div>


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

 

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

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


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

 

Список второго уровня

 Рис. 4.7. Список второго уровня в стиле основного меню и тот же список с добавлением отступов


Наконец, добавим несколько простых правил стилей для элементов 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;
}
6
 << Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити