Навешиваю функционал Nice Menu на Menu Block

Изобрёл способ заставить меню, сделанное модулем menu_block вести себя как меню из nice_menus с помощью jQuery.

Для этого в в шаблоне page.tpl.php своей темы пишу следующий код:

$(document).ready(function(){
    $(".menu-block-1 ul").removeClass('menu');
    $(".menu-block-1").find('a').removeClass('expanded');
    $(".menu-block-1").find('a').removeClass('leaf');
    $(".menu-block-1").find('li').removeClass('leaf');
    $(".menu-block-1").find('li').removeClass('expanded');
    $(".menu-block-1 ul").addClass('nice-menu-down');
    $(".menu-block-1 ul").addClass('nice-menu');
    $(".menu-block-1 ul li:has(ul)").addClass('menuparent');
});

А теперь кратенько, как это работает:

1. Избавляюсь в пределах блока своего меню (с классом menu-block-1) от классов, присущих обычному меню. Это позволит не парится с css дважды и будут использованы стили от nice menus:

$(".menu-block-1 ul").removeClass('menu'); - убрать класс menu с корневого элемента меню
$(".menu-block-1").find('a').removeClass('expanded'); - почистить ссылки от паразитных классов
$(".menu-block-1").find('a').removeClass('leaf'); - почистить ссылки от паразитных классов
$(".menu-block-1").find('li').removeClass('leaf'); - почистить списки от присущих меню классов
$(".menu-block-1").find('li').removeClass('expanded'); - почистить списки от присущих меню классов

2. Следом добавляю на свежепочищенный список menu block классы от nice menus:

$(".menu-block-1 ul").addClass('nice-menu-down'); - говорю что меню выпадающее вниз
$(".menu-block-1 ul").addClass('nice-menu'); - и что оно теперь nice menu
$(".menu-block-1 ul li:has(ul)").addClass('menuparent'); - для списков, которые должны раскрываться (содержат внутри ещё список) назначаю соответствующий класс.

3. Готово.

Естественно это решение работает только для посетителей, у которых включен JavaScript. Но поскольку клиенты без оного явные извращенцы, то их тупо игнорирую. А поисковикам пока глубоко фиолетово какой класс назначен на меню.

Работа над ошибками.

Для красоты решение стоит вынести в отдельный JavaScript-файл и подключить его к теме методом drupal_add_js(drupal_get_path('theme', 'YOUR_THEME_NAME') . '/YOUR_FILE_NAME.js', 'theme');

Тэги:

Обсуждение: