Создание dropline menu (подменю в линию)

Joomla | 23.05.2010 | Метки: | 8 Комментариев

Для некоторых задач дизайна в шаблонах Joomla требуется применение подменю в ввиде дополнительной линии пунктов вложенного меню под основным.
Для реализации этой необходимости существуют готовые решения с применением javascript-библиотек (jquery, mootools и пр.). Но сделать такое подменю можно и проще, воспользовавших встроенным функционалом модуля mod_mainmenu и без javascript.

Инструкция создания подменю в линию для главного меню:
1. Опубликовать модуль mod_mainmenu в позиции top (или в вашей позиции).
2. Выставить настройки модуля меню как на рисунке.
Параметры модуля mod_mainmenu
3. Добавить css-инструкции:

#topmenu li ul  {
display:block;
left:0;
position:absolute;
}

Эти правила являются обязательными, также можно добавить дополнительные свойсвтва css для дополнительного внешнего оформления (цвет, отступы и размер шрифта для пунктов подменю, расположенных в линию) для элементов #topmenu li ul li.

В этом примере используется функционал модуля mod_mainmenu, а именно, возможность выводить дочерние пункты меню при активации родителя.

Результат в итоге будет выглядеть примерно так:

DropLine menu Joomla

Комментариев: 8

  • 10.09.2010 саша:
    Ответить

    Привет! знаешь, а у меня не работает!!!

    но очень нужно такое меню...

    помоги плиз!

  • 11.09.2010 Кирилл:
    Ответить

    Этот прием точно работает на бесплатном joomla шаблоне i-Business Предлагаю проверить на нем, а потом глянуть чего не хватает в вашем шаблоне для создания дроплайн.

  • 19.04.2011 рита:
    Ответить

    а куда добавлять

    #topmenu li ul {

    display:block;

    left:0;

    position:absolute;

    }

    ??

    В css template нет #topmenu

    • 19.04.2011 Кирилл:
      Ответить

      Рита, эти инструкции надо добавить в template_css.css для того меню из которого вы хотите сделать dropline. В случае шаблона i-Business такое меню находится в теге <div id='topmenu'>.

  • 28.08.2012 VasiliO:
    Ответить

    :) ЛоЛ полный смотрите шаблон а лучше папочку скрипт

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

    var main = document.id('gkDropMain');

    var sub = document.id('gkDropSub');

    if(main) {

    var submenus = document.id('gkSubmenu').getElements('#gkDropSub > ul');

    var currentsub = null;

    submenus.each(function(el, i) {

    if(el.hasClass('active')) currentsub = submenus[i];

    });

    main.getElements('li').each(function(el, i) {

    el.addEvent('mouseenter', function() {

    if(currentsub) {

    currentsub.setStyle('left', '-999em');

    submenus.setProperty('class', '');

    }

    currentsub = submenus[i];

    currentsub.setStyle('left', 'auto');

    currentsub.setProperty('class', 'active');

    });

    });

    }

    });

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

  • 21.10.2012 RaMsUs:
    Ответить

    спасибо огромное автор , долго искал решение этой проблемы уважение и респект!

  • 02.02.2013 Ирина:
    Ответить

    Подскажите, как добавить уже созданный справочник категорий транспортных средств в раскрывающийся список «каталог», что есть в главном меню?

    • 02.02.2013 Кирилл:
      Ответить

      Если у используемого вами компонента есть возможность генерировать таблицы грузовиков по их категориям, то самый простой вариант, создать под меню «Каталог» дочерние пункты меню типа «URL ссылка» с ссылками на эти таблицы. Ну и дальше использовать для вывода главного меню какой-нибудь модуль, с выпадающими функциями, коих полно на joomla.org. По крайней мере я бы с этих мыслей начал решение задачи.


Добавление комментария:
 css.php