Собсно реализовал вертикальное мега меню для своего сайта!
стандартных решений для реализации выпадающего бокового меню нет, есть только на ява скриптах, а с помощью этого небольшого гайда можно сделать полноценное вертикальное меню с выпадающими дочерними пунктами меню!
Посмотреть можно здесь:
plastichelper.ruДелал на дефолтной теме, Joomla 1.5
ПРЕДУПРЕЖДЕНИЕ: отображается в левой колонке если в ней(в левой колонке) опубликован хоть один модуль, если модулей нет то меню отображаться не будет!ШАГ 1:
в файле \plugins\system\jat3\base-themes\default\blocks\mainnav.php
ищем строку 17, удаляем ее и все что ниже
ШАГ 2:
в файле \plugins\system\jat3\base-themes\default\page\default.php
ищем строку 141 и вставляем код MEGA MENU LEFT (сверху и снизу оставил строки чтоб было понятно куда вставлять):
<div id="ja-left" class="column sidebar" style="width:<?php echo $l ?>%">
<!-- MEGA MENU LEFT -->
<?php if (($jamenu = $this->loadMenu())) $jamenu->genMenu (); ?>
<!-- jdoc:include type="menu" level="0" / -->
<?php if ($this->hasSubmenu() && ($jamenu = $this->loadMenu())) : ?>
<div id="ja-subnav" class="clearfix">
<?php $jamenu->genMenu (1); ?>
<!-- jdoc:include type="menu" level="1" / -->
</div>
<?php endif;?>
<!-- END MEGA MENU LEFT -->
<?php
//left-mass-top
ШАГ 3:
редактируем файл \templates\default\css\menu\mega.css
в самом верху вставляем код:
/* VERTICAL MEGA MENU SETTINGS */
.ja-megamenu li.haschild-over .childcontent, .ja-megamenu li.mega li.haschild-over .childcontent, .ja-megamenu li.mega li.mega li.haschild-over .childcontent, .ja-megamenu li.mega li.mega li.mega li.haschild-over .childcontent, .ja-megamenu li.mega li.mega li.mega li.mega li.haschild-over .childcontent, .ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild-over .childcontent
, .ja-megamenu li.haschild .childcontent, .ja-megamenu li.mega li.haschild .childcontent, .ja-megamenu li.mega li.mega li.haschild .childcontent, .ja-megamenu li.mega li.mega li.mega li.haschild .childcontent, .ja-megamenu li.mega li.mega li.mega li.mega li.haschild .childcontent, .ja-megamenu li.mega li.mega li.mega li.mega li.mega li.haschild .childcontent
{
left: 135px !important;
margin-top: -45px !important;
}
этот код и определяет положение мега меню.
после этих изменений меню будет отображаться немного коряво, пункты меню не растягиваются по ширине колонки, для этого идем в фф, включаем фаирбаг и инспектируем первый пункт меню, смотрим, в строке
.ja-megamenu ul.level0 li.mega задано значение
float:left; удаляем к чертям это значение. обновляем страницу и о чудо! пункты меню выровнялись по ширине колонки!
далее добавляем и редактируем стили по вкусу с помощью фф и фаирбага!
дочерние пункты меню выравниваются вертикально относительно родительского элемента с помощью параметра: margin-top: -45px !important; его редактированием смещаем дочерние пункты вертикально.
для Joomla 2.5 тоже подходит, проверял сам, правда на денвере. (делаю новый проект)
01.04.2014, 14:12:54