グローバルナビゲーション１
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.
次回の予定
ハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示（正確には拡大表示）されるアニメーションを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／
