Разработка сайтов для СРО

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Создание и раскрутка сайтов в Интернете

Что нужно для SEO?

Текст & Всемирная Паутина

Инструмент веб-строителя

HTML - язык гипертекста

CSS - каскадные таблицы стилей

Поисковая оптимизация

Что такое раскрутка сайта?

Контекстная реклама

Что такое обмен ссылками?

Почтовые рассылки

Соблюдайте правила

Что препятствует рейтингу?

Что такое CMS?

Краткий словарь терминов

Полезные книги

Карта сайта

Этапы создания сайта

Десять важных шагов

Разработка семантического ядра

Обновление информации

Заголовки

Проверка ссылок

Проверка ошибок в коде

Шрифтовое оформление

Навигация по сайту

Метаданные

Выбор кодировки

Ключевые слова

 
Разработка сайтов под ключ

Ссылки по теме

Blogger: Создайте блог БЕСПЛАТНО

WordPress: Платформа для ведения блога

Online-переводчик :: Компания ПРОМТ

Поисковая оптимизация – все дело в написании текстов

Стратегия продвижения сайтов

Новые исследования поискового поведения пользователей

Орфографические словари

Словарь русских синонимов Абрамова

Орфографический словарь Лопатина

Современный словарь иностранных слов

Толковый словарь русского языка Ожегова

Архивы форума "Говорим по-русски"

FAR — программа управления файлами и архивами

FCKEditor - текстовый редактор для браузера

NotPad++ - текстовый редактор

PSPad — текстовый редактор

UltraEdit-32 - текстовый редактор

Nvu - HTML редактор

CoffeeCup - HTML редактор

 

Создание многоуровневых раскрывающихся CSS-меню

Главная « Уроки Web-мастерства « Создание многоуровневых раскрывающихся CSS-меню

версия для печати

Многоуровневое вложенное CSS-меню…

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

На (рис. 1) мы имеем родительское горизонтальное меню, раскрывающееся меню и вложенные в него меню третьего и четвертого уровня.

Для их добавления нам необходимо выполнить два простых действия. Изменить код разметки для добавления раскрывающихся элементов с помощью вложенных списков.

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

 
(рис. 1) Многоуровневое вложенное меню позволяет пользователю напрямую обратиться к нижним уровням иерархии сайта.
 

Вначале мы добавим только одно дополнительное меню:

Код:
<div id="menunav">
   <ul>
      <li><a href="#">раздел №1</a>
            <ul>
               <li><a href="#">уровень №21</a></li>
               <li><a href="#">уровень №22</a></li>
               <li><a href="#">уровень №23</a>
                  <ul>
                     <li><a href="#">уровень №31</a></li>
                     <li><a href="#">уровень №32</a></li>
                     <li><a href="#">уровень №33</a></li>
                     <li><a href="#">уровень №34</a></li>
                  </ul>                
               </li>
               <li><a href="#">уровень №24</a></li>
            </ul>
         </li>
      <li><a href="#">раздел №2</a>
            <ul>
               <li><a href="#">подраздел №1</a></li>
               <li><a href="#">подраздел №2</a></li>
               <li><a href="#">подраздел №3</a></li>
               <li><a href="#">подраздел №4</a></li>
            </ul>     
      </li>
      <li><a href="#">раздел №3</a>
            <ul>
               <li><a href="#">подраздел №1</a></li>
               <li><a href="#">подраздел №2</a></li>
               <li><a href="#">подраздел №3</a></li>
               <li><a href="#">подраздел №4</a></li>
            </ul>     
      </li>
      <li><a href="#">раздел №4</a>
            <ul>
               <li><a href="#">подраздел №1</a></li>
               <li><a href="#">подраздел №2</a></li>
               <li><a href="#">подраздел №3</a></li>
               <li><a href="#">подраздел №4</a></li>
            </ul>     
      </li>
   </ul>
</div>

Во-вторых добавим две строки в CSS:

Код:
body div#menunav ul li ul li ul   {
   visibility: hidden;  /* идентично display: none */
   left: 10em;
}
div#menunav ul li ul li:hover ul {
   visibility: visible;  /* идентично display: block */
}

С помощью таких длинных селекторов мы выбираем списки, вложенные в другие списки, которые, в свою очередь, являются вложениями в третьи.

Добавив body к первому списку, мы повышаем конкретность этого селектора по сравнению с селектором верхнего уровня. Благодаря такому коду наше меню выглядит так, как показано на (рис. 2).

 
(рис. 2) Второе раскрывающееся меню функционирует, но также смещено на один пиксел вверх.
 

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

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

Код:
body div#menunav ul li ul li ul   {
   visibility: hidden;  /* идентично display: none */
   top: -1px;  /* выровнено по верхей границе пункта списка */
   left: 10em;
}
div#menunav ul li ul li:hover ul {
   visibility: visible;  /* идентично display: block */
}

Теперь второе раскрывающееся меню находится на своем месте (рис. 3).

 
(рис. 3) С помощью свойства top мы выравниваем второе раскрывающееся меню.
 

Если задать для свойства top значение 0рх, меню будет выровнено по верху пункта списка, а не по его верхней границе (рис. 4).

 
(рис. 4) Меню выровнено по верху пункта списка.
 

Вложим в список второго раскрывающегося меню еще один список и добавим пару строк CSS-кода.

Код:
div#menunav ul li ul li:hover ul li ul {
   visibility: hidden;
}
div#menunav ul li ul li ul li:hover ul {
   visibility: visible;
}

Таким образом мы добавили еще один уровень меню. Ниже приведен полный код многоуровневого вложенного CSS-меню (рис. 1).

Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<title>Многоуровневое раскрывающееся меню | Горизонтальные компоненты навигации на базе списков</title>

<style>
<!--
body {
   margin : 0;
   padding : 10px;
   font-family: Verdana, Tahoma, arial, geneva, Helvetica, sans-serif;
   behavior: url(csshover.htc);
   background-color: #ffffff;
}

/* Горизонтальное меню */

div#menunav {
   width: 100%; /* задаем ширину для div */
   float: left;  /* добавляем список в div */
   border-top: 1px  solid  #000000;  /* рисуем линию поверх div */
   border-bottom: 1px solid #000000; /* рисуем линию снизу div */
   font-size: 11px;  /* задаем размер шрифта */
   background-color: #b3b3b3;  /* фоновый цвет div */
   padding: 0 0 0 30px;  /* отступ ul от края контейнера */
}
div#menunav ul {
   margin: 0px;
   padding: 0px;
}
* html div#menunav ul {
   float: left;  /* заставляет ul вместить все li */
   border-left: 1px solid #000000;  /* добавляет левую вертикальную черту к ul */
   margin-left: 15px;  /* IE удваивает заданное значение */
}
div#menunav li {
   float: left;   /* располагаем список по горизонтали */
   position: relative;  /* контекст позиционирования для раскрывающегося меню с абсолютным позиционированием */   
   list-style-type: none;  /* удаляем маркеры */
   background-color: #ffebc6;  /* задаем фоновый цвет элементов меню */
   border-right: 1px solid #000000;  /* создаем разделительные линии между элементами li */
}
div#menunav li:first-child {
   border-left: 1px solid #000000;  /* первая вертикальная линия в меню */
}
div#menunav a {
   display: block;  /* пункты вложенного меню выделяются при наведении указателя */
   text-decoration: none;  /* удаляем подчеркивание ссылок */
   padding: 0px 10px 0px 10px;  /* создаем пространство с обеих сторон текста пункта меню */
   color: #006699;  /* задаем цвет шрифта */
}
div#menunav a:hover {
   color: #ff3333;
}
div#menunav li:hover {
   background-color: #ffffff;  /* задает фон пунктов списка */
}

/* Раскрывающееся меню */

div#menunav ul li ul {
   margin: 0px;
   position: absolute;  /* размещает выпадающий ul относительно родительского li */
   left: -1px;  /* выравнивает раскрывающееся меню */
   width: 10em;
}
div#menunav ul li ul li  {
   width: 100%;  /* элементы списка заполняют контейнер (ul) */
   border-left: 1px solid #000000;  /* три стороны каждого пункта раскрывающегося меню */
   border-bottom: 1px solid #000000;
   border-right: 1px solid #000000;
}
div#menunav ul li ul li:first-child {
   border-top: 1px solid #000000;  /* верхний край раскрывающегося меню */
}
body div#menunav ul li ul {
   display: none;
}
div#menunav ul li:hover ul, div#menunav ul li ul:hover {
   display: block;
}
* html div#menunav ul li ul {  /* добавляет верхнюю границу раскрывающегося меню для IE*/
   border-top: 1px solid #000000;
   border-left: 0рх;  /* устраняет наследование границ ul раскрывающимся меню */
}

/* Многоуровневое раскрывающееся меню */

body div#menunav ul li ul li ul   {
   visibility: hidden;  /* идентично display: none */
   top: -1px;  /* выровнено по верхей границе пункта списка */
   left: 10em;
}
div#menunav ul li ul li:hover ul {
   visibility: visible;  /* идентично display: block */
}
div#menunav ul li ul li:hover ul li ul {
   visibility: hidden;
}
div#menunav ul li ul li ul li:hover ul {
   visibility: visible;
}
-->
</style>
</head>

<body>

<div id="menunav">
   <ul>
      <li><a href="#">раздел №1</a>
            <ul>
               <li><a href="#">уровень №21</a></li>
               <li><a href="#">уровень №22</a></li>
               <li><a href="#">уровень №23</a>
                  <ul>
                     <li><a href="#">уровень №31</a></li>
                     <li><a href="#">уровень №32</a></li>
                     <li><a href="#">уровень №33</a>
                        <ul>
                           <li><a href="#">уровень №41</a></li>
                           <li><a href="#">уровень №42</a></li>
                           <li><a href="#">уровень №43</a></li>
                           <li><a href="#">уровень №44</a></li>
                        </ul>
                     </li>
                     <li><a href="#">уровень №34</a></li>
                  </ul>
               </li>
               <li><a href="#">уровень №24</a></li>
            </ul>
         </li>
      <li><a href="#">раздел №2</a>
            <ul>
               <li><a href="#">подраздел №1</a></li>
               <li><a href="#">подраздел №2</a></li>
               <li><a href="#">подраздел №3</a></li>
               <li><a href="#">подраздел №4</a></li>
            </ul>
      </li>
      <li><a href="#">раздел №3</a>
            <ul>
               <li><a href="#">подраздел №1</a></li>
               <li><a href="#">подраздел №2</a></li>
               <li><a href="#">подраздел №3</a></li>
               <li><a href="#">подраздел №4</a></li>
            </ul>
      </li>
      <li><a href="#">раздел №4</a>
            <ul>
               <li><a href="#">подраздел №1</a></li>
               <li><a href="#">подраздел №2</a></li>
               <li><a href="#">подраздел №3</a></li>
               <li><a href="#">подраздел №4</a></li>
            </ul>
      </li>
   </ul>
</div>

</body>
</html>
Урок написан по материалам книги Чарльза Уайк-Смита
«Стильный сайт с помощью CSS».
 
Урок № 9: | Дата: 25.11.2007 | Автор: Коровенков Юрий

Обсудить на форуме…

 
Valid XHTML 1.0! Valid CSS!
Как устроены поисковые системы?

Облик поисковиков

Поисковые системы

Индекс поисковой системы

Полнотекстовый поиск

Учет морфологии

Релевантность

Методы регистрации

Индекс цитирования

 
Уроки Web-мастерства

Уроки Web-мастерства

Управление web-проектом

Как более эффективно писать для Сети?

Как сделать сайт максимально удобным?

Особенности структуры текста на Web-сайте

Создание компонентов интерфейса в XHTML

Создаем CSS-меню

Основные типы CSS-макетов

Раскрывающиеся CSS-меню

CSS-методы замены текста изображениями

Прямоугольники с закругленными углами на основе CSS

CSS-методы центрирования web-страницы

CSS-эффекты наведения указателя мыши

CSS-стили для шрифтов и текста

Навигационные CSS-панели на основе списков

Свободное размещение в CSS

Создание эффекта mouseover при помощи CSS

Таблицы для верстки - это не обязательно зло

Внедрение ролика Windows Media на Web-страницу

Добавление Flash на Web-страницу

 

NotPad++ - текстовый редактор…

 

наверх

 
Контактная информация

Пишите:
Звоните: + 7 (916) 597-36-78

SEO-копирайтинг — текст для поисковой оптимизации. Продвижение сайта в поисковых системах. Оптимизация сайта для поисковых машин. Раскрутка сайта в ведущих поисковиках

Copyright (©) 2004— by Yuriy Korovenkov