ワードプレスのカスタムメニューをスライドトグル

ワードプレスのカスタムメニューをスライドトグル

  • 2018-03-17  最終更新日:2018-03-17

今回はワードプレスのカスタムメニューをトグルダウンで表示させる方法をご紹介します。 クリックしてサブメニューが表示させる方法になります。スマホメニューなどにはよく使われているかと思います。


スポンサーリンク


jqueryでslideToggle

今回はこんな感じを実装してみたいと思います。マウスオーバーで表示させる方法はCSSでも出来るんですがクリックする場合はjqueryで記載します。

slideToggle

メニューのスタイルは以下になります。

<style>
.main-navigation {
	background: #fff;
	margin-bottom: -1px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: 16px;
	height: 65px;
	width: 100%;
	display: block;
}

ul.main-nav {
	display: flex;
	list-style: none;
}
ul.main-nav > li {
	padding: 0 20px 0 0;
}
ul.main-nav > li.current-menu-item > a {
  border-bottom: 1px solid #004280;
}
ul.main-nav > li > a {
	display: block;
	border-top: 1px solid #ddd;
	margin-top: -1px;
	padding: 20px 0;
	color: #333;
	text-decoration: none;

}
ul.main-nav > li > a:hover {
	color: #555;
	border-bottom: 1px solid #004280;
}
ul.main-nav ul.sub-menu{
	display: none;
	list-style: none;
	background-color: #fff;
	padding:0;
	margin:0;
	z-index: 1;
	position:relative;
}
ul.main-nav ul.sub-menu li{
	padding: 10px;
	border-bottom: 1px solid #ccc;
}
</style>

header.phpにこのように記載してワードプレスのカスタムメニューを表示させます。link_beforeはFont Awesomeでアイコンを表示させる場合に使うので使わなければ必要はないです。

デフォルトではリスト要素にクラスがつきますが、nav_menu_css_classのクラスなどの要素を削除している場合は出力されませんので注意が必要です。

<?php if( has_nav_menu( 'global_nav' ) ): ?>
		<nav id="site-navigation" class="main-navigation" role="navigation">
		<?php
		wp_nav_menu(array(
			'theme_location'	=> 'global_nav',
			'container_class' 	=> 'container',
			'menu_class' 		=> 'main-nav',
			'menu_id'			=> 'top-menu',
			'link_before'		=> '<i class="fas fa-angle-right"></i> '
			));?>
	  </nav>
 <?php endif ?>

footer.phpに以下のようなjsを書きます。子要素が出来る場合はmenu-item-has-childrenクラスが出来るのでそれをクリックしたらトグルするという命令になっています。リンクはさせないようにしてありますのでpreventDefault()でリンクさせないようにしました。

一番下の$(this).find(‘[data-fa-i2svg]’).toggleClass(‘fa-angle-down’).toggleClass(‘fa-angle-right’)はFont Awesomeのアイコンをクリックした際に下向きにする設定なのでアイコン設定しなかったら必要ないです。

<script>
(function($) {
	$("ul#top-menu > li.menu-item-has-children > a").on("click", function(e) {
		e.preventDefault();
		$(this).next().slideToggle();
		$(this).find('[data-fa-i2svg]').toggleClass('fa-angle-down').toggleClass('fa-angle-right');
	});
})(jQuery);
</script>

カスタムメニューは以下の通りに設定します。

slideToggle

こんな感じで出来ました。

slideToggle

参考になれば幸いです。


∞Tadashi Suyama∞

wordpress menu slideToggle fadeToggle toggleClass
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
javascriptでモバイル判定

ワードプレスにもwp_is_mobile()という関数がありますが「スマートフォン」と「タブレット」が一緒にモバイルと判定されているかなりざっくりな処理なので同じようにjavascriptでもざ...

22 Apr 2018

アイキャッチ
だから私はXperia

その前のスマホはgoogleのNexus5Xを使っておりました。これはこれで満足しておりましたが、あるつてでXperiaが安く購入できたので変更しました。iPhone3G、iPhone4S、iP...

14 Apr 2018

アイキャッチ
ラジコを録音して聞く方法-どがらじ

ウォーキング中などでラジオを聴くようにしているのですが、以前はFMラジオ機能付きのボイスレコーダーで録音して聴いていたのです。 しかも今のタイプは予約録音が出来るようですね、、、ちょっと昔のタ...

07 Apr 2018

アイキャッチ
ワードプレスの固定ページの階層で一番下の階層には同階層を表示する方法

主にサイドメニューで固定ページを表示させようと考えておりました。それで子階層があれば子階層を表示させて一番下の階層になれば同一階層を表示する方法をご紹介致します。 サイドメニューに表示する際に...

18 Mar 2018

アイキャッチ
ワードプレスのカスタムメニューをスライドトグル

今回はワードプレスのカスタムメニューをトグルダウンで表示させる方法をご紹介します。 クリックしてサブメニューが表示させる方法になります。スマホメニューなどにはよく使われているかと思います。 ...

17 Mar 2018

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

フッターイメージ