Система меню IceMenu

• Модуль IceMegaMenu и IceVerticalMenu
• Где скачать модули IceMegaMenu, IceVerticalMenu и плагин
• Установка модуля IceMegaMenu и IceVerticalMenu
• Создание иерархического меню для системы IceMenu
• Настройка модуля IceMegaMenu и IceVerticalMenu
• Установка плагина системы меню IceMenu
• Как вставить модуль в меню IceMegaMenu и IceVerticalMenu
• Как вставить модуль из позиции в меню IceMegaMenu и IceVerticalMenu
• Как вставить изображение в пункт меню IceMegaMenu и IceVerticalMenu
• Как выводить подзаголовки в подменю IceMegaMenu и IceVerticalMenu
• Как выводить подменю в несколько колонок IceMegaMenu и IceVerticalMenu
• Как поменять стиль мегаменю IceMegaMenu
• Как поменять стиль мегаменю IceVerticalMenu
• Если меню не хочет устанавливаться в позицию "menu" в шаблоне от YooTheme
• Скачать русифицированные модули IceMegaMenu, IceVerticalMenu и плагин

Модуль IceMegaMenu и IceVerticalMenu

IceMegaMenu и IceVerticalMenu - бесплатные модули и плагин от команды разработчиков IceTheme для Joomla 1.6, Joomla 1.7 и Joomla 2.5. Модули предназначены для замены стандартного модуля меню, добавляя вашему сайту новые возможности:

• работы с отключенным языком JavaScript – CSS меню;
• задания размера колонок;
• вывода пунктов меню в несколько колонок;
• вывода подзаголовков;
• вывода модулей в пункты меню;
• вывода изображений в пункты меню;
• эффектного появления и исчезновения элементов меню;
• создания эффекта прозрачности.

Для работы модулей мегаменю системы «IceMenu» необходима установка плагина, входящего в состав дистрибутива.

Где скачать модули IceMegaMenu, IceVerticalMenu и плагин

Оригинальные модули и плагин можно скачать на странице разработчиков
http://www.icetheme.com/Joomla-Extensions/IceMegaMenu.html и http://www.icetheme.com/Joomla-Extensions/IceVerticalMenu.html

Если вам нужна русская локализация IceMegaMenu и IceVerticalMenu, она доступна на моем сайте в конце этой статьи.

Установка модуля IceMegaMenu и IceVerticalMenu

Для установки модулей, зайдите в административную часть сайта, выберите пункт меню «Расширения - Менеджер расширений», выберите соответствующий архив модуля, нажмите кнопку «Загрузить и установить». Модуль будет установлен в Joomla.

Устранение мелких недоразумений

Откройте менеджер модулей в меню «Расширения - Менеджер модулей» и выберите установленный модуль, например «IceMegaMenu». Вы попадете на страницу конфигурации модуля.

Откройте вкладку «Другие параметры». Если вы видите сообщения, похожие на

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

1. Найдите строку 59 в файле JOOMLA_ROOT/libraries/joomla/form/fields/filelist.php

		// Get the path in which to search for file options.
		$path = (string) $this->element['directory'];
		if (!is_dir($path)) {
			$path = JPATH_ROOT.'/'.$path;
		}

Подавите предупреждающее сообщение

		// Get the path in which to search for file options.
		$path = (string) $this->element['directory'];
		if (!@is_dir($path)) {
			$path = JPATH_ROOT.'/'.$path;
		}

2. Сообщение можно подавить и включением директивы php_flag display_errors off в файл .htaccess, но лично я отдаю предпочтение первому способу.

Создание иерархического меню для системы IceMenu

Для теста создадим меню, которое и будем выводить с помощью модулей «IceMegaMenu» и «IceVerticalMenu». Пройдите по меню административной панели «Меню – Менеджер меню – Создать меню», укажите заголовок и имя меню, например «Test».

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

Для демонстрации привяжем меню к материалам. Выберите «Тип пункта меню», Заполните поле «Заголовок меню» и выберите материал. Затем сохраните.

При создании иерархического меню с вложенными подпунктами обратите внимание на «Родительский элемент». Как пример, я указал для «Пункт 2» в качестве родительского «Пункт 1».

Создайте по такому принципу следующую иерархию будущего меню:

Настройка модуля IceMegaMenu и IceVerticalMenu

Дошла очередь до настройки модуля, пройдите по ссылке «IceMegaMenu Module».

Укажите позицию для вывода модуля, выберите состояние «Опубликовано», Выберите меню «Test».

Все остальное во вкладке «Параметры IceMegaMenu» можно установить по вкусу. Я перевел подсказки, из них вполне можно понять, что и для чего предназначено. Во вкладках «Дополнительные параметры» и «Другие параметры» все остается по умолчанию.

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

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

Установка плагина системы меню IceMenu

Для установки плагина, зайдите в административную часть сайта, выберите пункт меню «Расширения - Менеджер расширений», выберите архив плагина, нажмите кнопку «Загрузить и установить». Плагин будет установлен в Joomla.

После установки плагин необходимо включить. Пройдите по меню «Расширения – Менеджер плагинов» и перейдите по ссылке «IceMegaMenu Plugin».

Смените статус плагина на «Включено».

Что мы теперь имеем? Зайдем в менеджер меню, выберем созданное ранее нами меню «Тест» и откроем страницу конфигурации.

Появилась новая вкладка «Параметры IceMegaMenu» с дополнительными настройками. Для «IceVerticalMenu» появится аналогичная вкладка «Параметры IceVerticalMenu». В документации упоминается возможность вставить в меню изображение или любой модуль как пункт меню, выводить подменю в несколько колонок. Дальнейшая настройка плагина «IceMegaMenu» будет зависеть от конкретных пожеланий.

Как вставить модуль в меню IceMegaMenu и IceVerticalMenu

Вставим в 10-й пункт меню модуль «Вход на сайт». Выберите из выпадающего списка «Тип дочернего меню» тип «Модули», а в списке «Отображение модулей» - модуль «Вход на сайт».

Посмотрим что получилось. На месте 10-го пункта меню начал отображаться модуль «Вход на сайт».

Как вставить модуль из позиции в меню IceMegaMenu и IceVerticalMenu

Для демонстрации вставки в мега меню модуля из позиции я опубликую форму поиска и вставлю ее в «Пункт 6».

На сайте в указанной мною позиции «position-6» отобразится форма поиска.

А теперь перейдем к странице редактирования «Пункт 6» нашего меню. Указываем «Тип дочернего меню» - «Позиции модулей», из списка «Отображение позиций» выбираем «position-6».

Смотрим, что у нас получилось.

Если вам необходимо сделать вывод модуля только в меню, не выводя на страницах сайта – в настройке модуля меню укажите «Привязка модуля» - Ни на одной странице.

Как вставить изображение в пункт меню IceMegaMenu и IceVerticalMenu

Вставим в 11-ый пункт меню изображение. Зайдите во вкладку «Параметры отображения ссылки» и в поле «Изображение ссылки» введите относительный путь к файлу изображения. Сохраните изменения.

Теперь в меню рядом с надписью отображается картинка.

Как выводить подзаголовки в подменю IceMegaMenu и IceVerticalMenu

При редактировании пункта меню на вкладке «Параметры IceMegaMenu» можно ввести «Подзаголовок». Создадим подзаголовки для 2,5 и 7 пунктов меню.

Сохраняем и смотрим.

Как выводить подменю в несколько колонок IceMegaMenu и IceVerticalMenu

Создадим дополнительно 9-ть пунктов меню с материалами, в качестве родительского элемента укажем «Пункт 12». Полученная иерархия меню показана на рисунке.

Создадим иерархическое горизонтальное выпадающее меню 3x3. Для этого вновь посетим страницу конфигурации меню «Пункт 12», который является родительским для иерархии. Укажем количество колонок - 3, ширину колонок и количество пунктов меню в каждой из колонок.

Сохраняем и смотрим.

Все сделано, все работает. Только не красиво и криво. Это далеко от того вида, который мы видим в демо студийных шаблонов со встроенным модулем. Придется править таблицу стилей.

Как поменять стиль мегаменю IceMegaMenu

В первую очередь – что мне конкретно не нравится:

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

Стоит показать, что мне нравится. Примером может служить меню шаблона «Nano Theme» студии YooTheme. Подобие реализую и я.

Я не буду рассказывать, как разбирался со стилями. Я расскажу, каким изменениям я его подверг. Сразу предупрежу – в настройках модуля «IceMegaMenu» выбрана тема «По умолчанию» и включено использование Javascript.

В папке с шаблоном JOOMLA_ROOT/templates/ВАШ_ШАБЛОН/html создайте папку mod_icemegamenu. У меня в примере используется шаблон «beez5».

Из папки JOOMLA_ROOT/modules/mod_icemegamenu/themes/default скопируйте в созданную папку папки images и css. Из последней необходимы только файлы default_icemegamenu.css и index.html

Присутствие этих файлов в папке с шаблоном позволяет иметь для каждого шаблона свой собственный файл стиля. Если вам это ненужно или вы не понимаете о чем я – можете просто править файл стилей JOOMLA_ROOT/modules/mod_icemegamenu/themes/default/css/default_icemegamenu.css

div.icemegamenu ul#icemegamenu {
		/*background: #E6E6E6;*/
		background: #EEEEEE;
}

div.icemegamenu ul#icemegamenu li {
		border: 1px solid #888888;
		border-radius: 4px 4px 4px 4px;
		margin-right: 2px;
}

div.icemegamenu ul#icemegamenu li a.iceMenuTitle,
div.icemegamenu ul#icemegamenu li span.separator,
div#subMenusContainer a.iceMenuTitle,
div#subMenusContainer span.separator {
		/*height: 40px;*/
		height: 30px;
		/*padding: 5px 15px;*/
		padding: 5px 5px;
}

div.icemegamenu ul#icemegamenu li.active a.iceMenuTitle,
div.icemegamenu ul#icemegamenu li.active span.separator,
div.icemegamenu ul#icemegamenu li.current a.iceMenuTitle,
div.icemegamenu ul#icemegamenu li.current span.separator,
div.icemegamenu ul#icemegamenu li:hover a.iceMenuTitle,
div.icemegamenu ul#icemegamenu li:hover span.separator {
		/*background: #222;*/
		background: #CCCCCC;
}

div#subMenusContainer {
		margin-top: 2px;
}

#icemegamenu ul.icesubMenu,
#subMenusContainer ul.icesubMenu {
		/*background: #222;*/
		background: #EEEEEE;
		/*border: 1px solid rgba(255,255,255,.2);*/
		border: 1px solid #888888;
		border-radius: 4px 4px 4px 4px;
}

#icemegamenu ul.sub_level_1,
#subMenusContainer ul.sub_level_1 {
		/*border-top: none;*/
}

div#subMenusContainer ul.icesubMenu li div.iceCols {
		/*padding-bottom: 10px;*/
		padding-bottom: 2px;
		padding-top: 2px;
}

div#subMenusContainer ul.icesubMenu li div.iceCols li {
		/*padding: 0 15px;*/
		padding: 0 0;
}

div#subMenusContainer a.iceMenuTitle,
div#subMenusContainer span.separator,
div.icemegamenu #icemegamenu ul.icesubMenu li a.iceMenuTitle,
div.icemegamenu #icemegamenu ul.icesubMenu li span.separator {
		/*padding: 5px 0 8px 16px;*/
		padding: 5px 0 8px 5px;
		/*background: url('/../images/point.png') no-repeat 0% 45%;*/
}

#subMenusContainer a.iceMenuTitle:hover,
#subMenusContainer a.iceMenuTitle:focus,
#icemegamenu a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
#icemegamenu li a.iceMenuTitle:hover,
#icemegamenu li a.iceMenuTitle:hover span,
#icemegamenu li a.iceMenuTitle:focus span,
#icemegamenu li a.iceMenuTitle:focus {
		/*color: #F0C237!important;*/
		color: #888888!important;
}

.smOW {
		padding-right: 2px;
}

div#subMenusContainer .icemega_cover_module {
	/*padding-left: 0;*/
	/*padding-right: 0;*/
	padding: 5px 5px 5px 5px;
}

и новые строки

/*
#subMenusContainer,
#icemegamenu {
		font-size: 12,5px;
}
*/

.parent a.iceMenuTitle span {
		line-height: 30px;
}

#icemegamenu ul.icesubMenu li a:hover,
#subMenusContainer ul.icesubMenu li a:hover {
		background: #CCCCCC;
}

#icemegamenu ul.icesubMenu li a,
#subMenusContainer ul.icesubMenu li a {
		margin-left: 2px;
}

Смотрим, что получилось с измененным CSS файлом.

Получилось красивое выпадающее горизонтальное меню.

Как поменять стиль мегаменю IceVerticalMenu

Стилизация «IceVerticalMenu» делается аналогичным образом, отличие только в смещениях по оси выпадания самой меню.

В папке с шаблоном JOOMLA_ROOT/templates/ВАШ_ШАБЛОН/html создайте папку mod_ice_verticalmenu. У меня в примере используется шаблон «beez5».

Из папки JOOMLA_ROOT/modules/mod_ice_verticalmenu/themes/default скопируйте в созданную папку папки images и css. Из последней необходимы только файлы default_iceverticalmenu.css и index.html

Присутствие этих файлов в папке с шаблоном позволяет иметь для каждого шаблона свой собственный файл стиля. Если вам это ненужно или вы не понимаете о чем я – можете просто править файл стилей JOOMLA_ROOT/modules/mod_ice_verticalmenu/themes/default/css/default_iceverticalmenu.css

div.iceverticalmenu ul#iceverticalmenu {
	background: #EEEEEE;
}

div.iceverticalmenu ul#iceverticalmenu li {
	/*border-right: 1px solid #fff;*/
	border: 1px solid #888888;
	border-radius: 4px 4px 4px 4px;
	margin-top: 2px;
}

div.iceverticalmenu ul#iceverticalmenu li a.iceMenuTitle,
div.iceverticalmenu ul#iceverticalmenu li span.separator,
div#iceVerticalSubMenusContainer a.iceMenuTitle,
div#iceVerticalSubMenusContainer span.separator {
	/*height: 40px;*/
	height: 30px;
	/*padding: 5px 15px;*/
	padding: 5px 5px;
}

div.iceverticalmenu ul#iceverticalmenu li.active a.iceMenuTitle,
div.iceverticalmenu ul#iceverticalmenu li.active span.separator,
div.iceverticalmenu ul#iceverticalmenu li.current a.iceMenuTitle,
div.iceverticalmenu ul#iceverticalmenu li.current span.separator,
div.iceverticalmenu ul#iceverticalmenu li:hover a.iceMenuTitle,
div.iceverticalmenu ul#iceverticalmenu li:hover span.separator {
	/*background: #222;*/
	background: #CCCCCC;
}

div#iceVerticalSubMenusContainer {
	margin-left: 2px;
}

#iceverticalmenu ul.icesubMenu,
#iceVerticalSubMenusContainer ul.icesubMenu {
	/*background: #222;*/
	background: #EEEEEE;
	/*border: 1px solid rgba(255,255,255,.2);*/
	border: 1px solid #888888;
	border-radius: 4px 4px 4px 4px;
}

#iceverticalmenu ul.sub_level_1,
#iceVerticalSubMenusContainer ul.sub_level_1 {
	/*border-top: none;*/
}

div#iceVerticalSubMenusContainer ul.icesubMenu li div.iceCols {
	/*padding-bottom: 10px;*/
	padding-bottom: 2px;
	padding-top: 2px;
}

div#iceVerticalSubMenusContainer ul.icesubMenu li div.iceCols li {
	/*padding: 0 15px;*/
	padding: 0 0;
}

div#iceVerticalSubMenusContainer a.iceMenuTitle,
div#iceVerticalSubMenusContainer span.separator,
div.iceverticalmenu #iceverticalmenu ul.icesubMenu li a.iceMenuTitle,
div.iceverticalmenu #iceverticalmenu ul.icesubMenu li span.separator {
	/*padding: 5px 0 8px 16px;*/
	padding: 5px 0 8px 5px;
	/*background: url('/../images/point.png') no-repeat 0% 45%;*/
}

#iceVerticalSubMenusContainer a.iceMenuTitle:hover,
#iceVerticalSubMenusContainer a.iceMenuTitle:focus,
#iceverticalmenu a.mainMenuParentBtnFocused,
#iceVerticalSubMenusContainer a.subMenuParentBtnFocused,
#iceverticalmenu li a.iceMenuTitle:hover,
#iceverticalmenu li a.iceMenuTitle:hover span,
#iceverticalmenu li a.iceMenuTitle:focus span,
#iceverticalmenu li a.iceMenuTitle:focus {
	/*color: #F0C237!important;*/
	color: #888888!important;
}

.smOW {
	padding-right: 2px;
}

div#iceVerticalSubMenusContainer .icemega_cover_module {
	/*padding-left: 0;*/
	/*padding-right:0;*/
	padding: 5px 5px 5px 5px;
}

и новые строки

/*
div#iceVerticalSubMenusContainer,
#iceverticalmenu {
	font-size: 12,5px;
}
*/

.parent a.iceMenuTitle span {
	line-height: 30px;
}

#iceverticalmenu ul.icesubMenu li a:hover,
div#iceVerticalSubMenusContainer ul.icesubMenu li a:hover {
	background: #CCCCCC;
}

#iceverticalmenu ul.icesubMenu li a,
div#iceVerticalSubMenusContainer ul.icesubMenu li a {
	margin-left: 2px;
}

Смотрим, что получилось с измененным CSS файлом.

Получилось красивое выпадающее вертикальное меню.

Вывод выпадающего меню не вниз-вправо, а вверх-влево

Изменение направления раскрытия выпадающего меню производятся в строке:

Здесь необходимо указать нужное вам направление, например:

Для горизонтального меню эта строка расположена в файле JOOMLA_ROOT/modules/mod_icemegamenu/assets/js/icemegamenu.js, а для вертикального в файле JOOMLA_ROOT/modules/mod_ice_verticalmenu/assets/js/icemegamenu.js.

Если вам захочется отображать выпадающую часть IceMegaMenu меню в фиксированном месте по горизонтали, а не относительно активного элемента меню - добавьте в конец файла стилей JOOMLA_ROOT/modules/mod_icemegamenu/themes/default/css/default_icemegamenu.css следующую строчку:

.smOW { left: 270px !important; }

Если меню не хочет устанавливаться в позицию "menu" в шаблоне от YooTheme

• Первый способ, опубликовать меню в позицию "top-a". Все сразу встанет на свои места.
• Второй способ - править шаблон.

Пример для шаблона YOO_Cloud для joomla 2.5 позиция "menu"

В файле templates/yoo_cloud/layouts/template.php найдите строку

<nav id="menu"><?php echo $this['modules']->render('menu'); ?></nav>

замените на

<?php echo $this['modules']->render('menu'); ?>

В файле templates/yoo_cloud/warp/layouts/modules/templates/dropdown.php оставьте только это

<?php echo $content; ?>

Скачать русифицированные модули IceMegaMenu, IceVerticalMenu и плагин

• 1
• 2
• 3
• 4
• 5