Drupal8でUltimenuとBootstrapを使用してメガメニューを作成する

公開: 2022-02-16

お客様の1人が、Drupal8でメガメニューを作成する方法を尋ねました。

メガメニューは、複数列のナビゲーションを備えたメニューです。 それらは急速にウェブデザインのトレンドになりつつあります。

Ultimenuモジュールを使用すると、Drupalブロックをメニューに挿入できます。 これを使用して、かなり複雑なメニューレイアウトを簡単に作成できます。

このチュートリアルでは、UltimenuモジュールとBootstrapを使用して簡単なメガメニューを作成する方法を学習します。

顧客は、下の画像のようなメガメニューを作成することを目指していました。

01

メガメニューのドロップダウンの幅は100％である必要があります。 それらのコンテンツはDrupalブロックでなければなりません。

ウルティメヌアプローチ

Ultimenuモジュールは、Drupalインストールのメニューページ（admin / structure / menu）に追加したメニューごとにブロックを生成します。

このブロックは、他のブロックと同じようにブロックレイアウト画面に配置できます。 モジュールは、ブロックレイアウトページでメニュー項目を動的領域に変換します。

このようにして、これらの領域にブロック（カスタムブロック、ビューなど）を挿入できます。

ブロックを含む領域を含むブロック：

02

ステップ1。 モジュールをインストールします

  • Composerを使用してモジュールをインストールします。

composer require drupal/ultimenu

  • ダウンロード後、[拡張]をクリックしてモジュールを有効にします。 これ以上の依存関係は必要ありません。

03

ステップ2。 メニューを作成する

  • [構造]> [メニュー]をクリックします。
  • メインナビゲーションを探す
  • [編集]メニューをクリックします。

04

  • [リンクを追加]ボタンをクリックします
  • 第1レベルのメニュー項目を追加します。

05

旅行リンクはroute:<nolink> 。 この親要素は、他の要素を含むためだけにあります。

06

ステップ3。 Ultimenuブロックを構成する

  • [構造]> [Ultimenu]をクリックします。
  • タブは、垂直Ultimenuブロックのメインナビゲーションを選択します
  • [構成の保存]をクリックします。

07

  • Ultimenuリージョンをクリックします。
  • Ultimenu：main：Travelを選択します

Ultimenuは、この領域を[ブロックレイアウト]ページに動的に作成するため、ブロックを配置できます。

  • [構成の保存]をクリックします。

08

Ultimenu goodiesタブには、追加の構成オプションがあります。 これらのオプションはチェックしません。 特に多言語サイトを構築している場合は、モジュールのドキュメントを読んで、これらのオプションがどのように機能するかを理解してください。

ステップ4。 イメージブロック

ブロックに画像を配置するには、[画像]フィールドを使用してカスタムブロックタイプを作成する必要があります。

  • [構造]> [ブロックレイアウト]> [カスタムブロックライブラリ]> [ブロックタイプ]をクリックします。
  • [カスタムブロックタイプの追加]ボタンをクリックします。

09

  • ブロックタイプに適切な名前を付けます。
  • [保存]をクリックします。

10

  • [フィールドの管理]をクリックします。
  • Bodyフィールドを削除します。
  • [フィールドの追加]をクリックします。
  • 画像フィールドを追加します。
  • デフォルトで保存します。
  • [表示の管理]をクリックします。
  • ブロックラベルを非表示にします。

11

  • [構造]> [ブロックレイアウト]> [カスタムブロックライブラリ]> [カスタムブロックの追加]をクリックします。

12

  • [画像でブロック]をクリックします：

13

  • 画像をアップロードします。
  • [保存]をクリックします。

14

ステップ5。 リンクブロック

ビューなど、4列のリンクを持つブロックを取得する方法はたくさんあります。

このチュートリアルでは、ブートストラップサブテーマを使用しています。 Bootstrapマークアップとクラスで基本ブロックを使用します。

Drupalでブートストラップサブテーマを作成する方法を学ぶために、このチュートリアルをチェックしてください。

  • もう一度[カスタムブロックを追加]をクリックします。
  • 今回は基本ブロックを選択します。
  • ブロックに適切な名前を付けます。
  • エディタでテキスト形式として[フル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 （折りたたみ可能）領域に配置します。
  • [タイトルを表示]のチェックを外します。
  • [ブロックを保存]をクリックします。

16

ステップ7。 「旅行」リージョンにブロックを配置します

  • ページの一番下までスクロールします。

Ultimenuを構成するときに割り当てた動的に生成されたリージョンが表示されます。

  • [ブロックを配置]をクリックします。

17

  • この領域に画像カスタムブロックを配置します。
  • [タイトルを表示]のチェックを外します。
  • [ブロックを保存]をクリックします。
  • Bootstrapマークアップブロックを使用してプロセスを繰り返します。

18

  • 必要に応じて、ブロックの順序を並べ替えます。
  • [ブロックの保存]をクリックします。

19

次に、サイトのフロントページに移動して、メニューを確認します。 CSSの微調整がいくつか必要です。

ステップ8。 CSS

デフォルトでは、サブテーマのライブラリファイルは、ブートストラップサブテーマ内の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でメガメニューを構築する方法を学びました。

読んでくれてありがとう！