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