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

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

  • 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

サイト内検索

最近の投稿

アイキャッチ
アイキャッチ画像がない場合に記事内はじめの画像をアイキャッチにする方法とリンク先画像取得-WordPress

今回はワードプレスのアイキャッチです。記事内はじめの画像を取ってくる方法は結構出回っているので、リンク先の画像を撮ってくる方法をプラスしたやり方になります。 記事内はじめの画像を取得する方法は...

10 Nov 2018

アイキャッチ
豊富で魅力的な画像素材サイトPxBee

画像素材サイトのご紹介です。Pxbeeというfotor提供のサイトです。1枚から購入ができて金額もお手頃です。普段はアドビのアドビストックを利用していますが検索したときの画像の量が多い気がします...

06 Nov 2018

アイキャッチ
Caffeineの代替えにAmphetamine

強制的にスリープさせないようにするアプリAmphetamine【アンフェタミン】なんですが、名前の由来はアメリカでは注意欠陥・多動性障害の薬として使われており、日本では覚醒剤に指定されているよう...

25 Oct 2018

アイキャッチ
macOS Mojaveを早速インストールしてみた感想

さて、いつもなら安定してきたぐらいにアップデートを行うのですが今回は時間もあったのでmacOS Mojaveにアップデートをしてみました。 入れてみてすぐに感じた感想は重い。。。もっさり感が半...

24 Oct 2018

アイキャッチ
ムーバブルタイム(MT)からワードプレスのインポート

今回はムーバブルタイプからワードプレスのインポートについてです。デフォルトで使っている場合の記事は多くありますのでそちらをご参考になさってください。今回はアーカイブテンプレートでアーカイブパスを...

23 Oct 2018

著者

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

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

フッターイメージ