Diviメガメニューのハンバーガーアイコンを作成する方法

公開: 2017-04-18

ハンバーガーのアイコンはメニューの代名詞になっています。積み重ねられた3本の水平線はリストの概念を表しており、明らかな類似性から「ハンバーガー」と呼ばれています。 Diviはハンバーガーアイコンを使用して、モバイルと「スライドイン」や「フルスクリーン」などの特定のヘッダースタイルでメインメニューを切り替えます。

今日は、ハンバーガーアイコンを使用してクリック時にメガメニューを切り替える方法を紹介します。これは、メニューオプションがたくさんあるサイトに最適なソリューションです。ハンバーガーアイコンは、ヘッダーをすっきりさせます。さらに、メガメニューの整理された4列のレイアウトにより、ユーザーは必要なものをすばやく効率的に見つけることができます。

前後

デフォルトでは、メガメニューはメインの親メニューリンクにカーソルを合わせると機能します。

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

Diviを使用した設計の実装

私たちのYoutubeチャンネルを購読する

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

まず、メガメニューを作成するか、現在のメニューをメガメニューに変更する必要があります。この部分は非常に単純です。

WordPressダッシュボードから、[外観]→[メニュー]に移動します。 [新しいメニューの作成]をクリックして、メニューに名前を付けます。

[メニューの作成]をクリックします

メニュー画面の右上にある[画面オプション]タブをクリックし、[CSSクラス]をオンにして、CSSクラスメニュープロパティをアクティブにしてください。

これで、作成した新しいメニューにメニュー項目を追加できます。

まず、ハンバーガーアイコンとなるメニュー項目を追加しましょう。このメニュー項目は、他のすべてのメニュー項目の親になります。

このメニュー項目を作成するには、次の設定でカスタムリンクを作成します。

URL: http://#

Navigation Label: <div class="hamburger"></div>

CSS Classes: mega-menu

このメニュー項目は特定のページにリンクされないため、URLは単なるハッシュタグ（＃）です。このメニュー項目を使用して、クリック時にメガメニューを展開します。

ナビゲーションラベルには、いくつかの単純なhtmlコード（「ハンバーガー」のクラスを持つdiv）があります。これは、カスタムCSSを使用してハンバーガーアイコンを表示するために使用するものです。

CSSクラス「メガメニュー」は、メガメニュー機能を展開するものです。このcssクラスは、メインの親メニュー項目に1回だけ適用する必要があり、サブ項目には適用しないでください。

次に、メガメニューを構成するメニュー項目を追加します。この例では、メインメガメニュー項目の下で次の親メニュー項目とサブメニュー項目を使用しています。

メガメニューハンバーガーアイコンリンク
- 私たちに関しては
  - 私たちのチーム
  - 私たちの使命
  - 会社の歴史
- サービス
  - ウェブデザイン
  - ウェブ開発
  - SEO
- 私たちの仕事
  - ブログ
  - Eコマース
  - 企業
- お問い合わせ
  - サポート
  - 方向
  - ジョブズ

次に、4つのメニュー項目（それぞれに独自の3つのサブ項目がある）を整理/ドラッグして、メインの親メガメニューリンクのサブ項目にします。

メニューの整理が終わったら、メニュー設定のプライマリメニューを確認してください。

メニューを保存

ホバーではなくクリックでメニューを表示するためのjQueryの追加

メガメニューが作成されたので、ホバー（デフォルト）ではなくアイコンをクリックしたときにメガメニューを表示するために、jQueryを追加する必要があります。これを行うには、[テーマオプション]→[統合]に移動し、[ブログの先頭にコードを追加する]セクションに次のスクリプトを追加します。

<script>
/*** Open menu itmes 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の追加

テーマオプションを表示しているときに、[一般設定]で次のカスタム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 ***/
.show-submenu .hamburger:before {
    content: "\4d"; /*change x icon here*/
}

それでおしまい！

さあ、行って結果をチェックしてください

その他のカスタマイズオプション

入力したCSSには、ハンバーガーアイコンのスタイルを変更できるように、全体にコメントがあります。アイコンのスタイルを設定するためのCSSの2つの主要なセクションは次のとおりです。

ハンバーガーアイコンの変更

Diviには、サイトで使用できるさまざまなフォントアイコンが付属しています。ハンバーガーアイコンを別のスタイルに変更したい場合は、「ここでアイコンを変更」というコメントのラベルが付いたCSSの行を見つけて編集するだけです。

content: "\61"; /*change icon here*/

さまざまなハンバーガーアイコンのさまざまなコンテンツ値を次に示します。「\ 61」を次のいずれかに置き換えるだけです。

正方形のアイコンメニュー– \ 62

サークルアイコンメニュー– \ 63

ulアイコン– \ 64

olアイコン– \ 65

スクエアメニューアイコンダーク– \ e056

サークルメニューアイコンダーク– \ e057

「X」アイコンの変更

別のハンバーガーメニューアイコンを使用している場合は、デザインに合わせて「x」アイコンを変更する必要があります。次のCSSを見つけるだけです。

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d";
}

「\ 4d」を次のコンテンツ値のいずれかに置き換えます。

サークル閉じるメニューアイコン– \ 51

サークル閉じるメニューアイコン暗い– \ e051

これは、無料のくまアイコンスタイルが配置されたメガメニューハンバーガーアイコンの外観です。

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

ハンバーガーアイコンの色を変更する場合は、「アイコンの色を変更」というラベルの付いたCSSの次の行を編集します。

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

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

ハンバーガーアイコンのサイズを変更する場合は、「ここでアイコンサイズを変更」というラベルの付いたCSSの次の行を編集します。

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

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

アイコンにラベルを追加するのは簡単です。 [外観]→[メニュー]に戻り、「メガメニュー」クラスに指定した一番上のメニュー項目を編集するだけです。ナビゲーションラベルテキストボックスで、div内にラベルテキストを追加します。この例では、「メニュー」というラベルを追加しました。

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

これで、ハンバーガーの横にラベルが表示されます。

レスポンシブ？

メガメニューは、980pxより広い画面サイズでのみ機能します。画面サイズが980px未満（タブレットおよびスマートフォン）の場合、メニューはデフォルトのモバイルメニューに切り替わります。

最終的な考え

メガメニューが好きで、ヘッダーのすっきりとしたミニマリストデザインを作成したい場合は、ハンバーガーアイコンを追加してメガメニューを表示することをお勧めします。これで、ユーザーはクリックするだけですべてのナビゲーションリンクを一度に表示できます。

さらに、Diviの組み込みフォントアイコンを使用すると、アイコンを最初から作成しなくても、cssを使用してハンバーガーアイコンを簡単にカスタマイズできます。

メガメニューに画像を追加して、さらに目立つメガメニューを作成することもできます。

それでおしまい！

この機能をお楽しみください。コメントであなたからの連絡を楽しみにしています。