フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

jQuery

メニューの子カテゴリをjqueryでフワッと表示する

2016年03月17日

Pocket

子カテゴリをフワッっと表示する

前回メニューに配置したカテゴリから、子カテゴリを取得するところまで解説しました。

WordPressでメニューに配置したカテゴリから子カテゴリを表示する。get_term_children関数の用例
WordPressでメニューに配置したカテゴリから子カテゴリを表示する。get_term_children関数の用例

以前にwp_get_nav_menu_itemsを使用したメニュー作成を行いましたが、それの拡張でメニューに配置したカテゴリの子カテゴリをサ...

今回は、前回出力したソースからマウスホバーで子カテゴリを表示を行います。
CSSでも同じ様な動きができますが、今回はjqueryでシンプルにやってみます。

HTML・CSSの記述

今回の仕上がりサンプルはこちらです。

SAMPLE

まず前提になるPHPで出力されるソースはこんな感じ。

HTML

CSS

CSSのポイントは2点

・sub-menuを初期にdisplay:noneで消しておく。
・フワッと上げるのでtop:50pxで少し下げておく。

jqueryの記述

jquery

処理を簡単に解説していきます。

$(".menu-item").has("ul")

今回のポイントその1はこの.has()メソッド。
()内の子孫要素を持った親要素に対して処理を行うようにするメソッドです。

.on()

ポイントその2は.on()メソッド。
.onを使うことで一つのセレクタに複数のイベントタイプを定義できます。

mouseenterとmouseleave

同じような使い方ではmouseoverとmouseoutもあるのですが、内包要素にフォーカスされた時に挙動がおかしくなるようなので今回はmouseenterとmouseleaveを使いました。

.children('ul')

マウスホバー時のセレクタは親メニューですが、実行するセレクタは子メニューなので.children('ul')で子要素にあるulを指定してやります。

show()とhidden()

それぞれdisplay:blockとdisplay:noneと同義の処理になります。

アニメーション内でopacityを使った透明化はしていますが、それだけだと透明になっただけなので、その辺りにマウスを当てると子メニューが出現しちゃいます。
ですので、チェーンメソッドでそれぞれのアニメーション処理前後にかませて出現・消去を行っています。

まとめ

非常にシンプルですがjqueryの挙動を知るには良いソースじゃないでしょうか。

ちなみに上記の例ですと、アニメーション処理中に素早くフォーカスを繰り返した場合、表示・非表示を繰り返す挙動が発生します。
それが気になる方は子メニューのセレクタに下記を追加してください。

アニメーション処理中は処理を行わない指定なんですが、この場合素早くフォーカスを繰り返すとマウスホバーに反応しなくなるケースがあります。(外でクリックした後だと正常に作動する。)

どちらも一長一短な感じで、もっと良い方法がないかと模索中です。

このカテゴリで良く読まれている記事
関連記事

COMMENT