ウェブサイトでは、主に携帯電話のメニューに使用されるXNUMX行の形のアイコンをハンバーガー（Hamburger）アイコンと呼びます。 エレガント ThemesのDiviテーマでは、モバイルでのメニューのメニューを切り替えたときに、このハンバーガーのアイコンが使用されます。 そして「slide in "、" fullscreen "のようないくつかのヘッダのスタイルにも使用されます。
ハンバーガーのアイコンを適用前と適用後の比較
基本的にはメガメニュー（Mega Menu）は、メイン上位（親）メニューのリンクにマウスを置くと、動作します。
この記事で説明する新しいデザインと機能を実装した後は、ハンバーガーの形のアイコンをクリックするときにのみメガメニューが表示されます。
Diviメガメニューにハンバーガーのアイコンを追加する方法
メニューをメガメニューに変更する
まず、メガメニューを作成したり、現在のメニューをメガメニューに置き換える必要があります。 "エレガント ThemesのDiviでメガメニューを作る"文に記載されているように、簡単にメガメニューを作成したり、既存のメニューをメガメニューに切り替えることができます。
WordPress ダッシュボードで、外観>メニューに移動し、「新しいメニューを作成してください」（Create a new menu）をクリックして、新しいメニューを作成します。
右端にある「メニューの作成"をクリックしてメニューを作成します。
そしてCSSクラス]メニューのプロパティを利用できるように、メニュー画面の右上にある「画面のオプション"をクリックして、 CSSクラスをチェックするようにします。
新しく作成されたメニューにメニュー項目を追加することができます。
まず、ハンバーガーのアイコンとして機能するメニュー項目を追加するようにします。 このメニュー項目は、残りのすべてのメニュー項目の上位項目になります。
ユーザー定義のリンク（Custom Links）をクリックして、次のように設定します。
URL：http：//＃
ナビゲーションラベル（Navigation Label）：
CSSクラス（CSS Classes）：mega-menu
次の図を参照してみてください。
今メガメニューを構成するメニュー項目を追加するようにします。
次の図のようにMega Menu Hamburger Icon Linkを一番上位に位置させ、残りのメニューを適切に構成します。
メニューの構成が完了したら、メニューの設定」メインメニュー」をチェックするようにします。
メニューを保存します。
ハーバー（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*/
}これで完了しました。
今の結果を確認してみると、次のように動作します。
追加のカスタマイズオプション
上記のCSSコードにコメントがあるので、ハンバーガーのアイコンのスタイルを変更することができます。 下に表示された二つの部分のCSSスタイルを必要に応じて変更してください。
ハンバーガーのアイコンを変更する
Diviは、さまざまなフォント、アイコンを使用できるように提供しています。 必要に応じてハンバーガーのアイコンを別のスタイルのアイコンに変更することができます。 上記のコードでは、次の部分の数値を変更します。
コンテンツ： "\ 61"; / * change icon here * /
"\ 61" 部分を下の適切なコードに変更します。
「x」アイコンを変更する
ハンバーガーメニューアイコンを変えれば変更されたデザインに合わせて、「x」アイコンを変更する必要があります。「x」アイコンを表示するコードは次のとおりです。
/ *** displays the "x" close icon *** /
.show-submenu .hamburger：before {
コンテンツ： "\ 4d";
}
"\ 4d" 部分を次のいずれかの値に変更します。
黒円形のアイコンに変更する次のように動作します。
ハンバーガーのアイコンの色を変更する
必要に応じてハンバーガーのアイコンの色を変更することができます。 この場合、 「change icon color "（アイコンの色を変更）とされている行を編集します。
Color: #333; /*change icon color here*/
ハンバーガーのアイコンのサイズを変更する
アイコンのサイズを変更するには 「change icon size here」（ここでアイコンのサイズを変更）とされている行を変更します。
Font-size: 32px; /*change size of icon here*/
ハンバーガーのアイコンにラベルを追加する
アイコンのラベルを簡単に追加することができます。 ルックス>メニューに移動し、「mega-menu "クラスを追加した最上位のメニュー項目を編集して、divの内部にラベルフレーズを追加します。
<div class=”hamburger”>menu</div>
これにより、次のようにアイコンの横にラベルが表示されます。
反応型（Responsiveness）
メガメニューは980pxよりも広い画面でのみ動作します。 980px未満の画面（タブレットやスマートフォン）では、メニューがメインのモバイルメニューに切り替えます。
最後に、
ヘッダーにすっきりシンプルなメガメニューをご希望の場合、優れたソリューションのいずれかのハンバーガーのアイコンを追加することができます。
そしてDiviの内蔵フォントアイコンを使用して簡単にハンバーガーのアイコンをカスタマイズすることができます。
さらに、次の図のようにメガメニューに画像を追加して、もっと素敵なメガメニューを作成することもできます。
機会になるDiviメガメニューにアイコンを追加する方法について見てみましょう。
いつものお手伝いをいただいております。
ディビテーマでメガメニューを作成し、メガメニューに画像を入れる方法を知りたいです。 ありがとうございます。
Diviテーマでメガメニューを作成する方法については、次の記事を参照してください。
https://www.thewordcracker.com/basic/elegant-themes%ec%9d%98-divi%ec%97%90%ec%84%9c-%eb%a9%94%ea%b0%80-%eb%a9%94%eb%89%b4-%eb%a7%8c%eb%93%a4%ea%b8%b0/
https://blog.thewordcracker.com/divi-megamenu
diviテーマで、デスクトップ画面では、基本的なヘッダーを使用して、モバイルでなぜそのようなジーン分からないボタンを押すと、イーグルのようにドロップダウンされているメニューが使用されます。 ところが、ヘッダが透明に白い文とモバイルでよく見えないのに、携帯電話だけでフォームをスライドインで変えたり、降りてくるメニューのバックグラウンドだけ色を変更順でしょうか？
こんにちは、ジャンジェホ様。
CSSでメニューのバックグラウンドカラーを調整試みることができるようになります。
Diviテーマで提供されるETmodulesアイコンフォントのリストは、次の記事を参照してみてください：
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=34581&url=43940
使用例：
클래스명:before {font-family: "ETmodules" !important;
content: "e05b";
color: #03A9F4;
display: inline-block;
padding-right: 3px;
vertical-align: middle;
}