Меняем поведение корневого пункта меню bootstrap dropdown

В bootstrap корневой пункт меню с подпунктами (dropdown menu) не является активной ссылкой и лишь служит кнопкой для развертывания подпунктов. Тем временем в CMS Drupal пункты меню в любом случае ассоциированы с некоторым URL, но корневой элемент не выполняют свою роль, т.к. ссылка не работает.

К примеру, мы хотим сделать навигацию, когда корневой пункт ведет на страницу с общим списком элементов (новостей, товаров и т.п.), а подпункты этого меню — это частные рубрики общего списка.

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

На скриншоте выше — пример такого решения, когда ‘view all’ показывает все локации, а другие подпункты — ведут на страницу определенной локации, при этом кнопка ‘Locations’ не работает как ссылка.

Еще одно решение, спорное с точки зрения UI, но к которому всё же прибегают — это добавление реакции на повторное нажатие на корневой пункт меню. Т.е. логика следующая — пользователь нажимает первый раз на корневой пункт — меню показывает подпункты. При попытке закрыть меню (повторном нажатии) выполняется переход на страницу данного пункта корневого меню.

Реализуется (в Drupal 7) это следующим js кодом:

Проверяется, в частности, что меню раскрыто $el.hasClass('open') и что задана ссылка; тогда в location документа передаётся новое значение URL.

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

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

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

Шпаргалка по размеру сетки bootstrap v3 и v4

Апрель 6, 2019 г.

Для тех кто использует с 3ю и 4ю версии бутстрапа и постоянно забывает размеры сетки (grid). Здесь приведены таблицы для сетки по-умолчанию (в общем ...

Читать

 

Комментарии к «Меняем поведение корневого пункта меню bootstrap dropdown»

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



Комментарий: