Выпадающее меню на joomla 1.5 без гемороя

В целом, заявление, конечно, довольно громкое, но, возможно, кому-то пригодится (хуясе запятых сколько). Как известно, на joomla реализовано несколько типов отображения меню, но нет стандартного выпадающего. Есть, помнится, какой-то мудреный компонент, который мутит разные меню, но он там много перековеркивает и вставляет кучу кода, яваскрипта и прочего, а я до этого не большой любитель, поэтому, придумалось мне одно решение

В принципе, все закручено на том, что раз уж джумла по-умолчанию работает с mootools – грешно бы не использовать его могучие возможности. Пришлось, правда, потупить над документацией, но кое-что из этого получилось.

Итак: для начала, создаем меню (мне надо было сделать двухуровневое, поэтому над третьим уровнем я не морочился, и не знаю, можно ли его таким способом реализовать – не думал) – в нем делаем пункты и дочерние пункты – которые собственно и будут появляться при наведении мыши на родительские.

В модуле ставим тип отображения «список» (стандартный) и в настройках – «раскрывать меню», «активировать родителя».

Теперь mootools:

(этот код не забудьте заключить в теги яваскрипта)

window.addEvent('domready', function() {

var Element = $$('.moduletable_shop ul.menu li.parent').set({
    'events': {
        'mouseover': function(){ this.addClass('hilite') },
        'mouseleave': function(){ this.removeClass('hilite') }
    }
});
});

Что здесь есть что? Фиг его знает. Уж больно он мутный – mootools, не то что jquery – здесь я просто подладил под себя пример из другой оперы. В общем .moduletable_shop ul.menu li.parent – это селекторы, с помощью которых мы обращаемся к любому раодительскому пункту меню, а дальше устанавливаются два события – по наведению мыши - присвоить класс hilite, при уведении мыши – удалить этот класс. _shop – это в сайте – суффикс модуля – его, понятно, у вас может и не быть или он будет другой.

Дальше css – приводить его здесь не обязательно, скажу лишь, что все дочерние пункты меню… А ладно приведу для ясности:

ul.menu li ul{
  display:block;

  z-index:-2;           /*Здесь прячем подпункты на нижние слои*/
  position:absolute;
  margin-left: 220px;  /*Отступ справа = ширина родительского пункта меню*/
  margin-top: -93px;   /*Отступ снизу = высота родительского пункта меню*/

 }
 ul.menu li.hilite ul{
   z-index:100;          /*Вот здесь класс hilite наш - выводим меню в верхние слои*/
 }

Воооот.

А собственно и все.

Вызов скрипта я сначала вставлял в head, но потом оказалось, что некоторые компоненты (например контакты) пишут вызов mootools в самый конец head – и мой скрипт, стоя выше их в коде, не работает, поэтому я стал вставлять его в модуль, который вызываю сразу после открывающего тега body.

Там, конечно есть свои подводные камни – в частности, если список последнего подпунктов последнего родительского пункта очень большой – то они вылезали снизу из под body – пришлось их подравнивать вверх, благо у всех пунктов меню есть id.

Ну и если еще поморочиться можно добавить эффект сглаживания, чтобы не сразу, а как бы проявлялось постепенно.

Пример можно посмотреть здесь

подобные записи

• Горизонтальное выпадающее меню для joomla1.5
• CSS меню для Joomla!
• Чем открыть файл .jpa / Компонент бэкапа для joomla 1.5
• Облако тегов для Joomla1.5
• Как убрать в joomla-копирайт, значок, логотип и тд.

Метки: joomla, выпадающее меню

Запись опубликована 22.01.2010 в 1:12 дп и размещена в рубрике joomla. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.