Введение

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

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

Комментарии   

Zhenis
-1 #8 Zhenis 30.05.2011 22:36
Благодарю автора, классное меню. Теперь осталось подредактироват ь под себя. ;-)
Михаил
-1 #7 Михаил 15.01.2011 11:20
Спасибо,все работает.Уже не один раз использовал.
Чернокир
-1 #6 Чернокир 02.04.2010 02:30
Спасибо! Буду разбираться дальше.
Administrator
-1 #5 Administrator 02.04.2010 01:38
Цитирую Чернокир:
вопрос от чайника:
код вставлять в menu.css или в template.css
и вот этот - body { behavior:url("csshover3.htc"); } тоже

По идее к тому стилю, что подключен, то есть без разницы, а вот код для IE лучше вставлять в стиль, который подклбчается условно для IE (обычно что-то вроде IE.css)
Чернокир
-1 #4 Чернокир 02.04.2010 01:27
вопрос от чайника:
код вставлять в menu.css или в template.css
и вот этот - body { behavior:url("c sshover3.htc"); } тоже
Вася
-1 #3 Вася 22.11.2009 13:41
Кто-нибудь ответит по горизонтальному меню?
Kaylang1
+2 #2 Kaylang1 25.07.2009 10:49
Имел ввиду, чтобы подменю открывались без клика по родительскому элементу.
Kaylang1
-2 #1 Kaylang1 25.07.2009 08:32
А как все же сделать горизонтальное раскрывающееся меню?
Ну, скажем на базе topmenu (class="menu-na v")?

Добавить комментарий


Защитный код
Обновить

Последние комментарии

  • В любом случае это будет инструкция, постараюсь конечно максимально полно, но инструкция как выявлять ...

    Подробнее...

     
  • Ок жду. у меня почти 120 сайтов из них 90 на джумле разных версий ) так что мне это важно поэтому ...

    Подробнее...

     
  • Да, это важная часть. Проблема в том что айболит видит не всё. То есть это мера необходимая, но ...

    Подробнее...

     
  • Короче, я обновил php пропатчил сайты и почистился от вирусов ай болитом на этом моя процедура защиты ...

    Подробнее...

     
  • Прошло еще почти полтора месяца а так и не дописали (

    Подробнее...

Вы смотрели