css. Раскрывающееся меню с использованием списков

my_menucss позволяет создавать удобное навигационное меню. Рассмотрим пример создания меню с использованием списков. В данной работе рассмотрим последовательное создание списка. Первоначально необходимо создать список. Коды можно копировать со страницы.

<html> 
<head> 
<title>Раскрывающееся меню с использованием списков</title> 
</head> 
<body> 
<div id="menunav"> 
   <ul> 
      <li><a href="#">Раздел 1</a> 
            <ul> 
               <li><a href="#">Подраздел 1.1</a></li> 
               <li><a href="#">Подраздел 1.2</a></li> 
               <li><a href="#">Подраздел 1.3</a></li> 
            </ul> 
      </li> 
      <li><a href="#">Раздел 2</a> 
            <ul> 
               <li><a href="#">Подраздел 2.1</a></li> 
               <li><a href="#">Подраздел 2.2</a></li> 
               <li><a href="#">Подраздел 2.3</a></li> 
            </ul>      
      </li> 
      <li><a href="#">Раздел 3</a> 
            <ul> 
               <li><a href="#">Подраздел 3.1</a></li> 
               <li><a href="#">Подраздел 3.2</a></li> 
               <li><a href="#">Подраздел 3.3</a></li> 

            </ul>      
      </li> 
   </ul> 
</div> 
</body> 
</html>

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

<style> 
#menunav ul { 
   margin: 0px; 
   padding: 0px; 
} 
#menunav { 
   width: 18em; /* ширина меню */ 
   float: left;  /* список в div */ 
   border: 2px  solid  #000000;  /* линия вокруг div */ 
   font-size: 14px;  /* размер шрифта */ 
   background-color: #00a193;  /* фоновый цвет */ 
   padding: 0 0 0 30px;  /* отступ ul от края контейнера */ 
} 

#menunav li { 
   float: left;   /* располагаем список по горизонтали */ 
   position: relative;  /* контекст позиционирования для раскрывающегося меню с абсолютным позиционированием */    
   list-style-type: none;  /* удаляем маркеры */ 
   background-color: #00a1c3;  /* фоновый цвет элементов меню */ 
   border-right: 1px solid #000000;  /* создаем разделительные линии между элементами li */ 
} 

#menunav li:first-child { 
   border-left: 1px solid #000000;  /* первая вертикальная линия в меню */ 
} 

#menunav a { 
   display: block;  /* пункты вложенного меню выделяются при наведении указателя */ 
   text-decoration: none;  /* удаляет подчеркивание ссылок */ 
   padding: 0px 10px 0px 10px;  /* создает пространство с обеих сторон текста пункта меню */ 
} 

#menunav a:hover { 
   color: #ff3333; 
} 
#menunav li:hover { 
   background-color: #ffffff;  /* задает фон пунктов списка */ 
} 

#menunav ul li ul { 
   margin: 0px; 
   position: absolute;  /* размещает выпадающий ul относительно родительского li */ 
   left: -1px;  /* выравнивает раскрывающееся меню */ 
   width: 10em; 
} 

#menunav ul li ul li  { 
   width: 100%;  /* элементы списка заполняют контейнер (ul) */ 
   border-left: 2px solid #000000;  /* три стороны каждого пункта раскрывающегося меню */ 
   border-bottom: 2px solid #000000; 
   border-right: 2px solid #000000; 
} 

#menunav ul li ul li:first-child { 
   border-top: 2px solid #000000;  /* верхний край раскрывающегося меню. Необходимо задавать только для первого элемента */ 
} 
#menunav ul li ul { 
   display: none; 
} 
#menunav ul li:hover ul, #menunav ul li ul:hover { 
   display: block; 
} 
#menunav ul li ul {  /* добавляет верхнюю границу раскрывающегося меню для IE */ 
   border-top: 1px solid #000000; 
   border-left: 0рх;  /* устраняет наследование границ ul раскрывающимся меню */ 
} 
</style>

Общий принцип состоит в том, что используется псевдокласс a:hover, чтобы организовать появление подразделов.

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru