子カテゴリをフワッっと表示する
前回メニューに配置したカテゴリから、子カテゴリを取得するところまで解説しました。
以前にwp_get_nav_menu_itemsを使用したメニュー作成を行いましたが、それの拡張でメニューに配置したカテゴリの子カテゴリをサ...
今回は、前回出力したソースからマウスホバーで子カテゴリを表示を行います。
CSSでも同じ様な動きができますが、今回はjqueryでシンプルにやってみます。
HTML・CSSの記述
今回の仕上がりサンプルはこちらです。
SAMPLEまず前提になるPHPで出力されるソースはこんな感じ。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<div class="menu"> <ul> <li class="menu-item"> <a href="">親メニュー１</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="">子メニュー１</a></li> <li class="sub-menu-item"><a href="">子メニュー２</a></li> <li class="sub-menu-item"><a href="">子メニュー３</a></li> <li class="sub-menu-item"><a href="">子メニュー４</a></li> </ul> </li> <li class="menu-item"> <a href="">親メニュー２</a> </li> <li class="menu-item"> <a href="">親メニュー３</a> <ul class="sub-menu"> <li class="sub-menu-item"><a href="">子メニュー１</a></li> <li class="sub-menu-item"><a href="">子メニュー２</a></li> <li class="sub-menu-item"><a href="">子メニュー３</a></li> <li class="sub-menu-item"><a href="">子メニュー４</a></li> </ul> </li> <li class="menu-item"> <a href="">親メニュー４</a> </li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<style> ul{ margin:0; padding:0; } .menu{ width:800px; margin:0 auto; } .menu ul li.menu-item{ width:25%; height: 30px; font-size:14px; line-height: 30px; text-align: center; background: #418bd8; border-left:1px solid #fff; list-style-type: none; display: block; box-sizing: border-box; float:left; position: relative; } a{ text-decoration: none; color: #fff; display: block; } a:hover{ background:#95b6d8; } .sub-menu{ width:100%; display:none; position: absolute; top:50px; } .sub-menu-item{ width:100%; height: 30px; font-size:14px; line-height: 30px; text-align: center; background: #72a4d8; list-style-type: none; border-top:1px solid #fff; box-sizing: border-box; } </style> |
CSSのポイントは2点
・フワッと上げるのでtop:50pxで少し下げておく。
jqueryの記述
jquery
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(function(){ $(".menu ul li").has("ul").on({ 'mouseenter' : function(){ $(this).children('ul').show().animate({opacity:'1',top:'30px'},200); }, 'mouseleave' : function(){ $(this).children('ul').animate({opacity:'0',top:'50px'},500).hide(); } }) }); </script> |
処理を簡単に解説していきます。
$(".menu-item").has("ul")
今回のポイントその１はこの.has()メソッド。
（）内の子孫要素を持った親要素に対して処理を行うようにするメソッドです。
.on()
ポイントその２は.on()メソッド。
.onを使うことで一つのセレクタに複数のイベントタイプを定義できます。
mouseenterとmouseleave
同じような使い方ではmouseoverとmouseoutもあるのですが、内包要素にフォーカスされた時に挙動がおかしくなるようなので今回はmouseenterとmouseleaveを使いました。
.children('ul')
マウスホバー時のセレクタは親メニューですが、実行するセレクタは子メニューなので.children('ul')で子要素にあるulを指定してやります。
show()とhidden()
それぞれdisplay:blockとdisplay:noneと同義の処理になります。
アニメーション内でopacityを使った透明化はしていますが、それだけだと透明になっただけなので、その辺りにマウスを当てると子メニューが出現しちゃいます。
ですので、チェーンメソッドでそれぞれのアニメーション処理前後にかませて出現・消去を行っています。
まとめ
非常にシンプルですがjqueryの挙動を知るには良いソースじゃないでしょうか。
ちなみに上記の例ですと、アニメーション処理中に素早くフォーカスを繰り返した場合、表示・非表示を繰り返す挙動が発生します。
それが気になる方は子メニューのセレクタに下記を追加してください。
|
1 |
.children("ul:not(:animated)") |
アニメーション処理中は処理を行わない指定なんですが、この場合素早くフォーカスを繰り返すとマウスホバーに反応しなくなるケースがあります。（外でクリックした後だと正常に作動する。）
どちらも一長一短な感じで、もっと良い方法がないかと模索中です。
