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

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>