1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Выдвигающиеся меню. Готовый модуль или самописное решение

Главные вкладки

Аватар пользователя vert4 vert4 5 февраля 2018 в 12:15

День добрый!

Стоит задача сделать выдвигающиеся меню. Большое меню с множеством ссылок. По умолчанию выводится несколько ссылок 10-15 и триггер "Все услуги" при нажатии выдвигается панель со всеми ссылками меню (оставшемся ссылками меню). Триггер перемещается вниз и меняется на "Закрыть" по клику выпадающая панель закрывается, остаются только первые пункты.

Пробовал menu-minipanels, но там эффект не тот- выводит все ссылки меню по ховер или клику во всплывайке. Попробовал DHTML меню. Тут эффект ближе всего получается, но поведение триггера не смог реализовать. Просто вывел пункт меню "Все услуги" как родителя всех остальных ссылок. По клику открывает пункты меню, но "Все услуги" остаются в составе списка ссылок и вниз переместить не знаю как.
Пример того, что хочется получить https://www.bspb.ru Здесь вот меню услуг такое какое нужно.

Собственно вопрос. Есть ли готовый модуль? Или нужно самописным творчеством заниматься?

Спасибо.

Лучший ответ

Аватар пользователя adano adano 6 февраля 2018 в 6:08
1
(function ($) {Drupal.behaviors.myMenu = {attach: function(context, settings) {
  $('ul.menu', context).click(function() {
    $(this).addClass('focus');
  });
}}})(jQuery);

Только клик не по менюшке должен быть, а по ссылке. Если брать сайт-пример.

Комментарии

Аватар пользователя vert4 vert4 5 февраля 2018 в 14:46

VasyOK wrote:

2) сделать анимацию выезда. Скорей всего через https://jqueryui.com/accordion/

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

Аватар пользователя adano adano 5 февраля 2018 в 14:59

vert4 wrote:

Или нужно самописным творчеством заниматься?

Чего тут заниматься?
Показать-скрыть ul по клику + анимация на height.

Аватар пользователя vert4 vert4 6 февраля 2018 в 3:14

adano wrote:

Показать-скрыть ul по клику

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

$(document).ready( function() {
$('ul.menu').click(function(){
        $('ul.menu').addClass('focus');
       
        }
                     );  
                }
            );
Аватар пользователя adano adano 6 февраля 2018 в 6:08
1
(function ($) {Drupal.behaviors.myMenu = {attach: function(context, settings) {
  $('ul.menu', context).click(function() {
    $(this).addClass('focus');
  });
}}})(jQuery);

Только клик не по менюшке должен быть, а по ссылке. Если брать сайт-пример.

Аватар пользователя VasyOK VasyOK 6 февраля 2018 в 4:22

https://jsfiddle.net/PlayboyZP/wrvh72c0/ Код открыть/раскрыть такой.
В тему оформления js файл можете подключить?

Еще нужно подключить виджет аккоордеон и желательно убрать лишний CSS от jQuery
template.php:

<?php
drupal_add_library('system', 'ui.accordion');

function 

themename_css_alter(&$css) {  
  unset($css['misc/ui/jquery.ui.core.css']);
  unset($css['misc/ui/jquery.ui.theme.css']);
}?>

Инструкции тут http://drupalbook.ru/drupal/drupal-i-jquery-urok-1-podklyuchaem-fayl-s-j...

Аватар пользователя vert4 vert4 6 февраля 2018 в 9:28

Ваше решение имеет место быть и да же воспользуюсь наверное для кнопки закрыть.
Но как я говорю, что триггер в аккордеоне остается вверху, так и у меня и реализовано через DHTML menu Кнопка "Все услуги" остается вверху, а панель выпадает вниз под кнопку. А нужно, что бы триггер Закрыть появлялся внизу, как у Вас, панельки с меню, а сверху было пусто. http://prntscr.com/iaqgou
В Вашем примере http://prntscr.com/iaqhzs верхняя кнопка остается с ней нужно, что-то делать ))
Поэтому более верное решение предлагает Adano навешивать скрыть показать на кнопку Все услуги.
Спасибо за помощь. Кнопка закрыть мне понадобится ))

Аватар пользователя VasyOK VasyOK 6 февраля 2018 в 14:37
1

Кнопка закрыть к аккордеону привзяана. Adano вам по другому советует.
Чтобы "сверху было пусто"
когда аккордион открывается, у него соотв. CSS класс появляется
и display: none на заголовок

Аватар пользователя vert4 vert4 6 февраля 2018 в 14:41

Да Ваше решение вполне рабочее. Но у меня уже было заведено меню выпадающее на dhtml menu переделывать под вывод аккордеоном было бы более по времени затратно.

Аватар пользователя ХулиGUN ХулиGUN 6 февраля 2018 в 16:26

Минус в том, что анимашку на height: auto не повесишь. Т.е. анимация для неизвестного количества элементов не получится таким образом. Если же известно на сколько раскрывать, то вот

Аватар пользователя vert4 vert4 6 февраля 2018 в 16:35

в моем случае, поставил для кнопки открыть (тык) height:100% и очень хорошо ведет себя ярлычок открыть закрыть снизу прибивается к открывающемуся блоку с меню. Но я юзал dhtml menu и вешал java поведение на родительский пункт меню. Менял ему класс, а на новый класс - новые свойства. Но Ваш пример я скопировал к себе. Пригодится. Хорошее решение.