Diviテーマのメガメニューにハンバーガーのアイコンを追加する

Last Updated：2023年7月16日| | 5のコメント

ウェブサイトでは、主に携帯電話のメニューに使用されるXNUMX行の形のアイコンをハンバーガー（Hamburger）アイコンと呼びます。 エレガント ThemesのDiviテーマでは、モバイルでメニューメニューを切り替えるときにこのハンバーガーアイコンが使用されます。 そして、「slide in」、「fullscreen」などのいくつかのヘッダースタイルにも使用されます。

ハンバーガーのアイコンを適用前と適用後の比較

基本的にはメガメニュー（Mega Menu）は、メイン上位（親）メニューのリンクにマウスを置くと、動作します。

Diviテーマメガメニュー

この記事で説明する新しいデザインと機能を実装した後は、ハンバーガーの形のアイコンをクリックするときにのみメガメニューが表示されます。

Diviテーマのメガメニュー

Diviメガメニューにハンバーガーのアイコンを追加する方法

メニューをメガメニューに変更する

まず、メガメニューを作成するか、現在のメニューをメガメニューに置き換える必要があります。 」エレガント ThemesのDiviでメガメニューを作る記事に記載されているように、簡単にメガメニューを作成したり、既存のメニューをメガメニューに切り替えたりすることができます。

WordPress ダッシュボードで、外観>メニューに移動し、[新しいメニューを作成します]（Create a new menu）をクリックして新しいメニューを作成します。

WordPress Diviテーマでメニューを作成する

一番右にある」メニューの作成「」をクリックしてメニューを作成します。

そしてCSSクラスのメニュープロパティを利用できるようにメニュー画面の右上にある」画面のオプション「をクリックして CSSクラスをチェックするようにします。

WordPress メニューからCSSクラスを有効にする

新しく作成されたメニューにメニュー項目を追加することができます。

まず、ハンバーガーのアイコンとして機能するメニュー項目を追加するようにします。 このメニュー項目は、残りのすべてのメニュー項目の上位項目になります。

ユーザー定義のリンク（Custom Links）をクリックして、次のように設定します。

URL：http：//＃
ナビゲーションラベル：
CSSクラス（CSS Classes）：mega-menu

次の図を参照してみてください。

エレガント Themes Diviテーマメガメニュー

今メガメニューを構成するメニュー項目を追加するようにします。

次の図のようにMega Menu Hamburger Icon Linkを一番上位に位置させ、残りのメニューを適切に構成します。

Diviメガメニュー

メニューの設定が完了したら、メニュー設定で「メインメニュー「を確認してください。

メニューを保存します。

ハーバー（Hover）の代わりにクリック時のメニューを表示するようにjQueryを追加する

今メガメニューが生成されたので、マウスを上げるとき、メニューを表示する代わりに、アイコンをクリックしたときにメガメニューを表示するようにjQueryを追加する必要があります。

Divi>テーマオプション（Theme Options) > 統合(Integration)に移動し、 あなたのブログの<head>にコードを追加する（Add code to the head of your blog) セクションには、以下のjQueryコードをコピーして貼り付けます。

<script>
/*** Open menu items with children on click not hover ***/
/*** 마우스 허버가 아닌 클릭할 때 하위 메뉴 항목 열기 ***/

(function($) {

jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();

jQuery(this).parent().toggleClass('show-submenu');
});
});

jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});

})(jQuery);
</script>

カスタムCSSを追加する

テーマオプションの 一般（General） 設定では、次のカスタムCSSを ユーザーカスタムCSS セクションに追加します。

/*** hides sub-menu on hover ***/
/*** 허버 시 하위 메뉴 숨기기 ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }

/*** shows submenu on click ***/
/*** 클릭 시 하위 메뉴 표시 ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }

/*** Hide hamburger menu item on mobile ***/
/*** 모바일에서 햄버거 메뉴 항목 숨기기 ***/
.et_mobile_menu .mega-menu >
a{display:none;}


#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}

/**** hide down arrow ****/
/*** 아래 화살표 숨기기 ***/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}

/*** show hamburger icon ***/
/*** 햄버거 아이콘 표시 ***/
.hamburger:before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 0.6em;
text-transform: none;
speak: none;
position: relative;
cursor: pointer;
top: 0;
left: 0;
vertical-align: -11px;
padding-right: 3px;
font-size: 32px; /*change size of icon here*/
content: "\61"; /*change icon here*/
color: #333; /*change color of icon here*/
}

/*** displays the "x" close icon ***/
/*** "x" 닫기 아이콘 표시 ***/
.show-submenu .hamburger:before {
content: "\4d"; /*change x icon here*/
}

これで完了しました。

今の結果を確認してみると、次のように動作します。

WordPress Diviテーマメガメニュー

追加のカスタマイズオプション

上記のCSSコードにコメントがあるので、ハンバーガーのアイコンのスタイルを変更することができます。 下に表示された二つの部分のCSSスタイルを必要に応じて変更してください。

Diviテーマのメガメニューにハンバーガーのアイコンを追加する2

ハンバーガーのアイコンを変更する

Diviは、さまざまなフォント、アイコンを使用できるように提供しています。 必要に応じてハンバーガーのアイコンを別のスタイルのアイコンに変更することができます。 上記のコードでは、次の部分の数値を変更します。

コンテンツ： "\ 61"; / * change icon here * /

"\ 61" 部分を下の適切なコードに変更します。

Diviアイコン

「x」アイコンを変更する

ハンバーガーメニューアイコンを変更する場合は、変更したデザインに合わせて「x」アイコンを変更する必要があります。「x」アイコンを表示するコードは次のとおりです。

/*** displays the "x" close icon ***/
.show-submenu .hamburger：before {
コンテンツ： "\4d";
}

"\4d" 部分を次のいずれかの値に変更します。

Diviメガメニューを閉じるアイコン

黒円形のアイコンに変更する次のように動作します。

Divi Mega Menu

ハンバーガーのアイコンの色を変更する

必要に応じてハンバーガーのアイコンの色を変更することができます。 この場合、 「change icon color "（アイコンの色を変更）とされている行を編集します。

Color: #333; /*change icon color here*/

ハンバーガーのアイコンのサイズを変更する

アイコンのサイズを変更するには 「change icon size here」（ここでアイコンのサイズを変更）とされている行を変更します。

Font-size: 32px; /*change size of icon here*/

ハンバーガーのアイコンにラベルを追加する

アイコンにラベルを簡単に追加できます。 外観 > メニューに移動し、「メガメニュー」クラスを追加したトップレベルのメニュー項目を編集し、div内にラベルフレーズを追加します。

<div class=”hamburger”>menu</div>

これにより、次のようにアイコンの横にラベルが表示されます。

エレガント ThemesのDiviメガメニュー

反応型（Responsiveness）

メガメニューは980pxよりも広い画面でのみ動作します。 980px未満の画面（タブレットやスマートフォン）では、メニューがメインのモバイルメニューに切り替えます。

Divi基本モバイルメニュー

最後に、

ヘッダーにすっきりシンプルなメガメニューをご希望の場合、優れたソリューションのいずれかのハンバーガーのアイコンを追加することができます。

そしてDiviの内蔵フォントアイコンを使用して簡単にハンバーガーのアイコンをカスタマイズすることができます。

さらに、次の図のようにメガメニューに画像を追加して、もっと素敵なメガメニューを作成することもできます。

Diviメガメニュー
機会になるDiviメガメニューにアイコンを追加する方法について見てみましょう。

メモ：

5のコメント

コメント

  1. いつものお手伝いをいただいております。
    ディビテーマでメガメニューを作成し、メガメニューに画像を入れる方法を知りたいです。 ありがとうございます。

    応答

  2. diviテーマで、デスクトップ画面では、基本的なヘッダーを使用して、モバイルでなぜそのようなジーン分からないボタンを押すと、イーグルのようにドロップダウンされているメニューが使用されます。 ところが、ヘッダが透明に白い文とモバイルでよく見えないのに、携帯電話だけでフォームをスライドインで変えたり、降りてくるメニューのバックグラウンドだけ色を変更順でしょうか？

    応答

    • こんにちは、ジャンジェホ様。

      CSSでメニューのバックグラウンドカラーを調整試みることができるようになります。

      応答