Выпадающее меню Joomla

Выпадающее меню Joomla, 4.9 из 5 основанный на 57 голосах.

Выпадающее меню сайта позволит вам иметь дружественный интерфейс и избавит от излишнего загромождения.

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



Как сделать выпадающее меню joomla?

Прежде всего, необходимо понимать, что меню выводится в позиции для вывода модулей. Следовательно, необходим модуль меню с выпадающим списком. Немного покопавшись в поисковиках на эту тему и опробовав некие варианты, я наткнулся на модуль слайд меню для joomla - «ARI YUI Menu». Этот модуль позволяет создать вертикальное и горизонтальное выпадающее меню, имеет минимум настроек, совместим с joomla 1.5, 2.5. В его основу положена свободно распространяемая библиотека «YUI Library» от команды разработчиков Yahoo.


Создание выпадающего меню на сайте

Прежде всего, необходимо создать саму структуру будущего меню с необходимой иерархией. Это делается так же, как и для стандартного меню. Рассмотрим небольшой пример с живого сайта.

Макет иерархии выпадающего меню Макет иерархии выпадающего меню

На рисунке видно, что основными пунктами меню являются: Трубы, Фитинги, НСПС и Сварочное оборудование - это элементы первого уровня. Пункты Трубы и Фитинги имеют дочерние элементы – элементы второго уровня: Газопроводные трубы, Водопроводные трубы... Пункт меню Канализационные фитинги так же имеет дочерние элементы – элементы третьего уровня.

Как сделать пункт меню дочерним? Да очень просто, при создании пункта меню или в режиме его редактирования указать для него «Родительский элемент». В ниже следующем примере сказано, что пункт меню «Газопроводные трубы» является дочерним по отношению к пункту меню «Трубы». Аналогичным образом строится иерархия для всех остальных пунктов.

Создание иерархии выпадающего меню Создание иерархии выпадающего меню

Для Joomla 2.5 иерархия строится аналогичным образом, как это делается описано в статье Создание иерархического меню для системы IceMenu.


Установка модуля «ARI YUI Menu»

Скачать модуль «ARI YUI Menu» для joomla можно на сайте автора, там же есть и демонстрационная страница http://www.demo2.ari-soft.com/ari-yui-menu.html или Скачать бесплатно русифицированный ARI YUI Menu в конце этой статьи.

Процесс установки стандартный, в административной панели «расширения-установка и удаление», выбираем скаченный файл модуля и нажимаем кнопку «Установить».

Вертикальное выпадающее меню Вертикальное выпадающее меню Вертикальное выпадающее меню Вертикальное выпадающее меню

После сообщения об успешной инсталляции модуля, необходимо перейти к настройке модуля «Расширения-Модули». Находим в списке модуль «ARI YUI Menu» и нажав на ссылку оказываемся в странице настроек.

Боковое выпадающее меню Боковое выпадающее меню Боковое выпадающее меню Боковое выпадающее меню

Настройка модуля «ARI YUI Menu»

Вкладка «Подробности»
  • смените заголовок
  • проверьте что модуль включен
  • выберите позицию вывода модуля.
Вкладка «Настройки»
  • выберите меню, которое хотите сделать выпадающим
  • введите суффикс класса модуля меню, это пригодится для изменения стиля
  • по вкусу снимите подсветку активного пункта меню
  • выберите тип вертикальное выпадающее меню.
Модуль слайд меню Модуль слайд меню Модуль слайд меню Модуль слайд меню

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

Выпадающее меню joomla Выпадающее меню joomla Выпадающее меню joomla Выпадающее меню joomla

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

Как сделать выпадающее меню joomla Как сделать выпадающее меню joomla

Согласитесь, не совсем красиво, необходимо убирать бордюр, убирать ненужные, уменьшить огромные отступы, увеличить высоту пунктов выпадающего меню. Про вылезающие звездочки голосования вообще молчу. Правим CSS. Обратите внимание на ID модуля, в моем случае id=87 (для Joomla 2.5) и id=23 (для Joomla 1.5).

Введите в поле Стиля CSS свои изменения. Обратите внимание, на #ariyui23. Число 23 в данном месте должно соответствовать id модуля. Если нет особой необходимости в указании ID модуля, необходимо использовать предопределенную переменную {$id} вместо #ariyui23, я показал способ по id модуля лишь для наглядности.

Создание выпадающего меню на сайте Создание выпадающего меню на сайте Создание выпадающего меню на сайте Создание выпадающего меню на сайте

Мой CSS для модуля ARI YUI Menu, в вашем случае он, скорее всего, будет отличаться.

#ariyui23.yui-skin-sam .yuimenu {
  z-index: 10;
}
#{$id}.yui-skin-sam .yuimenu .bd {
  border: 0;
}
#{$id}.yui-skin-sam .yuimenu li .bd {
  border: solid 1px #c8c8c8;
}
#{$id}.yui-skin-sam .yuimenu .yuimenu .bd {
	*zoom: normal;
}
#{$id}.yui-skin-sam .yuimenu ul {
	padding: 0 0 0 0;
}
#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {
	padding: 0 5px !important;
}

#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {
  height: 25px;
  line-height: 25px;
}

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

Настройка модуля ARI YUI Menu Настройка модуля ARI YUI Menu

Если вы хотите редактировать непосредственно файл стиля модуля, он располагается тут JOOMLA_ROOT/modules/mod_ariyuimenu/js/assets/menu/sam/safe_menu.css

Для управления направлением вылета выпадающих блоков в настройках модуля есть строка "Выравнивание подменю [?]". Описание на страничке разработчика YUI гласит: Массив определения того, как подменю должно быть согласовано с родительским пунктом меню. Формат: [itemCorner, submenuCorner]. По умолчанию левый верхний угол подменю выравнивается в правом верхнем углу родительского пункта меню. Мой комментарий: Считайте что там по умолчанию написано tl,tr. Напишите туда то, что нужно вам.


Ответы на часто задаваемые вопросы

Как добавить атрибуты title в ссылки и иконки пунктов меню?

В модуле автор не предусмотрел вывод атрибута title в ссылках пунктов меню и отображение иконок. Покопавшись в исходниках модуля, я добавил такую возможность. Для этого необходимо отредактировать файл JOOMLA_ROOT/modules/mod_ariyuimenu/tmpl/menu.php.

Найдите в файле следующую строку:

$aAttr = array(
	'class' => $hrefCssClass . ($isDisabled ? ' ' . $hrefDisabledCssClass : '') . ($isSelected ? ' ' . $hrefSelectedCssClass : '')
);

Сразу за ней вставьте следующие строки.

if (J1_6) {
	$menuItem->anchor_title = htmlspecialchars($menuItem->params->get('menu-anchor_title', ''), ENT_COMPAT, 'UTF-8', false);
	$menuItem->anchor_css   = htmlspecialchars($menuItem->params->get('menu-anchor_css', ''), ENT_COMPAT, 'UTF-8', false);
	$menuItem->menu_image   = $menuItem->params->get('menu_image', '') ? htmlspecialchars($menuItem->params->get('menu_image', ''), ENT_COMPAT, 'UTF-8', false) : '';
	if ($menuItem->anchor_css)   { $aAttr['class'] .= ' ' . $menuItem->anchor_css; }
	if ($menuItem->anchor_title) { $aAttr['title'] .= $menuItem->anchor_title; }
} else {
	/*$aAttr['title'] .= $menuItem->name; // Раскомментируйте для вывода хинтов*/
	$iParams = new JParameter($menuItem->params);
	if ($iParams->get('menu_image') && $iParams->get('menu_image') != -1) {
		$menuItem->menu_image = JURI::base(true).'/images/stories/'.$iParams->get('menu_image');
		$menuItem->title = $menuItem->alias;
	}
}

Далее найдите строку:

<a<?php echo AriHtmlHelper::getAttrStr($aAttr); ?>><?php echo stripslashes(htmlspecialchars(J1_6 ? $menuItem->title : $menuItem->name)); ?></a>

Замените ее на:

<a<?php echo AriHtmlHelper::getAttrStr($aAttr); ?>>
<?php
if ($menuItem->menu_image) echo '<img src="'.$menuItem->menu_image.'"' . ($menuItem->title ? ' alt="'.$menuItem->title.'"' : '') . ' />';
?>
<?php echo stripslashes(htmlspecialchars(J1_6 ? $menuItem->title : $menuItem->name)); ?></a>
Как добавить иконку в меню ARI YUI Menu Как добавить иконку в меню ARI YUI Menu

Загрузить файл с изменениями можно в конце статьи.

В CSS модуля необходимо добавить код для выравнивания текста относительно иконок
#{$id}.yui-skin-sam ul li a img { vertical-align: middle; margin-top: -2px; }

Если высота изображения в px меньше или равна font-size * 1,5, или его нет
#{$id}.yui-skin-sam UL LI.yuimenuitem { min-height: Xpx; padding-top: Ypx; }
X = varint( font-size * 2 - font-size / 4 )
Y = varint( font-size / 4 )

Как поменять курсор меню?

// Горизонтальное меню
#{$id}.yui-skin-sam UL LI A.yuimenubaritemlabel:hover { cursor: pointer; }

// Вертикальное меню
#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel:hover { cursor: pointer; }

Как поменять цвет пункта меню над которым курсор мыши?

// Горизонтальное меню
#{$id}.yui-skin-sam .yuimenubar { background: none; }
#{$id}.yui-skin-sam .yuimenubaritem-selected, #{$id}.yui-skin-sam .yuimenubaritem-active { background: none; }
#{$id}.yui-skin-sam ul li.yuimenubaritem-selected, #{$id}.yui-skin-sam ul li.yuimenubaritem-active { background-color: red; }

// Вертикальное меню
#{$id}.yui-skin-sam ul li.yuimenuitem-selected, #{$id}.yui-skin-sam ul li.yuimenuitem-active { background-color: red; }

Как поменять название и цвет шрифта?

// Горизонтальное меню
#{$id}.yui-skin-sam .yuimenubar ul li a { font-family: Times New Roman; color: blue; }
#{$id}.yui-skin-sam ul li a.yuimenubaritemlabel, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:link, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:visited, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:hover { color: blue; }

// Вертикальное меню
#{$id}.yui-skin-sam .yuimenu ul li a { color: blue; font-family: Times New Roman; }

Как вывести текст пункта меню в несколько строк?

#{$id} .yuimenuitemlabel, #{$id} .yuimenubaritemlabel {white-space: normal;}
#{$id}.yui-skin-sam UL LI.yuimenuitem { min-height: 25px; padding-top: 6px; }
где padding-top = varint( ( min-height - font-size ) / 2 )

"Стрелочка-треугольничек" наезжает на текст, как отодвинуть?

#{$id}.yui-skin-sam li.yuimenuitem-hassubmenu { padding-right: 15px; }
#{$id}.yui-skin-sam ul li a.yuimenuitemlabel { border-bottom: 0px; }
#{$id}.yui-skin-sam li.yuimenuitem { border-bottom: 1px solid #00f; }

Как поменять цвет бордюра?

#{$id}.yui-skin-sam li.yuimenuitem { border-bottom: 1px solid #00f; }
#{$id}.yui-skin-sam .yuimenu li .bd { border: solid 1px #00f; border-bottom: 0; }

Как поменять цвет фона?

._menu { background-color: grey; }
#{$id}.yui-skin-sam .yuimenu .bd { background-color: grey; }


Как направить выпадение пунктов меню влево, а не вправо?

В настройках модуля есть опция «Выравнивание подменю [?]» Если кликнуть по значку-ссылке знаку вопроса - вы попадете на страничку с описанием выравнивания разработчика YUI.

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

  • Формат: [itemCorner, submenuCorner]
  • Значения: ["tr","tl"] , ["tl","bl"]

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

Комментарий от меня: Считайте что там по умолчанию написано tl,tr (сокращения top, bottom, left, right). Напишите туда то, что нужно вам.


Скачать русифицированный модуль выпадающего меню для joomla

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

Скачать архив модуля для Joomla 1.5, 2.5 mod_ariyuimenu rus.
Доработанный файл menu.php для отображения картинок в меню (переименуйте после закачки).

Если эта статья показалась вам полезной, пожалуйста, проголосуйте за нее. Это поможет другим быстрее найти эту статью из множества других менее полезных.
( 57 Голосов ) 

Комментарии   

 
# Ксения 12.11.2012 11:12
Спасибо, очень полезная статья и подходящее меню. Только скажите пожалуйста куда здесь цвет курсора писать?
#{$id}.yui-skin-sam UL LI A.yuimenuitemlabe l:hover { cursor: pointer; }
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 12.11.2012 11:40
Это сменит тип курсора со стрелки на палец.

Так покрасить его в красный цвет
#{$id}.yui-skin-sam ul li.yuimenuitem-selected,
#{$id}.yui-skin-sam ul li.yuimenuitem-active {
background-color: red;
}
Допишу пояснение на досуге.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 19.11.2012 09:53
Для горизонтального меню.
У вас какие-то стрелки в шаблоне присутствуют.
#{$id}.yui-skin-sam .first-of-type .yuimenubaritem.yuimenuitem-level-0 {
background-image: none;
}
это их уберет.

Это заменит фон меню
#{$id}.yui-skin-sam .yuimenubar {
background-color: yellow;
background-image: none;
}

А это поменяет цвет пункта над которым курсор мыши
#{$id}.yui-skin-sam .first-of-type .yuimenubaritem.yuimenubaritem-selected {
background-image: none;
background-color: red;
}
Ответить | Ответить с цитатой | Цитировать
 
 
# Ксения 21.11.2012 07:05
Спасибо Вам за отзывчивость. Успехов Вам.
Ответить | Ответить с цитатой | Цитировать
 
 
# Вячеслав 29.11.2012 05:28
Здравствуйте! Для вертикального меню как убрать стрелочки? Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 04.12.2012 08:37
#{$id}.yui-skin-sam li.yuimenuitem-hassubmenu {
background-image: none;
}
Ответить | Ответить с цитатой | Цитировать
 
 
# Игорь 15.11.2012 13:23
Скажите пожалуйста, а как этот модуль установить в себе на сайт?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 15.11.2012 13:51
А раздел - Установка модуля «ARI YUI Menu» - разве не об этом?
Там даже с картинками.
Ответить | Ответить с цитатой | Цитировать
 
 
# Паша 15.11.2012 23:19
Спасибо за ваш труд, полезная статья. А есть это меню с описанием блоков в css файле (какой блок за что отвечает)? Я в этом деле новичок, трудно разобраться где, что ... но очень нужно ....Помогите пожалуйста!!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 19.11.2012 09:57
Такого нет. Правая кнопка мыши над объектом, пункт "Просмотр кода элемента". Там и смотрите. Можно налету удалять и добавлять свойства элементов. На мой взгляд, лучшим инструмент - Google Chrome. Далее htmlbook.ru вам в помощь.
Ответить | Ответить с цитатой | Цитировать
 
 
# Алексей 16.11.2012 14:38
А как залить фон меню картинкой? Точнее фон каждого пункта меню? Чет не получается( Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 19.11.2012 10:02
Не лучше ли IceMemu для этого использовать? А это меню для этого не предназначено.
Ответить | Ответить с цитатой | Цитировать
 
 
# Андрей 23.11.2012 04:21
Подскажите как можно свернуть длинные пункт меню до определенного размера? спасибо
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 28.11.2012 11:51
Дать название короче. Для чего его делать длинным? Он должен отображать лишь суть. А длинное название можно указать в хинте - "Параметры отображения ссылки-Описание ссылки".
"Параметры отображения страницы-Заголовок страницы в браузере" - без комментариев понятно для чего.
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 24.12.2012 19:29
Как в этом модуле включить отображение иконок, которые назначены каждому пункту меню? Может что-то в коде модуля прописать надо?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 24.12.2012 23:14
В модуле такой возможности нет. Ручками дописывать надо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 25.12.2012 13:30
Пожалуйста подскажите как дописать? А то я уже замучался искать такой модуль, у меня такой шаблон, что все модули с выпадающим меню корячит, ничего не работает, вот только этот модуль нормально отображается, только вот надо картинки ещё картинки добавить.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 26.12.2012 14:29
Ну и задали же вы задачку! Перечитайте "Ответы на часто задаваемые вопросы", допилил модуль и написал.
Ответить | Ответить с цитатой | Цитировать
 
 
# Олександр 30.12.2012 05:19
Здрасвуйте, у меня проблема, поставил меню в позицию слева в сайдбаре, когда навожу на пункт меню, всплывающие окно уходит под центральный блок с контентом, как решить такую проблему? Возможно вписать z-index: 100; , но не могу понять куда именно..
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 30.12.2012 19:30
Настройка модуля «ARI YUI Menu» - вторая картинка, в поле CSS Style.
Ответить | Ответить с цитатой | Цитировать
 
 
# Олександр 30.12.2012 05:25
И еще вопрос, рядом со списком (горизонтальный вариант меню) заголовков стоят квадратики, как их убрать, знаю что в CSS, но вот где именно не могу найти.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 02.01.2013 13:15
Это из css вашего шаблона картинка bullet.png

templates/jv_winto/css/template.css.php

ul li {
background: url(../images/bullet.png) no-repeat 7px 7px;
padding-left: 20px;
}

закомментируйте background.
Ответить | Ответить с цитатой | Цитировать
 
 
# Олександр 02.01.2013 20:45
Очень благодарю! После праздников возьмусь за работу.
Кстати, с прошедшим Вас!
Ответить | Ответить с цитатой | Цитировать
 
 
# Денис 12.01.2013 01:33
Доброго времени! Подскажите пожалуйста как увеличить длину боковых меню левого "Автосерфинг за деньги" и правого "АВТОЗАРАБОТОК WMR" до конца белого фона соответственно на сайте v-zarabotke.ru?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 12.01.2013 17:06
И вам не хворать!
1 Меню располагаются в правом и левом модулях. Вам надо увеличить ширину модулей, тогда и меню соответственно увеличится. Как это сделать, я сказать не могу, т.к. у вас отключена правая кнопка меню и нет возможности включить отладку css.
2 Я понимаю, что это сделано для исключения воровства контента. Но вот как раз чтобы своровать - достаточно просмотреть код страницы, он виден без проблем. Это защита от школьника-троечника.
3 Что у вас за url страниц index.php/surfsitmoney ? Прочтите статью "Стандартный SEF/ЧПУ Joomla" у меня на сайте.
Ответить | Ответить с цитатой | Цитировать
 
 
# Михаил 13.01.2013 14:24
Добрый день.
Не подскажете, как настроить перенос текста на следующую строку, если не хватает ширины? То есть чтобы некоторые пункты меню были в 2 строки.
Заранее благодарю
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 13.01.2013 19:19
htmlbook.ru/css/word-wrap
Ответить | Ответить с цитатой | Цитировать
 
 
# Михаил 13.01.2013 19:33
С word-wrap уже пробовал, получается странный глюк, что слова в одну строку, одно поверх другого. Похоже, что нужно указать точную ширину, не подскажете, как?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 14.01.2013 11:42
Вот это срабатывает
#{$id} .yuimenuitemlabel, #{$id} .yuimenubaritemlabel {white-space: normal;}
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 15.01.2013 13:24
Помогите мне плиз тоже. Вот проблема... как можно сделать цвет выпадающего меню таким же как цвет активного окна (т.е. на которое направлена мышь)? То есть направляю мышь на пункт меню - он становится красным например, и сразу же от него выпадают тоже красные подпункты меню. - Как так сделать?
Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 17.01.2013 10:43
Для вертикального меню:

#{$id}.yui-skin-sam .yuimenu .bd { background-color: yellow; }
#{$id}.yui-skin-sam ul li.yuimenuitem-selected { background-color: blue; }
#{$id}.yui-skin-sam ul li.yuimenuitem-active { background-color: red; }

#{$id}.yui-skin-sam .yuimenu .bd .yuimenuitem-level-0 .yuimenu .bd { background-color: blue; }
#{$id}.yui-skin-sam .yuimenuitem-level-0 ul li.yuimenuitem-selected { background-color: green; }
#{$id}.yui-skin-sam .yuimenuitem-level-0 ul li.yuimenuitem-active { background-color: white; }

#{$id}.yui-skin-sam .yuimenu .bd .yuimenuitem-level-1 .yuimenu .bd { background-color: green; }
#{$id}.yui-skin-sam .yuimenuitem-level-1 ul li.yuimenuitem-selected { background-color: red; }
#{$id}.yui-skin-sam .yuimenuitem-level-1 ul li.yuimenuitem-active { background-color: black; }

и так далее для всех уровней меняя индекс у .yuimenuitem-level-1
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 17.01.2013 11:35
Для горизонтального меню:

#{$id}.yui-skin-sam .yuimenubar { background-image: none; background-color: yellow; }
#{$id}.yui-skin-sam .yuimenubaritem-selected { background-image: none; background-color: blue; }
#{$id}.yui-skin-sam .yuimenubaritem-active { background-image: none; background-color: red; }

#{$id}.yui-skin-sam .yuimenubar .bd .yuimenuitem-level-0 .yuimenu .bd { background-color: blue; }
#{$id}.yui-skin-sam .yuimenuitem-level-0 ul li.yuimenuitem-selected { background-color: green; }
#{$id}.yui-skin-sam .yuimenuitem-level-0 ul li.yuimenuitem-active { background-color: white; }

#{$id}.yui-skin-sam .yuimenubar .bd .yuimenuitem-level-1 .yuimenu .bd { background-color: green; }
#{$id}.yui-skin-sam .yuimenuitem-level-1 ul li.yuimenuitem-selected { background-color: red; }
#{$id}.yui-skin-sam .yuimenuitem-level-1 ul li.yuimenuitem-active { background-color: black; }

и так далее для всех уровней меняя индекс у .yuimenuitem-level-1
Ответить | Ответить с цитатой | Цитировать
 
 
# Анастасия 19.01.2013 19:36
Доброго вам дня (или ночи).

Подскажите, плз, как можно направить вылет пунктов подменю влево, а не вправо (тк сам модуль меню располагается в правой позиции)

Заранее спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 19.01.2013 20:39
Добрый вечер! Добавил в "Ответы на часто задаваемые вопросы".
Ответить | Ответить с цитатой | Цитировать
 
 
# Анастасия 19.01.2013 22:06
Большое спасибо за такой быстрый ответ. Теперь практически все работает правильно.
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 20.01.2013 13:46
А ещё такой вопрос. Как вместо фона меню поставить изображение?
Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 20.01.2013 19:17
_http://htmlbook.ru/css/background-image
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 20.01.2013 20:32
Спасибо, но а какой именно файл нужно редактировать для этого?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 20.01.2013 21:13
Вместо background-color вставить background-image
Как поменять цвет фона?
#{$id}.yui-skin-sam .yuimenu .bd { background-color: grey; }
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 21.01.2013 10:16
Какой же Вы молодец! СПАСИБО!!!!!!!!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Vlad 27.01.2013 12:27
Ребятки помогите, нужно выравнивание текста по центру и изменение шрифта. В стилях КСС прописал следующее:
#{$id}.yui-skin-sam .yuimenu ul li a { color: red; font-family: Colibri; }
#{$id}.yui-skin-sam ul li a img { vertical-align: middle; margin-top: -2px; }
Ничего не помогло(
файл ксс напрямую найти не могу, нет папки рутджумла
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 27.01.2013 13:05
Не понятно конкретно что не получилось: цвет, фонт, выравнивание текста по горизонтали или вертикали.
Где можно посмотреть на вашу страницу с меню?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 27.01.2013 19:10
#{$id}.yui-skin-sam .yuimenubar ul li a { font-family: Times New Roman; color: blue; }
#{$id}.yui-skin-sam ul li a.yuimenubaritemlabel, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:link, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:visited, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel:hover { color: blue; }
#{$id}.yui-skin-sam UL LI.yuimenubaritem { padding: 0 10px 0 10px; }
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 27.01.2013 20:14
В шаблоне файл стиля /templates/maly9/css/template.css грузится после стиля меню и переписывает на свой лад
#art-main { font-family: Cabin, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; }

Можно попробовать написать так
#art-main #{$id}.yui-skin -sam .yuimenubar ul li a { font-family: Times New Roman; color: blue; }
и ко всем остальным приписать #art-main
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 28.01.2013 20:02
Отправил вам по почте отредактированный template. css. В самый конец добавил строки приведенные выше, заменив предопределенные переменные #{$id} на id вашего меню #ariyui16.
Ответить | Ответить с цитатой | Цитировать
 
 
# Vlad 28.01.2013 20:08
Спасибо Вам за старание, но к сожалению по прежнему без изменений. Ваш теплат поставл, но ничего не изменилось.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 01.02.2013 09:21
Пароль от админки, других вариантов больше не вижу.
Ответить | Ответить с цитатой | Цитировать
 
 
# Александр Юрьевич 31.01.2013 15:19
Доброго времени суток! Спасибо за материал, даже тупой разберется при таком разжёвывании:) Есть один вопрос, у вас на сайте я вижу таже проблема, хотя судя по всему вам это наверно не мешает, собственно суть: "Вы здесь: Home Главная материал" как видно из примера создается 2 раза переход (в моем случае) на главную страницу и при наведении на материал пишется: сайт/home/страница хотя должно быть: сайт/страница. Это получается потому что пункт меню является ссылкой, возможно это как нить убрать, чтобы просто при наведении вылазили пункты меню а на что наводишь было не нажимаемо? либо каким нить другим способом убрать данную фигню? И еще, не мог бы ты указать какие нить контактные данные(аску, мыло, скайп и т.д.) не в комментариях конечно же а на почту, для консультирования иногда, не бесплатно.
За ранее спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 01.02.2013 09:17
Добрый день! Та "фигня" называется "Сепаратор" или "Разделитель".
Ответить | Ответить с цитатой | Цитировать
 
 
# alex1 09.02.2013 03:56
что нужно сделать чтобы при наведении курсора менялся цвет шрифта.. и в каком месте safe_menu.css прописать прописать этот код
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 11.02.2013 09:19
#{$id}.yui-skin-sam .yuimenu ul li a:hover { color: green; } /* Для вертикального */
#{$id}.yui-skin-sam .yuimenubar ul li a:hover { color: green; } /* Для горизонтального */
Код писать в поле CSS Style модуля.
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 11.02.2013 00:15
Наверное просто туплю. но все же.
Создал горизонтальное меню из 5 пунктов, ширины этих пунктов не хватило чтобы закрыть все выделенное под меню место. Создал шестой пункт и не хватило ширины отведенного места, шестой пункт прыгнул на вторую строчку.
Как сделать что бы ширина пунктов меню определялась автоматически и при любом количестве пунктов. отведенное под меню место было все время занято на 100%
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 11.02.2013 09:16
#{$id}.yui-skin-sam UL LI.yuimenubaritem { width: 20%; }
А вообще фиксировать ширину не вижу смысла.
Представьте себе меню при разрешении 1024 и 1920 px.
Модуль надо раскрашивать под цвет меню, как это сделано у меня.
Ответить | Ответить с цитатой | Цитировать
 
 
# Андрей 16.02.2013 13:13
Здравствуйте, подскажите, пожалуйста.


Как вывести текст пункта меню в несколько строк?

#{$id} .yuimenuitemlabel, #{$id} .yuimenubaritemlabel {white-space: normal;}
#{$id}.yui-skin-sam UL LI.yuimenuitem { min-height: 25px; padding-top: 6px; }
где padding-top = varint( ( min-height - font-size ) / 2 )


yuimenuitem { min-height: 25px; padding-top: 6px; } - вот этого в safe_menu.css не нашел. что делать и как вообще перенос строки работает.

Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 17.02.2013 12:38
Читать и смотреть надо внимательно. Найдите в тексте строчку "Введите в поле Стиля CSS свои изменения." Откройте настройки модуля и найдите это поле. И картинка в статье есть, там красным выделено это поле и фрагмент кода написан. Вот она эта картинка e-kzn.ru/files/Joomla/ARI_YUI_Menu/pic_06.JPG
Ответить | Ответить с цитатой | Цитировать
 
 
# Gray 16.02.2013 17:20
Здравствуйте!
Помогите пожалуйста, поставил модуль и тут такая проблема..
Когда заходим на сайт горизонтальное меню уже распахнуто ( без основного бардюра). Как только наводим на кнопку от куда должно выпасть меню, безбордюрное пропадает, а нормальное выпадает (убираем курсор, и оно прячется на место полностью).
И так происходит при переходе по разным кнопкам сайта.
Т.е. перешли по другой кнопке опять висит менюха без бардюра, наводим-выпадает-убираем курсор - исчезает.
могу дать адрес сайта (без ссылки). Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 17.02.2013 12:25
В шаблоне надо ковырять, а вообще в нем по умолчанию меню клуба YooTheme присутствует. Оно ничем не хуже. Как с ним работать собираюсь написать статью. А пока _http://www.yootheme.com/themes/documentation/getting-started/setup-the-joomla-menu прочтите.
Ответить | Ответить с цитатой | Цитировать
 
 
# Расул 22.02.2013 09:32
Здраствуйте. Очень хорошая статья. У меня вот такой вопрос, когда я вставил код изменения названия и цвета шрифта, обьем шрифта становится слижком маленьким, как увеличить размер шрифта. Увеличил размер шрифта не получается.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 28.02.2013 08:49
Куда вставили изменение шрифта и цвета, например font-family: Times New Roman; color: blue;, вставьте font-size: 12px;. А вообще в параметрах модуля есть опция font-size, работающая на весь модуль меню.
Ответить | Ответить с цитатой | Цитировать
 
 
# Костя 25.02.2013 20:41
Доброе время суток, я по вашему коду вывел текст пункта меню в несколько строк, но получилось так, что конец текста первого пункта меню, наехал на текст следующего пункта меню. Как испрачить?
Заранее спасибо !
Ответить | Ответить с цитатой | Цитировать
 
 
# Костя 25.02.2013 21:23
Всё, разобрался ) Нужно уменьшить значение line-height:

#{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {height: 45px; line-height: 15px;}
Ответить | Ответить с цитатой | Цитировать
 
 
# Тимур 01.03.2013 13:54
Здравствуйте. Как в этом модуле настроить сортировку, чтобы меню строилось не по алфавиту. Очень срочно.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 01.03.2013 14:27
Это делается в настройках меню - на самой первой картинке в заголовке таблицы есть поле "Порядок". Вот оно и задает порядок пунктов в меню. А модуль только отображает.
Ответить | Ответить с цитатой | Цитировать
 
 
# Александр123 03.03.2013 14:00
Привет! Как сделать так, чтобы пункт с выпадающими подпунктами, не был ссылкой?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 07.03.2013 20:03
Уже отвечал на этот вопрос Александру Юрьевичу -
Тип пункта меню называется "Сепаратор" или "Разделитель".
Ответить | Ответить с цитатой | Цитировать
 
 
# Костя 03.03.2013 14:20
Доброе время суток,
Помогите разобраться, как с помощью first-letter поменять цвет первой буквы в меню? Можно пример кода ?
Заранее спасибо !
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 07.03.2013 20:17
Для горизонтального
#{$id}.yui-skin-sam .yuimenubar ul li a::first-letter, #{$id}.yui-skin-sam ul li a.yuimenubaritemlabel::first-letter { color: red; }
Для вертикального
#{$id}.yui-skin-sam .yuimenu ul li a::first-letter, #{$id}.yui-skin-sam ul li a.yuimenuitemlabel::first-letter { color: red; }
Ответить | Ответить с цитатой | Цитировать
 
 
# Костя 07.03.2013 23:13
Огромное спасибо ! Успехов Вам !
Ответить | Ответить с цитатой | Цитировать
 
 
# Наум 08.03.2013 11:44
Привет! Помогите, понять не могу. У меня стрелочки-тривульгольники на текст "наезжают", как подвинуть или убрать понятно, а вот в каком файле (где лежит и как называется) не понятно!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 08.03.2013 12:24
Настройка модуля «ARI YUI Menu» - вторая картинка, в поле CSS Style. Никакого файла ковырять не надо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Константин 13.03.2013 11:44
Подскажите пожалуйста как убрать рамку вокруг меню...с этими строчками что то не получается
#{$id}.yui-skin-sam li.yuimenuitem { border-bottom: 0px solid #bbbbbb; }
#{$id}.yui-skin-sam .yuimenu li .bd { border: solid 0px #bbbbbb; border-bottom: 0; }
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 14.03.2013 21:31
Адрес сайта напишите, может это у модуля бордюр.
Ответить | Ответить с цитатой | Цитировать
 
 
# Дмитрий 24.03.2013 11:24
Как сделать, чтобы подпункты открывались не справа/слева, а ПОД пунктом меню?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 28.03.2013 10:09
Использовать аккордеон меню от YooTheme.
Среди бесплатных шаблонов есть шаблоны, с уже встроенной такой менюшкой.
Ответить | Ответить с цитатой | Цитировать
 
 
# Руслана 02.04.2013 01:10
Спасибо, очень приятный модуль, которого не хватало среди русифицированных. Желаю развиваться в направлении смены дизайна меню одной кнопочкой :) Удачи Вам!
Ответить | Ответить с цитатой | Цитировать
 
 
# fomes 05.04.2013 10:37
Подскажите пожалуйста как можно перенести оформление уже готового выпадающего горизонтального меню к ARI YUI Menu. Просто эта информация уже гдето прописана, но я не знаю где и как ее достать.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 07.04.2013 20:01
В табличке dbprefics_modules. Если не знаете как достать, то быстрее скопипастить из админки. Там параметров - кот наплакал.
Ответить | Ответить с цитатой | Цитировать
 
 
# Виталий 06.04.2013 11:46
Здравствуйте!
Подскажите, что можно сделать с выпадающим меню? Перерыл много статей, делал и так как Вы советовали выше "z-index: 100;" ставил разные значения... пробовал вписывать position: relative; z-index: 9999; ...нечего не помогает...
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 07.04.2013 20:03
Я не Вольф Мессинг, адрес сайта какой?
Ответить | Ответить с цитатой | Цитировать
 
 
# Виталий 08.04.2013 14:07
Уже разобрался) спасибо
Ответить | Ответить с цитатой | Цитировать
 
 
# Василий 08.04.2013 04:31
Здравствуйте!
Спасибо за замечательную статью и помощь с проблемами при работе с данным модулем!
У меня есть один вопрос, который своими силами я не смог решить -
У меня сделано так что при наведении курсором на пункт меню, и у активного пункта меню фон является не цветом а картинкой. Вот код:
#{$id}.yui-skin-sam ul li.yuimenuitem-selected, #{$id}.yui-skin-sam ul li.yuimenuitem-active { background: url(menu_sidebar_level1.png) 0 0 repeat-x;
}
Но проблема в том что при этом если есть подпункты меню - пропадает указывающая на них стрелка. Как сделать чтобы с данными настройками стрелка не пропадала?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 08.04.2013 20:31
Не получится, вы картинку со стрелкой меняете на свою картинку. Могу рекомендовать сделать аналогичную картинку с нарисованной стрелкой и в css добавить еще одну строчку
#{$id}.yui-skin-sam ul li.yuimenuitem- selected, #{$id}.yui-skin-sam ul li.yuimenuitem-active { background: url(menu_sideba r_level1.png) 0 0 repeat-x; }
#{$id}.yui-skin-sam ul li.yuimenuitem-active.yuimenuitem-hassubmenu { background: url(menu_sideba r_level2.png) 0 0 repeat-x; }
Ответить | Ответить с цитатой | Цитировать
 
 
# Максим 19.04.2013 17:21
Добрый день подскажите как сделать другой фон у выбранного пункта меню.
например: зашел человек в контакты и в меню фон у контактов другой. и так же если он выбрал под пункт что бы фон поменялся у меню родителя и выбранного меню.
заранее спасибо
Ответить | Ответить с цитатой | Цитировать
 
 
# Наталья 21.05.2013 17:26
Здравствуйте. Вы просто супер-человек, это ж какое человоколюбие, чтобы так терпеливо все объяснять. Даже мне, совсем неискушенной в этих HTML и CSS премудростях все понятно, и многое получилось!!)) Спасибо.
Вопросы следующие:
1. Как сделать, что бы пункты меню отображались списком?
2. Пункты меню помещены в рамку, а эта рамка в рамку шаблона. Как поместить пункты меню в рамку шаблона?И так поместить, чтобы они в ней расположились и никуда не вылезали?
Спасибо!!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 24.05.2013 09:20
Добрый день, Наталья! Не стоит этим заниматься. Все что вам нужно - найти аккордеон меню от YooTheme. Пример такого меню navitels.su/
Ответить | Ответить с цитатой | Цитировать
 
 
# Наталья 27.05.2013 22:07
Еще раз здравствуйте, спасибо за Ваш совет, но дело тут вот в чем, шаблон сайта предусматривал выпадающее вертикальное меню, но после вирусной атаки на сайт, что-то изменилось, и дочерние подменю перестали выпадать, мне бы это поправить, но не знаю как, вот и хотела новое меню сделать, но чтоб было похоже на прежнее. Если это возможно, то посоветуйте, пожалуйста, как быть. Название сайта stroyveka.ru Заранее спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 29.05.2013 22:14
1. Как сделать, что бы пункты меню отображались списком?
- Они у вас списком и выводятся
2. Пункты меню помещены в рамку, а эта рамка в рамку шаблона. Как поместить пункты меню в рамку шаблона?
- Что вы этим хотели сказать, что у вас две рамки и вам от одной надо избавиться?
И так поместить, чтобы они в ней расположились и никуда не вылезали?
Это чтто значит,пункты за пределы модуля выходят?

..шаблон сайта предусматривал выпадающее вертикальное меню..
- Я нашел шаблон как и у вас. Различие в демке в том, что горизонтальное меню выпадает (у вас в нем просто нет дочерних элементов), а вертикальное такое как и у вас.
..но после вирусной атаки на сайт, что-то изменилось..
- Так может у вас сторонний модуль стоял, посмотреть же можно какой именно и просто поверх переустановить. Посмотрите в директорию modules.
Или опишите конкретнее, что у вас не получилось с описанным в статье ARI YUI Menu.
Ответить | Ответить с цитатой | Цитировать
 
 
# Андроей 30.05.2013 08:28
Здравствуйте Вадим. Присоединяюсь к благодарностям. Установил данный модуль благодаря Вашему руководству. Подправил цвет выбираемых пунктов меню, но не могу понять каким образом изменить цвет текста меню активного. Т.е. мне необходимо изменить цвет того пункта меню которое активно после перехода.
Заранее благодарен. С ув. Андрей
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 30.05.2013 09:32
для горизонтального
#{$id}.yui-skin-sam ul li.yuimenubaritem-active a.yuimenubaritemlabel-active { color: green; }
для вертикального
#{$id}.yui-skin-sam ul li.yuimenuitem-active a.yuimenuitemlabel-active { color: green; }
Ответить | Ответить с цитатой | Цитировать
 
 
# Андрей 30.05.2013 11:39
Благодарю за столь быстрый ответ. Попробовал Ваш совет - но не получилось. Только сейчас обратил внимание - у Вас меняется цвет активной ссылки, как я и хотел сделать.
Странно - но у меня почему-то не просматривается вообще класс .yuimenuitemlabel-active . (Пробовал просмотреть код элемента через Google Chrome).
Пробовал даже в чек-боксе поставить оставлять меню активным. Может быть есть какие-то нюансы еще?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 30.05.2013 11:46
Конечно есть! В настройки модуля внимательнее если посмотреть, то без труда можно заметить опцию "Оставлять активным пункт меню".
Ответить | Ответить с цитатой | Цитировать
 
 
# Андрей 30.05.2013 12:11
Вы, видимо, немного неправильно меня поняли - я про этот пункт написал, но вот другого пункта к сожалению не заметил - "Выделение текущего пункта", он все решил.
Спасибо еще раз за Ваши труды - у меня все получилось.
С ув. Андрей
Ответить | Ответить с цитатой | Цитировать
 
 
# ЯН 03.06.2013 22:18
Спасибо за статью, будем читать ваш блог дальше.
Ответить | Ответить с цитатой | Цитировать
 
 
# Виталий 15.06.2013 03:54
День добрый! Спасибо за Ваши старания, вес отлично получается, но я так и не нашел как увеличить длину строки меню, просто название пункта никак не сократить.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 15.06.2013 17:39
В настройках модуля есть опция "Ширина".
Ответить | Ответить с цитатой | Цитировать
 
 
# Виталий 15.06.2013 20:30
я ее менял, а на сайте без изменений...
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 17.06.2013 07:48
У вас написано в css #ariyui103 {width: 25000;} А где единица, 25000 крокодилов, попугаев или пиксель все же? Далее, все ваши пункты без проблем можно сократить, а полный текст писать в заголовке страницы в теге H1.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 17.06.2013 22:00
Я видел ваш сайт, не шлите больше ссылки. Внимательно посмотрите на css -
#ariyui103 .yuimenuitemlab el, #ariyui103 .yuimenubaritem label {white-space: normal;}#ariyui103{width:25000}#ariyui103 A{font-size: 13px !important; font-weight: lighter !important; text-transform: none !important;}

Вы видите {width:25000} в этом коде? Это не правильно!
Поставьте {width:350px} PX - это пиксель, а не неизвестная браузеру величина!
Ответить | Ответить с цитатой | Цитировать
 
 
# Виталий 17.06.2013 22:18
Спасибо огромное. Все получилось
Ответить | Ответить с цитатой | Цитировать
 
 
# Андрей 22.06.2013 22:47
Добрый день! отличная статья, всё работает, есть пару вопросов..
Загрузил ваш вариант menu.php на сайт, но не понимаю как выводить иконки..
1) как прикрепить конкретную иконку к конкретному пункту меню?
2) какова роль строк
$menuItem->menu_image = JURI::base(true).'/images/stories/'.$iParams->get('menu_image');
$menuItem->title = $menuItem->alias;
картинки должны лежать в images/stories
Объясните этот момент пожалуйста.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 25.06.2013 17:22
1 роль строк - указывают место их хранения.
2 как выводить иконки - посмотрите в настройки меню (не модуля, а менеджера меню). Параметры отображения ссылки - Изображение ссылки - это то, что вам надо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей Д. 28.06.2013 00:12
Замечательная статья! Но вот как немного уменьшить ширину ленты горизонтального меню, чтобы она стандартно вписалась в шаблон YOO_Page от YOO Themes (см. сайт _tver-ufms.ru)
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 30.06.2013 18:47
Внимательно посмотрите css файлы шаблона. В одном из них, кажется templates/yoo_page/css/template.css.php, точно не знаю из-за работы компрессора, определена высота меню 40px:
div#menu li a, #menu li span.separator {
height: 40px;
}
Определите нужную вам высоту.
Ответить | Ответить с цитатой | Цитировать
 
 
# Михаил 09.07.2013 14:16
Здравствуйте!
Мне кажется, что мы обсуждали уже и вроде исправили, но снова третий уровень меню сильно короткий и это не красиво.
Вопрос: как увеличить ширину 3-го уровня?
_http://www.turizm4x4.ru/
Большое спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 11.07.2013 01:11
1 Странным образом у вас css строка выглядит, вы что-то позабыли перед 2-ой открывающейся скобкой.
2 Обратите внимание на значение word-wrap, перенос строк добавляется автоматически.
#ariyui272 A{font-size: 12px !important; font-weight: normal !important; text-transform: none !important;}{width: 100%;word-wrap: break-word;}
Ответить | Ответить с цитатой | Цитировать
 
 
# Валентин 13.07.2013 21:27
Доброго времени суток! Большое спасибо за статью и модуль.
Пожалуйста подскажите как отцентровать пункты меню? Они распологаются не по всей ширине шаблона. И еще момент, при наведении курсора на один из пунктов меню он меняет цвет, как его изменить? Еще раз благодарю за помощь!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 14.07.2013 13:24
1 "как отцентровать" - это само горизонтальное меню имеется ввиду или пункты меню?
2 " как изменить цвет" - в статье есть заголовок "Как поменять цвет пункта меню над которым курсор мыши?" - прочтите.
Ответить | Ответить с цитатой | Цитировать
 
 
# Валентин 14.07.2013 13:46
Имеется ввиду само горизонтальное меню.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 14.07.2013 18:51
Приучайтесь отвечать кнопкой "Ответить", чтобы диалог был в ветке, а не хаотично. Просто так вы этого не сделаете. Контейнер имеет ширину 100%, можно задать смещение относительно родителя, но при других разрешениях меню не будет центрировано.
Ответить | Ответить с цитатой | Цитировать
 
 
# Василий 30.07.2013 15:21
Доброго времени суток! У меня проблема с выводом разных уровней подпунктов главного меню на разных страницах. Мне надо на главной вывести только 1-й уровень, а при переходе с пунктов 1-го уровня чтобы выводился второй уровень пунктов меню. Пробовал выставлять в настройках от 1 до 1 (на главной) и от 2 до 2 (на следующих страницах), но настройки меняются одновременно для всех пунктов. Мне кажется, что для этого модуля выставлять разные уровни меню на разных страницах невозможно (посмотрите progmatem.ru/zadachnik).
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 04.08.2013 19:06
Второе меню создайте с нужными пунктами и публикуйте только на главной. А то что уже есть на всех кроме главной.
Ответить | Ответить с цитатой | Цитировать
 
 
# Duke_Cheb 01.08.2013 16:00
Ооо, спасибо тебе огромное!!! Вторые сутки маюсь, ищу вертикалку для таблично-сверстанного сайта, такую, чтобы при раскрытии дочерней категории, полоса прокрутки не материализовывалась в ячейке. И, самое офигенное - минимум навязанных стилей. Не знаю, де ты ее нашел, но просто огромное человеческое!!!
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 27.09.2013 20:19
Доброго времени суток. Огромное спасибо за Ваш титанический труд! В Вашем меню все устроило, но есть 1 вопрос. Есть ли возможность на бекграунд каждого пункта повесить разные картинки, ну или хотя-бы 1 повторять в каждом пункте? Заранее огромное спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 28.09.2013 13:06
Вставка фоновой картинки в каждый пункт вертикального меню
#{$id}.yui-skin-sam ul li.yuimenuitem { background-image: url(images/pic_01.jpg); }
горизонтального меню
#{$id}.yui-skin-sam .yuimenubaritem-selected, #{$id}.yui-skin-sam .yuimenubaritem-active { background: none; }
#{$id}.yui-skin-sam UL LI.yuimenubaritem { background-image: url(images/pic_01.jpg); }

Если вы хотите чтобы картинки во всех пунктах меню были разными, необходимо конкретизировать класс для каждого пункта, это сложнее, но разобраться можно по исходному коду страницы, либо средствами отладки
Как пример для вертикального меню
#{$id}.yui-skin-sam ul li.yuimenuitem-item101 { background-image: url(images/pic_01.jpg); }
#{$id}.yui-skin-sam ul li.yuimenuitem-item102 { background-image: url(images/pic_02.jpg); }
для горизонтального меню
#{$id}.yui-skin-sam .yuimenubaritem-selected, #{$id}.yui-skin-sam .yuimenubaritem-active { background: none; }
#{$id}.yui-skin-sam ul li.yuimenuitem-item101 { background-image: url(images/pic_01.jpg); }
#{$id}.yui-skin-sam ul li.yuimenuitem-item102 { background-image: url(images/pic_02.jpg); }
Ответить | Ответить с цитатой | Цитировать
 
 
# Сергей 29.09.2013 13:27
Спасибо за оперативный ответ, оба способа работают, но к сожалению только на стартовой странице. При переходе на любую другую страницу сайта фон меню вообще исчезает. При возвращении на стартовую появляется. Не подскажите в чем может быть проблема? Заранее Огромное спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 30.09.2013 19:42
Адрес сайта, где это можно увидеть?
Ответить | Ответить с цитатой | Цитировать
 
 
# Станислав 16.10.2013 14:33
Добрый вечер, подскажите пожалуйста как сделать у ARI YUI Menu по бокам рамки и что бы они были с закругленные в углах, как у вас на сайте, я в css модуле продела все изменения как вы описывали на своем сайте начиная от Как поменять курсор меню?------ и до Как поменять цвет фона?, а все остальное не получилось- то есть Как добавить атрибуты title в ссылки и иконки пунктов меню? а у меня только получилось меню с подчеркиванием ,строки выпрямились, фон поменял, а по бокам пустота нет краев, охота что бы меню было в полноценной рамки, помогите исправить, может что надо в css добавить, буду очень благодарен если поможете)
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 17.10.2013 14:04
Как сделать рамку с закругленными углами?

У меня не у меню закруглены углы, а в представлении модулей.
Берется бордюр 1px нужного цвета, затем скругляются углы
.mod-box {
border: 1px solid #ccc;
border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}

Как добавить атрибуты title в ссылки и иконки пунктов меню?

В настройках меню есть
1 "Параметры отображения ссылки" и в нем "Изображение ссылки". Туда вписывается относительный путь к изображению , как пример images/application-wave-gray.png
2 "Описание ссылки" - то, что вы хотите написать в атрибуте ALT, это значение будет хинтом к пункту меню.


По бокам меню отступы до краев, как их убрать?

Я убираю отступы в представлении модулей.
.mod-box {
margin: 0px 0px 10px 0px;
padding: 0px 0px 5px 0px;
}
Ответить | Ответить с цитатой | Цитировать
 
 
# Ильхам 26.11.2013 13:04
Добрый день. а как сделать чтобы выпадающее направо меню делилось на две колонки? много пунктов просто в нём.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 10.12.2013 20:00
На две никак. Но можно сделать прокрутку использую значение "Максимальная высота", посмотрите в настройках модуля.
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 09.02.2014 15:16
Здравствуйте! Подскажите пожалуйста как сделать так что бы элементы горизонтального меню были по середине сайта (меню центрировалось по середине).
Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 24.02.2014 15:00
Все зависит от шаблона. Скорее всего, контейнеру надо добавить margin: auto;
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 18.02.2014 10:17
Здравствуйте, спасибо за отличную статью и разбор всяческих тонкостей. Не подскажите как сделать, чтобы в горизонтальном меню, подменю выпадали немного со смещением по отношению к родителю, чуть вниз и чуть вправо например. Выравнивание подменю пробовал, но там нет цифровых значений. Заранее благодарен
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 24.02.2014 14:39
#{$id}.yui-skin-sam .yuimenu .bd {margin-top: 20px; margin-left: 20px;}
Ответить | Ответить с цитатой | Цитировать
 
 
# Николай 24.02.2014 22:08
Спасибо, большое! Есть, правда, небольшая проблемка - после смещения подменю остается полупрозрачный квадрат, это связано с шаблоном? Показать не смогу, сайт на локалке.

Заранее благодарен
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.03.2014 20:35
Скорее всего это бордюр, серенький и невзрачный. Как будет на сайте - напишите, исправим.
Ответить | Ответить с цитатой | Цитировать
 
 
# Владимир 22.02.2014 21:37
Добрый вечер. Хорошее меню. Подскажите каким образом можно расположить по центру названия пунктов меню. И как сделать уголки меню не прямоугольными, а округлыми?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 24.02.2014 14:43
В комментариях есть ответ на вопрос "Как сделать рамку с закругленными углами?"
Центрировать так: #{$id}.yui-skin-sam UL LI A.yuimenuitemlabel {text-align: center;}
Ответить | Ответить с цитатой | Цитировать
 
 
# Владимир 24.02.2014 15:01
добрый день. А в какой модуль нужно внести
У меня не у меню закруглены углы, а в представлении модулей.
Берется бордюр 1px нужного цвета, затем скругляются углы
.mod-box {
border: 1px solid #ccc;
border-radius: 5px 5px 5px 5px;
-o-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;

--???
скажите пожалуйста. когда я прокручиваю с помощью прокрутки меню на несколько уровней в низ , то третий уровень меню тоже смещается. в итоге получается, что когда нахожу нужный пункт меню второго уровня, то меню третьего уровня открывается не по рядом с пунктом второго меню, а где-то вверху.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.03.2014 20:37
Это надо смотреть на сайте, картинка на файлообменнике уже удалена.
Ответить | Ответить с цитатой | Цитировать
 
 
# Евгений 14.03.2014 09:30
Добрый день! Спасибо Вам за статью и модуль! Пользуюсь давно и очень нравится. У меня вопрос: как выделить другим цветом один из пунктов меню?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.03.2014 20:33
У каждого пункта меню есть свой собственный класс yuimenuitem-itemХХХ
где ХХХ число, посмотрите его и раскрашивайте, вот примеры:

Для вертикального меню
#{$id}.yui-skin-sam LI.yuimenuitem.yuimenuitem-item188 {background: red;}

Для горизонтального меню
#{$id}.yui-skin-sam .yuimenubarnav .yuimenubaritem.yuimenuitem-item215 {background: blue;}
Ответить | Ответить с цитатой | Цитировать
 
 
# Елена 21.03.2014 15:35
Добрый день! Немного не по теме, но буквально молю о помощи!
_viscomtec.ru -- Сбилась с ног, не могу найти, где убрать слово "Главная" в центре страницы над картинкой! Помогите, пожалуйста!
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.03.2014 15:53
материал-параметры отображения материала-заголовок выключить
меню-главная-параметры отображения материала-заголовок выключить
Ответить | Ответить с цитатой | Цитировать
 
 
# Елена 21.03.2014 17:45
И там, и там выключено, а все равно отображается : (
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.03.2014 19:15
В меню Home (или Главная как она называется) - Параметры отображения страницы-Заголовок страницы и Показывать заголовок страницы посмотрите.
Ответить | Ответить с цитатой | Цитировать
 
 
# Елена 21.03.2014 19:57
Вы маг : ) Спасибо вам огромное!
Ответить | Ответить с цитатой | Цитировать
 
 
# Александр 26.03.2014 13:11
Добрый день, скажите пожалуйста, настроил перенос текста по словам, Теперь на втором уровне у меня переносится на новую строку после каждого слова. Как увеличить ширину 2-го уровня меню.
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.05.2014 19:13
Основные параметры->Ширина
Ответить | Ответить с цитатой | Цитировать
 
 
# Вадим 15.04.2014 23:11
можно сделать разный цвет активного пункта меню и цвет пункта меню над которым курсор мыши,не текста а background
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.05.2014 19:16
Простите, описано в пункте
Как поменять цвет пункта меню над которым курсор мыши?
Ответить | Ответить с цитатой | Цитировать
 
 
# Семен 21.05.2014 12:30
А как добавить это меню и для вертикального и для горизонтального?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.05.2014 19:10
Так же как и обычное меню. Создать модуль и опубликовать в нужные позиции. Модулям назначить нужные меню. Все же расписано с чудными картинками.
Ответить | Ответить с цитатой | Цитировать
 
 
# Георгий 21.05.2014 18:37
Создал выпадающее меню, все нормально. Вот только при просмотре кода страницы обнаружил, что настройки CSS меню модуля отображаются дважды. То есть дубли модуля фактически получается.
Почему так случилось не смог разобраться. Помогите устранить причину возникновения дубля модуля меню.
Мой сайт: sitedelkin.ru
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 21.05.2014 19:08
Не вижу проблем. У вас сначала css модуля грузится, потом сделанный вами кастомайз.
Ответить | Ответить с цитатой | Цитировать
 

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

Уважаемые посетители!
Комментарии модерируются, активные ссылки на сайты не публикуются. Пожалуйста, не тратьте понапрасну свое и мое время на попытку размещения спамерских ссылок.
Спасибо.


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