ナビゲーションにホバーすると、下層のナビゲーションが出てくる、いわゆるドロップダウンメニューを作ってみました。
調子に乗ってレスポンシブで、スマホのときはアコーディオンメニューにしようとか考えて、結構苦労しました・・・。
デモはこちらから
DEMO
以下、コードです。
HTML
liの中にulを入れる入れ子構造です。普通に打つとかなりめんどくさいですね。何かしら楽をする方法を使う方がいいでしょう。私の場合はemmetでやりました。
CSS
動きに関わる部分は特にありません。ほぼ見た目を整えるために使ってます。「>」は子要素を指定するセレクタです。今回みたいな入れ子構造のものは子要素のみを指定してあげればclass・idなしでも実装できます。(メンテナンス性とかの良し悪しはさておき・・・)
jQuery
画面サイズによってイベントを切り替えています。700pxより大きい場合はhoverイベントが、小さい場合はclickイベントが動作します。さらに700px以下の時はmenuというボタンが現れ、ナビゲーションが格納されます。これは読み込み時と画面サイズが変わったときに読み込むようにしています。
ちなみに.on(‘load resize’)の中にクリックやホバーのイベントを入れると正常に動作しません。
jQueryのonイベントは入れ子にすると、外側のイベントの読み込みを内側のイベントに継承してしまいます。つまり、.on(‘load resize’)の関数の中に.on(‘click’)を入れると、リサイズが起こった回数だけクリックされたという判断がされてしまい、アコーディオンが何度も開いたり閉じたりしてしまうのです。
なので、イベントごとにウィンドウサイズを判断して、サイズによる出しわけをしています。
openerという変数は他のアコーディオンが開いているかどうかを判断しています。どのアコーディオンも閉じているときは、クリックしてすぐ開きますが、どれかのアコーディオンが開いているときは、閉じ終わってから開くようになっています。
=>・・・この記号はES2015から実装されたアロー関数というものです。setTImeoutなどの通常thisを継承できない場合でも、thisを継承してくれるというものです。(このあたり説明すると長いので、また別の機会にでも。)ちなみにES2015の仕様は、サポートしてないブラウザも結構あるので(iPhone5sではうごきませんでした)、使用時は注意が必要です。
今回は、イベントが重なるとだめなところとか、アロー関数とか、実際に試すことができたので面白かったです。
以下参考にしたサイトと書籍。大変勉強になりました。
参考サイト：
jQuery.on()は追加式なのでイベントの重複登録に注意しよう
参考書籍：
『フロントエンドエンジニアのための現在とこれからの必須知識』(マイナビ出版)