Оглавление

Оформление списка в виде навигационного меню

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

 

Решение
Меню навигации, представленное на рис. 4.1, является списком, оформленным с помощью CSS.

 

Создание навигации

Рис. 4.1. Создание навигации путем написания правил стилей для списка (DEMO)


Ниже представлена разметка, необходимая для создания списка:

<!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>Навигационное меню</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="listnav1.css" />
  </head>
  <body>
    <div id="navigation">
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Форум</a></li>
        <li><a href="#">Галерея</a></li>
        <li><a href="#">Контакты</a></li>		
      </ul>
    </div>
  </body>
</html>


Далее представлен полный 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;
}


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

      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Форум</a></li>
        <li><a href="#">Галерея</a></li>
        <li><a href="#">Контакты</a></li>		
      </ul>

Затем разместим список внутри элемента div с соответствующим ID:

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

 

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

 

Первоначальный вид списка
Рис. 4.2. Первоначальный вид списка (стилевое оформление отсутствует)


Оформление списка лучше начать с написания правил стилей для контейнера, в котором размещается сам список, – в данном случае с идентификатором navigation:

#navigation {
  width: 200px;
}


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

 

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

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


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

 

Внешний вид списка после удаления маркеров и внешних отступов
Рис. 4.3. Внешний вид списка после удаления маркеров и внешних отступов

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

4
 << Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити