基礎編

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

グローバルナビゲーション1
WEB先案内
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

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

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

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

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

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

おさえておきたいところ

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

ドロップダウンメニュー(上)

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.

次回の予定

ハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示(正確には拡大表示)されるアニメーションを作ってみようと思います\\\\٩( ‘ω’ )و ////
合わせて読みたい
グローバルナビゲーション2
グローバルナビゲーション2
ABOUT ME
WEBさん
WEBさん
WordPressの不具合をなおす人
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか? WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
記事URLをコピーしました