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

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

  • 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

サイト内検索

最近の投稿

アイキャッチ
そろそろvuejs始める

最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...

02 May 2021

アイキャッチ
追い風CSS(tailwindcss)が結局楽かも

最初にtailwindcssのv1が出た頃はまだbootstrapで良いかな。 htmlに入れるクラスタグが多過ぎと思っていました。あまり良い印象はなかったです。 時は過ぎいろいろと触っていると...

29 Apr 2021

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

アイキャッチ
Webpack5にアップデートしてエラーの対処方法2つ

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

著者

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

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

フッターイメージ