Выпадающее меню на 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.

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

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

Метки: , ,

Комментарии (23) на “Выпадающее меню на joomla 1.5 без гемороя”

  1. […] загловок или body. Как правило, это javascript-код. В посте про выпадающее меню на joomla 1.5 – требуется вставлять в контент яваскрипт код в head, […]

  2. Оксана:

    Все подробно описано, жаль только что не все понятно начинающему

  3. admin:

    Да, чего есть, так это сумбур в объяснениях. Я и сам, когда начинал, во всем этом разбираться очень страдал из-за непонятных объяснений. Вроде все написано, а непонятно. Да и сейчас когда приходится во что-то вникать, тоже возникают сложности.

  4. Семен:

    Вот что я ценю в уроках, статьях (да и вообще) по жизни — так это здоровый юмор! )))

  5. «(этот код не забудьте заключить в теги яваскрипта)
    window.addEvent(‘domready’, function() {
    …»

    Я так и не нашла, где этот код встроен на http://glavoptmebel.ru/ ?
    mootools там стандартный джумловский, ни в самом файле index, ни в подключаемых скриптах нет этого кода…

  6. Серега:

    Привет!
    Подскажите начинаючему.
    Куда нужно вставлять этот код CSS? В шаблон сайта?
    Да и про MooTools не совсем понятно :(
    Уж извините за такие вопросы, но не могли бы вы рассказать по подробнее про то куда нужно вставлять эти волшебные коды)))))

  7. admin:

    Вставляйте в раздел вашего шаблона, например. Или создайте модуль как описано в статье. Там ведь вроде описано?

  8. admin:

    а я там это убрал. Я тут вот умничаю, а сам туплю очень сильно. Там я сделал просто меню на css.

  9. Seth:

    Тоже заморочился этим. Через гугл вышел на сайт и не дочитал статью… Как только прочел что есть настройки, пошел и увидел там галку всегда показывать подпункты. Отметил и вуаля все выпадает! Вот это действительно без геморроя, спасибо!

  10. RegEditor:

    Вопрос автору! Я попробовал этот способ, все отлично работает на странице со стандартными джумловскими модулями. Но стоит зайти на страницу со сторонними компонентами, будь то фотогалерея или гостевая книга (в частности Phoca, но я несколько перепробовал), как вылезает JS ошибка: ругается на первую же строчку
    window.addEvent(‘domready’, function() {
    мол, объект не поддерживает свойство или метод.
    Кто-нибудь знает способ решения этой проблемы?..

  11. я как бы новичок во всем этом… и очень сложно понять что написано в этой статье… можно ли ее написать более подробно… тобишь для полных чайников?)
    я вообще не могу понять как это сделать :
    Теперь mootools:
    (этот код не забудьте заключить в теги яваскрипта)

  12. admin:

    Видать конфликтует с фокой — он скорее всего использует другую библиотеку — jquery и отключает mootools. А js ругается, потому что не знает о таком методе, который как раз и описан в отключенном файле. Тут уж ничего не поделаешь.

  13. admin:

    зайдите для начала на javascript.ru — что ли, или вообще почитайте по javascript

  14. Да, написано действительно не для новичков…

  15. altair:

    Если бы так объясняли вашим детям…. врятли ли вы остались довольными, такой способ выкладки материаля может навсегда лешить желания что либо пробывать…
    Пожалуйста, если не сложно, расскажите, для чайника, что и куда надо вставлять.
    В конце то концов, вы же выложили это пост чтоб помочь другим, а не показать какой вы умный.

  16. Спасибо автору! Принцип понял, построил вот такую конструкцию для 3 уровня меню, правда не исключаю что криво так как не знаток mootools

    window.addEvent(‘domready’, function() {
    var Element = $$(‘#menu-2-level ul li.active’).set({
    ‘events': {
    ‘mouseenter': function(){ $$(‘#menu-3-level’).addClass(‘hilite’) },
    }
    });
    var Element = $$(‘#menu-3-level’).set({
    ‘events': {
    ‘mouseleave': function(){ $$(‘#menu-3-level’).removeClass(‘hilite’) }
    }
    });
    });

    Может кто проверить?

  17. пипец как все сложно.. я с этой джумлой скоро всю голову себе сломаю.

  18. Описал прекрасный модуль Выпадающее меню joomla http://e-kzn.ru/rasshireniya/vipadaiuschee-meniu-joomla.html

  19. Ребята, при подключении mod_virtuemart на joomla 1.5 страница сайта увеличивается. т.е. добавляется отступ снизу большой. Помогите его убрать, пожалуйста :(

  20. рекомендую доработать отображение выпадающих элементов в стиле:
    ul.menu li.hilite ul{
    z-index : 100; /*Вот здесь класс hilite наш — выводим меню в верхние слои*/
    position:relative;
    top : 0px;
    }

  21. А не проще на css это все сделать?
    ul.menu li ul{display:none; position:absolute;}
    ul.menu li:hover ul{display:block;}

  22. admin:

    Джумла, сука, мутная

  23. admin:

    Простите, я с каждым днем стараюсь стать лучше.

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

Перед отправкой формы:
Human test by Not Captcha