在 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。

謝謝閱讀！