ナビゲーションにホバーすると、下層のナビゲーションが出てくる、いわゆるドロップダウンメニューを作ってみました。
調子に乗ってレスポンシブで、スマホのときはアコーディオンメニューにしようとか考えて、結構苦労しました・・・。

デモはこちらから
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()は追加式なのでイベントの重複登録に注意しよう

４１６番地 setTimeoutの話

参考書籍：
『フロントエンドエンジニアのための現在とこれからの必須知識』(マイナビ出版)

（※これから紹介するのはほんの一例であり、私の個人的見解を含みます。これが絶対ということはないですし、もっと良いやり方があったり、コンテンツの内容によって違ってきたりするということは理解しておいてください。）

生徒「レスポンシブって難しい・・・。」
先生「どうしました？」
生徒「先生、レスポンシブがうまくできないんです。」
先生「レスポンシブとはどういうことを言うか、わかりますか？」
生徒「PCでもスマホでもサイトが見られるということですよね？」
先生「そうですね。もう少し詳しく言えば、一つのHTMLソースをデバイスや画面サイズに応じて適切に表示できるようにすることですね。なのでただ画面サイズに対して縮めただけというようなレイアウトではレスポンシブと呼べるかは微妙なところですね。」
生徒「そうなんですね。」

先生「簡単なコードを例にレスポンシブのやり方について見ていきましょう。まず、用意したHTMLはこちらです。」



「そしてそれに対してこのようにスタイルを設定します。」



「その見栄えがこちら」
DEMO①

「まずはPC用に固定値でレイアウトを決めました。次にこれを画面サイズに応じて最適なものにしていくのですが、このとき幅や余白などの数値はbodyに対して相対的に設定したいので、％にします。
ということで％にしたものがこちらです。今回は幅のみ％指定です。」



DEMO②

「これで画面を縮めても表示されてるでしょう。どこまでも伸びていくと気持ち悪いので、max-widthを指定しています。」
生徒「でも、先生。縮めていくとリストやコンテンツが狭くなりすぎる気がするのですが。」
先生「そうですね。同じレイアウトのまま画面サイズが小さくなれば見づらくなります。そこでブレークポイントを指定しましょう。」
生徒「ブレークポイント？」
先生「ブレークポイントとは画面サイズが変化したときにスタイルが変わる画面幅のことです。メディアクエリー（@media screen snd …）でブレークポイントを指定した、その画面サイズまでの間でのみ違うスタイルを適用させることができます。（※デバイスサイズや向きによっても分けられます。詳しくはこちら
デバイスに合わせてCSSを振り分ける「Media Queries」）
メディアクエリーで画面サイズ600xp以下の時のスタイルを指定したものがこちらです。(@media以外は②と一緒です)」



DEMO③

「これだと画面サイズが小さくなってもある程度見やすさを維持できていると思います。」

生徒「そうですね、コンテンツの幅もあるし、ナビのボタンもタップしやすいです。」
先生「実際にはこれにコンテンツの内容が入ってくるので、これだけでレスポンシブ完成というわけにはいきませんが、基本的な考え方はこんなかんじです。」
生徒「そうなんですね。先生、もう一度レスポンシブに挑戦してみます。」

参考サイト
必読！5分でわかるレスポンシブWebデザインまとめ
レスポンシブWebデザインの作り方（簡単設定方法）

いきなりですが、クイズです！

このようなHTMLがあります。



このHTMLに以下のようにスタイルを設定したときdivのfont-sizeはいくらになるでしょう。

①


②


 
 
わかりましたか？

では正解発表です。下のリンクからどうぞ。「チェック用」となっているほうには同じサイズになるように、px単位でfont-sizeを指定しています。
①答え

②答え

①と②の違いはfont-sizeの単位です。emとremはどう違うのか。

○emとは
emは相対単位と言って、親要素のサイズに対しその何倍かという計算をしてサイズを設定します。なので、先ほどの例であれば、（16*1.5*2*1.5）=72pxになります。他に％が相対単位になります。それに対してpxはそれ独自にサイズを指定するので、絶対単位といいます。

○remとは
remは:root emの略で、htmlのサイズに対してその何倍かでサイズを設定し、親要素の影響を受けません。なので、先ほどの例では、(16px*2rem)=32pxとなります。これがemとremの違いです。

個人的にはremを使うことをおすすめします。なぜなら、例えば前回紹介したdisplay:inline-bloock;のときに親要素にfont-size:0;を設定すると、emでは0にかけ算することになるので、文字サイズを設定できません。親要素を考慮に入れて混乱することを避けるためにもremを使っていくのがいいのではないでしょうか。

参考サイト:フォントサイズの指定はCSS3の「rem」が便利そう