Создайте мегаменю с помощью Ultimenu и Bootstrap в Drupal 8

Опубликовано: 2022-02-16

Один из наших клиентов спросил, как создать мегаменю в Drupal 8.

Мегаменю — это меню с многоколоночной навигацией. Они быстро становятся тенденцией в веб-дизайне.

Модуль Ultimenu позволяет вставлять блоки Drupal в меню. Вы можете легко использовать его для создания довольно сложных макетов меню.

В этом уроке вы узнаете, как создать простое мегаменю с помощью модуля Ultimenu и Bootstrap.

Заказчик хотел создать мега-меню, подобное изображенному на изображении ниже:

Раскрывающиеся списки мегаменю должны иметь ширину 100%. Их содержимое должно быть блоками Drupal.

Подход Ультимену

Модуль Ultimenu создает блок для каждого меню, которое вы добавляете на странице меню вашей установки Drupal (admin/structure/menu).

Вы можете разместить этот блок на экране макета блока, как и любой другой блок. Модуль превращает пункты меню в динамические области на странице макета блока.

Таким образом, вы можете вставлять блоки (пользовательские блоки, представления и т. д.) в эти области.

Блок, содержащий регионы, содержащие блоки:

Шаг 1. Установите модуль

Установите модуль с композитором:

composer require drupal/ultimenu

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

Шаг 2. Создать меню

Щелкните Структура > Меню .
Найдите главную навигацию
Щелкните меню «Правка» .

Нажмите кнопку Добавить ссылку
Добавьте пункты меню первого уровня:

Ссылка Travel указывает на route:<nolink> . Этот родительский элемент предназначен только для того, чтобы содержать другие элементы:

Шаг 3. Настройте блок Ultimenu

Щелкните Структура > Ultimenu .
Tab выберите Основная навигация в вертикальных блоках Ultimenu.
Нажмите Сохранить конфигурацию :

Щелкните Регионы Ultimenu.
Выберите Ultimenu:main: Путешествия

Ultimenu создаст этот регион динамически на странице макета блока , чтобы вы могли размещать в нем блоки.

Нажмите Сохранить конфигурацию :

На вкладке «Полезности Ultimenu » есть дополнительные параметры конфигурации. Я не собираюсь проверять ни один из этих вариантов. Пожалуйста, прочитайте документацию модуля, чтобы понять, как работают эти опции, особенно если вы создаете многоязычный сайт.

Шаг №4. Блок изображения

Чтобы поместить изображение в блок, вам необходимо создать пользовательский тип блока с полем « Изображение ».

Щелкните Структура > Компоновка блоков > Библиотека пользовательских блоков > Типы блоков .
Нажмите кнопку Добавить пользовательский тип блока :

Дайте типу блока правильное имя.
Нажмите Сохранить:

Щелкните Управление полями.
Удалите поле Тело .
Щелкните Добавить поле.
Добавьте поле Изображение .
Сохраните его со значениями по умолчанию.
Щелкните Управление отображением.
Скрыть метку блока :

Нажмите «Структура» > «Макет блока» > «Библиотека пользовательских блоков» > «Добавить пользовательский блок» :

Нажмите «Блокировать с изображением» :

Загрузите изображение.
Нажмите Сохранить:

Шаг № 5. Блок ссылок

Есть много способов получить блок со ссылками в четыре столбца, например с помощью Views.

В этом уроке я работаю с подтемой Bootstrap. Я собираюсь использовать базовый блок с разметкой и классами Bootstrap.

Ознакомьтесь с этим руководством, чтобы узнать, как создать подтему Bootstrap в Drupal.

Нажмите Добавить пользовательский блок еще раз.
На этот раз выберите базовый блок .
Дайте блоку правильное имя.
Выберите Full HTML в качестве текстового формата в редакторе.
Нажмите кнопку Источник .
Вставьте следующий код в окно редактора:

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

Щелкните Сохранить.

Шаг №6. Поместите блок Ultimenu

Щелкните Структура > Макет блока .
Отключите основной блок навигации по умолчанию.
Поместите Ultimenu: Основная навигация в область Навигация (складная).
Снимите флажок Отображать заголовок .
Нажмите Сохранить блок .

Шаг №7. Разместите блоки в области «Путешествие».

Прокрутите вниз до нижней части страницы.

Вы увидите динамически сгенерированный регион, который вы назначили при настройке Ultimenu.

Щелкните Разместить блок :

Поместите пользовательский блок изображения в эту область.
Снимите флажок Показать заголовок.
Нажмите Сохранить блок.
Повторите процесс с блоком разметки Bootstrap :

При необходимости измените порядок блоков.
Нажмите Сохранить блоки :

Теперь перейдите на главную страницу вашего сайта и взгляните на меню. Требуется пара настроек CSS.

Шаг №8. CSS

По умолчанию файл библиотек вашей подтемы указывает на файл style.css внутри папки css/ внутри вашей подтемы Bootstrap.

Добавьте в этот файл следующий код:

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

К настоящему времени вы уже должны были заметить, как настроить меню самостоятельно:

Резюме

Вы только что узнали, как создавать мегаменю в Drupal, используя модуль Ultimenu, Bootstrap и простой для понимания подход «блок Drupal».

Спасибо за чтение!