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

3

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

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

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

Diviテーマメガメニュー

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

Diviテーマのメガメニュー

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

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

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

ワードプレスのダッシュボードで、外観>メニューに移動し、「新しいメニューを作成してください」(Create a new menu)をクリックして、新しいメニューを作成します。

ワードプレスDiviテーマでメニューを作成する

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

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

ワードプレスのメニューからCSSクラスを有効にする

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

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

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

URL:http://#
ナビゲーションラベル(Navigation Label):<div class = "hamburger"> </ div>
CSSクラス(CSS Classes):mega-menu

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

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

これで完了しました。

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

ワードプレスDiviテーマメガメニュー

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

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

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

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

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

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

アイコンのラベルを簡単に追加することができます。 ルックス>メニューに移動し、「mega-menu "クラスを追加した最上位のメニュー項目を編集して、divの内部にラベルフレーズを追加します。

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

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

Elegant ThemesのDiviメガメニュー

反応型(Responsiveness)

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

Divi基本モバイルメニュー

おわりに

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

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

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

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

注:

3のコメント

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

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

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

  2. 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; }

コメントを残す

コメントを入力してください!
名前を入力してください