グローバルナビゲーション２
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
グローバルナビゲーション２
前回に続きグローバルナビゲーションです。 今回はハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示（拡大表示）されるアニメーションを作りました。
おさえておきたいところ
前回と同様、グローバルナビゲーションを使う目的と使いどころはこんな感じです。
目的：サイト全体の構成を分かりやすく伝える
使いどころ：画面の読み込み中 / クリック / マウスオーバー / スクロール / 画面のリサイズ
クリックしたらナビがスライド表示
上から下
下から上
左から右
右から左
背景が全面に広がる
クリックしたら円形背景が拡大
上から
下から
右から
左から
右上から
右下から
左上から
左下から
中央から
クリックしたらナビ背景コンテンツがぼかされる ※IE11非対応
追従メニューの現在地をハイライト表示する
次回の予定
ナビゲーションを収納し、パネルの開閉を明示するハンバーガーメニューを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／
