Раздвигающееся вертикальное меню Drupal 6

Эта задача из разряда useability. Drupal может штатно создавать блоки вертикальных иерархических меню.

Неудобным будет тот случай, когда мы хотим попасть на страницу в глубине иерархии этого меню. Нам придется последовательно заходить на родительские страницы, пока мы не достигнем нужной нам вложенной публикации. А это и нагрузка на сервер и ожидание пользователя загрузки каждой очередной страницы (а они ох как не любят ждать).

Можно, конечно, сделать какие то ветки меню всегда раскрытыми (expanded). Это подойдет для ряда случаев, когда пунктов меню не очень много (20-30). Если же речь идет о каталоге товаров, то раскрывать сразу всю портянку будет не разумно. А с закрытыми (collapsed) подменю Drupal обходится так, что просто их не выводит в шаблон (раз их не видно), пока они свернуты, и вы не активизировали соответствующий пункт меню.

Я покажу как можно, используя jQuery, функции API Drupal Menu и такую то мать (немного PHP), собрать блок вертикального разворачивающегося меню. В конце добавим щепотку CSS для полноты вкуса.

Программируем альтернативный блок меню (PHP и Drupal API)

Стандартная часть объявления блока в drupal, и пара функций реализующих блок нашего меню. Всё действие разворачивается в коде гипотетического модуля MyModule.

function MyModule_block($op = 'list', $delta = 0, $edit = array()) { 
    switch ($op) {
    case 'list':
        //объявление списка блоков
        //я назвал его - меню продукции и запретил его кеширование
        $block = array();
        $block[0]["info"] = t('SC: Меню продукции');
        $block[0]['cache'] = BLOCK_NO_CACHE;
        return $block;
    case 'view':
        switch ($delta) {
        //обработчики блоков
        case 0:
            return _MyModule_productmenu();
        }
    }
}

/* товарное меню со сладингом */
function _MyModule_productmenu() {
    //получим все дерево меню продукции (а не её активную ветку,
    //как сделано в аналогичном блоке ядра drupal)
    $tree = menu_tree_all_data('menu-products', NULL);
    //нам придется вручную отметить active_trail в нашем меню    
    _MyModule_restore_path($tree);
    //все готово! формируем стандартный html код меню
    $menu_output = menu_tree_output($tree);
    return array('content' => $menu_output, 'subject' => '');
}

/* надо восстановить активный путь active-trail 
   рекурсивно проходим меню, отмечая текущий путь
*/
function _MyModule_restore_path(&$tree) {
    foreach ($tree as &$v) {
        if ($v['link']['href'] == $_GET['q']) {
            $v['link']['in_active_trail'] = 1;
            return true;
        }
        if (is_array($v['below']) && _MyModule_restore_path($v['below'])) {
            $v['link']['in_active_trail'] = 1;
            return true;
        }
    }

    return false;
}

function MyModule_block($op = 'list', $delta = 0, $edit = array()) {

switch ($op) {

case 'list':

//объявление списка блоков

//я назвал его - меню продукции и запретил его кеширование

$block = array();

$block[0]["info"] = t('SC: Меню продукции');

$block[0]['cache'] = BLOCK_NO_CACHE;

return $block;

case 'view':

switch ($delta) {

//обработчики блоков

case 0:

return _MyModule_productmenu();

}

/* товарное меню со сладингом */

function _MyModule_productmenu() {

//получим все дерево меню продукции (а не её активную ветку,

//как сделано в аналогичном блоке ядра drupal)

$tree = menu_tree_all_data('menu-products', NULL);

//нам придется вручную отметить active_trail в нашем меню

_MyModule_restore_path($tree);

//все готово! формируем стандартный html код меню

$menu_output = menu_tree_output($tree);

return array('content' => $menu_output, 'subject' => '');

}

/* надо восстановить активный путь active-trail

рекурсивно проходим меню, отмечая текущий путь

function _MyModule_restore_path(&$tree) {

foreach ($tree as &$v) {

if ($v['link']['href'] == $_GET['q']) {

$v['link']['in_active_trail'] = 1;

return true;

}

if (is_array($v['below']) && _MyModule_restore_path($v['below'])) {

$v['link']['in_active_trail'] = 1;

return true;

}

return false;

}

Следующий этап — вспомогательная функция на javascript (+ jQuery)

Без jQuery сейчас вообще никуда. Раньше приходилось городить страшный огород из кросс-браузерных скриптов, а сейчас весь этот огород давно перепахан и засеян. Просто хеппи-мил какой то.

Логика работы меню такая : по клику на элемент меню, мы должны переходить на соответствующую публикацию сайта, поэтому для того чтобы развернуть меню — нам остается только одно событие — наведение мыши (hover). Но если провести мышью над всем меню, то все пункты должны будут развернуться, а это не то, что нам нужно. Поэтому разворачивать меню мы будем с задержкой, давая пользователю возможность «навести» мышь на нужный пункт меню.

    $(window).load(function() {
//цепляем обработчики hover после загрузки документа в браузер  
//к стандартным классам блочного меню (вы можете добавить
//свои фильтры, например, ID контейнера блока меню)
        $(".block-menu li.expanded").hover(
            function () {
                var popup = $(this).children("ul.menu");
                //создаем отложенную анимацию (отложенную на 0,650 с)
                intervalID = setTimeout(
                    function() {
                        popup.slideDown(1000);    
                    },
                    650
                )
            },
            //вторая часть hover - мышь покинула границы контейнера -
            //отложенную анимацию следует отменить
            function () {
                clearInterval(intervalID);
            }
        );

    });

$(window).load(function() {

//цепляем обработчики hover после загрузки документа в браузер

//к стандартным классам блочного меню (вы можете добавить

//свои фильтры, например, ID контейнера блока меню)

$(".block-menu li.expanded").hover(

function () {

var popup = $(this).children("ul.menu");

//создаем отложенную анимацию (отложенную на 0,650 с)

intervalID = setTimeout(

function() {

popup.slideDown(1000);

650

)

//вторая часть hover - мышь покинула границы контейнера -

//отложенную анимацию следует отменить

function () {

clearInterval(intervalID);

}

);

});

На этом заканчивается код на javascript.

И ещё каплю CSS.

Чтобы вы там не писали для оформления меню, вам придется добавить примерно такие стили:

.block-menu li.expanded ul {
    display: none;
}
.block-menu li.expanded.active-trail > ul {
    display: block;
}

.block-menu li.expanded ul {

display: none;

}

.block-menu li.expanded.active-trail > ul {

display: block;

}

Т.е. надо показать активную ветку и закрыть все прочие.

И это все! Никаких танцев с бубном, друзья. :)

Написать комментарий

Данная запись опубликована в 07.09.2013 11:38 и размещена в рубрике Drupal, jQuery, PHP. Вы можете перейти в конец страницы и оставить ваш комментарий.

Мало букафф? Читайте есчо !

Подключаем suggestions list в диалог CKeditor - Link

Август 10, 2021 г.

Link - это штатный диалог, который используется в CKeditor для редактирования ссылок. И выглядит он как показано на картинке сверху. Он хорошо выполняет ...

Читать

Редирект после отправки формы в Drupal 8/9

Январь 22, 2022 г.

Для семерки можете посмотреть другую статью. Обычно правят поведение существующих форм через hook_form_alter, добавляя туда еще один обработчик submit. Специальный метод setRedirectUrl объекта FormStateInterface позволяет настроить адрес перенаправления. ...

Читать

Рендер произвольного блока в Drupal 11

Март 13, 2025 г.

Если не хочется объявлять дополнительный регион, чтобы настроить вывод блока через админку, то можно сделать рендер блока программно. Например добавим в препроцессинг страницы переменную с рендером блока branding. Этот блок предоставляется модулем ...

Читать

Вывод видео блока, используя форматтер модуля media_youtube

Май 18, 2017 г.

Ситуация, когда вы используете поле типа "Multimedia asset", создаваемое модулями media + media_youtube, и сохранили там ссылку на какое то видео с Youtube ...

Читать

Комментарии к «Раздвигающееся вертикальное меню Drupal 6»

Понравилась статья? Есть вопросы? - пишите в комментариях.

Имя (обязательно)	Е-майл (не будет опубликован на сайте, обязательно для заполнения)
Комментарий: