Joomla 1.5 - создание сайтов, верстка и программирование

Введение

Хотя и идея, и технология создания такого меню далеко не новы, но по результатам комментариев в статье «Создание раскрывающегося меню на базе стандартного 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;
}

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.