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

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

  • 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

サイト内検索

最近の投稿

アイキャッチ
大山の大献灯・和傘灯りに行った感想

大山の大献灯・和傘灯りに初めて行って参りました。13日の夜に行ってきましたがこんなイベントをやっていることを知らなかったのでご紹介します。和傘のライトアップで日本の夏の雰囲気が良いですね。 大...

23 Aug 2018

アイキャッチ
出雲神話祭り・花火大会

お盆休み中に出雲の花火大会に行って参りました、今年は8月12日(日)でした、開催日は毎年違いますので確認しておきましょう。だいたいこのあたりだった気がします。8,000発の花火で例年13万人が来...

21 Aug 2018

アイキャッチ
chromeのエクステンションを使わないでウェブページ全体をスクリーンショットでとる方法

さて今回はchromeブラウザ限定ですがエクステンションを使わずにページ全体と部分キャプチャをする方法をご紹介します。 割とエクステンションで処理しちゃう場合がありますがデフォルトで使えるとい...

05 Aug 2018

アイキャッチ
はじめてのVim覚え書き

今回はエディターのご紹介になります。かなり特殊なVimエディターをご紹介したいと思います。便利なエディターAtom、SublimeText、VisualStudioCodeとは訳が違います。 ...

28 Jul 2018

アイキャッチ
リニューアルした水木しげるロードは夜がおすすめ

さて、先日14日にリニューアルした境港の通称鬼太郎ロードに行って参りました。鬼太郎に会える町として新たに妖怪を追加して約800mの通りに177体の妖怪ブロンズ像がお出迎え、ゾーン分けをして再配置...

17 Jul 2018

著者

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

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

フッターイメージ