在 Drupal 8 中使用 Ultimenu 和 Bootstrap 构建超级菜单

已发表: 2022-02-16

我们的一位客户询问如何在 Drupal 8 中构建大型菜单。

超级菜单是具有多列导航的菜单。 它们正迅速成为网页设计的一种趋势。

Ultimenu 模块允许您将 Drupal 块插入菜单。 您可以轻松地使用它来构建相当复杂的菜单布局。

在本教程中，您将学习如何使用 Ultimenu 模块和 Bootstrap 构建一个简单的大型菜单。

客户的目标是构建一个类似于下图所示的大型菜单：

01

大型菜单下拉菜单应具有 100% 的宽度。 它们的内容必须是 Drupal 块。

Ultimenu 方法

Ultimenu 模块为您添加到 Drupal 安装的菜单页面（管理员/结构/菜单）中的每个菜单生成一个块。

您可以像任何其他块一样将此块放置在块布局屏幕中。 该模块将菜单项转换为块布局页面中的动态区域。

这样您就可以将块（自定义块、视图等）插入这些区域。

包含包含块的区域的块：

02

步骤1。 安装模块

  • 使用composer 安装模块：

composer require drupal/ultimenu

  • 下载后，点击扩展并启用模块。 不需要进一步的依赖：

03

第2步。 创建菜单

  • 单击结构 > 菜单。
  • 寻找主导航
  • 单击编辑菜单。

04

  • 单击添加链接按钮
  • 添加一级菜单项：

05

Travel链接指向route:<nolink> 。 此父元素仅用于包含其他元素：

06

步骤#3。 配置 Ultimenu 块

  • 单击结构 > Ultimenu 。
  • 选项卡选择垂直 Ultimenu 块中的主导航
  • 点击保存配置：

07

  • 单击Ultimenu 区域。
  • 选择Ultimenu:main: Travel

Ultimenu 将在Block Layout页面中动态创建该区域，以便您可以在其中放置块。

  • 点击保存配置：

08

Ultimenu好东西选项卡具有其他配置选项。 我不会检查这些选项中的任何一个。 请阅读模块的文档以了解这些选项的工作原理，尤其是在您构建多语言站点时。

步骤4。 图像块

为了将图像放置在块中，您需要使用Image字段创建自定义块类型。

  • 单击结构 > 块布局 > 自定义块库 > 块类型。
  • 单击添加自定义块类型按钮：

09

  • 给块类型一个合适的名称。
  • 点击保存：

10

  • 单击管理字段。
  • 删除正文字段。
  • 单击添加字段。
  • 添加图像字段。
  • 使用默认值保存它。
  • 单击管理显示。
  • 隐藏块标签：

11

  • 单击结构 > 块布局 > 自定义块库 > 添加自定义块：

12

  • 单击带有图像的块：

13

  • 上传一张图片。
  • 点击保存：

14

步骤#5。 链接块

有很多方法可以获取包含四列链接的块，例如使用视图。

在本教程中，我正在使用 Bootstrap 子主题。 我将使用带有 Bootstrap 标记和类的基本块。

查看本教程以了解如何在 Drupal 中创建 Bootstrap 子主题。

  • 再次单击添加自定义块。
  • 这次选择基本块。
  • 给块起一个正确的名称。
  • 在编辑器中选择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>

  • 单击保存。

15

步骤#6。 放置 Ultimenu 块

  • 单击结构 > 块布局。
  • 禁用默认的主导航块。
  • 将Ultimenu: Main navigation放置在Navigation （可折叠）区域中。
  • 取消选中显示标题。
  • 单击保存块。

16

步骤#7。 将积木放在“旅行”区域

  • 向下滚动到页面底部。

您将看到在配置 Ultimenu 时分配的动态生成区域。

  • 单击放置块：

17

  • 将图像自定义块放置在该区域中。
  • 取消选中显示标题。
  • 单击保存块。
  • 使用Bootstrap 标记块重复该过程：

18

  • 如果需要，重新排列块的顺序。
  • 点击保存块：

19

现在转到您网站的首页并查看菜单。 需要进行一些 CSS 调整。

步骤#8。 CSS

默认情况下，子主题的库文件指向 Bootstrap 子主题内 css/ 文件夹中的 style.css 文件。

  • 将以下代码添加到该文件：

 /* 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; }

到目前为止，您应该已经注意到如何自己调整菜单：

20

概括

您刚刚学习了如何使用 Ultimenu 模块、Bootstrap 和易于理解的“Drupal 块”方法在 Drupal 中构建 megamenus。

谢谢阅读！