Пошаговое создание трёхуровневого меню

Введение

Хотя и идея, и технология создания такого меню далеко не новы, но по результатам комментариев в статье «Создание раскрывающегося меню на базе стандартного mod_mainmenu Joomla 1.5» оказалось, что тема по-прежнему актуальна и требует достаточно простого решения. В данной статье так же формируется меню на основе стандартного модуля mod_mainmenu. Пока что, ширина пунктов меню фиксированная.

Не стоит пугаться размера статьи — на самом деле это просто! Объём объясняется ~~графоманией автора~~ тем, что хочется по шагам описать технику создания, дабы после определённого шага можно было приступить к доработке дизайна под себя. Но для самых нетерпеливых — пример сформированного меню вместе с CSS-файлами.

Подготовка

Сперва необходимо настроить меню следующим образом:

Параметры модуля:
- Стиль меню: Список
- Всегда показывать вложенные подпункты: Да
Другие параметры:
- Раскрывать меню: Да

Приведение к общему знаменателю

Сперва потребуется сделать так, чтобы все браузеры реагировали на изменения одинаково. Предположим, что уже есть готовый сайт, куда требуется только добавить меню. В этом случае подключение CSS-файлов вроде YUI Reset CSS может вызвать ненужные изменения существующего сайта. Собственно, всё что требуется для первого шага:

Заставить IE6 понимать псевдоклассы :hover для всех элементов
Убрать стандартное оформление для списков

Приручение «осла»

К счастью, уже существует библиотека whatever:hover, которую достаточно скачать и подключить к странице, в случае если у посетителя в качестве браузера выступает IE (внимание на кавычки, без них может не работать):

body { behavior:url("csshover3.htc"); }

После этого можно приступить непосредственно к редактированию CSS-стиля.

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

Да, пока не забыл, все CSS-правила будут применимы к каждому меню, найденному на странице. Если сделать выпадающим необходимо какое-то одно, то его стоит заключить, например, в элемент «div id="dropdown"> и соответствующим образом корректировать CSS-правила.

Удаление отступов и маркеров у списков:

ul.menu,
ul.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Создание функционального прототипа меню

На данном шаге необходимо только обеспечить своевременное появление и исчезновение пунктов меню. Ничего сложного в этом нет, к тому же этот фрагмент так же указан на сайте whatever:hover:

ul.menu ul,
li:hover ul ul { display:none; }
li:hover ul,
li:hover li:hover ul { display:block; }

Создание «скелета»

Теперь необходимо скомпоновать получившееся меню в тот вид, в каком оно обычно оформляется — горизонтальный первый уровень и выпадающие подпункты под ним.

ul.menu li {
  float: left;
  position: relative;
}
 
ul.menu li,
ul.menu ul,
ul.menu li li a {
  width: 180pt;
}
 
ul.menu ul {
  position: absolute;
  left: 0;
}
 
ul.menu ul {
  clear: left;
}
 
ul.menu li li {
  float: none;
  position: relative;
}
 
ul.menu li li a {
  display: block;
}
 
ul.menu li li ul {
  left: 180pt;
}

Визуальное оформление

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

ul.menu {
  font-family: arial, sans-serif;
  font-size: 11px;
}
 
ul.menu li a span {
  padding-left: 23px;
}
ul.menu ul {
  top: 2em;
  z-index: 200;
}
ul.menu a {
  text-decoration: none;
  line-height: 2;
}
 
ul.menu li {
  background-image: url(../music.png);
  background-repeat: no-repeat;
  background-position: 1.1% center;
}
 
ul.menu li.parent {
  background-image: url(../folder-closed.png);
}
ul.menu li.parent:hover {
  background-image: url(../folder.png);
}
 
ul.menu li:hover {
  background-color: #eee;
}
 
ul.menu ul {
  border: solid 1px #ddd;
  background-color: white;
}
 
ul.menu li li ul {
  top: -1px;
}