グローバルナビゲーション１

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

グローバルナビゲーション１

アニメーションのパターンが多いため、２回に分けて紹介いたします。

おさえておきたいところ

       目的：サイト全体の構成を分かりやすく伝える
使いどころ：画面の読み込み中 / クリック / マウスオーバー / スクロール / 画面のリサイズ

ドロップダウンメニュー（上）

ドロップダウンメニュー（左）

ドロップダウンメニュー（写真付 上ナビ）

ドロップダウンメニュー（写真付 左ナビ）

スクロールすると上部に固定

スクロール途中から上部固定

スクロールするとハンバーガーメニューに変化

スクロール途中からヘッダーの高さが小さくなる

スクロール途中でヘッダーが消え、上にスクロールすると復活

スクロールすると位置が固定して追従

次回の予定

ハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示（正確には拡大表示）されるアニメーションを作ってみようと思います＼＼\\٩( ‘ω’ )و //／／