今すぐ相談しよう!
学んだこと

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

グローバルナビゲーション2
WEB先案内

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

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

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

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

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

前回に続きグローバルナビゲーションです。

今回はハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示(拡大表示)されるアニメーションを作りました。

おさえておきたいところ

前回と同様、グローバルナビゲーションを使う目的と使いどころはこんな感じです。

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

クリックしたらナビがスライド表示

上から下

See the Pen
クリックしたらナビが上から下に出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

下から上

See the Pen
クリックしたらナビが下から上に出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

左から右

See the Pen
クリックしたらナビが左から右に出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

右から左

See the Pen
クリックしたらナビが右から左に出現
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

背景が全面に広がる

See the Pen
クリックしたら背景が全面に広がる
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

クリックしたら円形背景が拡大

上から

See the Pen
クリックしたら円形背景が拡大(上から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

下から

See the Pen
クリックしたら円形背景が拡大(下から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

右から

See the Pen
クリックしたら円形背景が拡大(右から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

左から

See the Pen
クリックしたら円形背景が拡大(左から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

右上から

See the Pen
クリックしたら円形背景が拡大(右上から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

右下から

See the Pen
クリックしたら円形背景が拡大(右下から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

左上から

See the Pen
クリックしたら円形背景が拡大(左上から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

左下から

See the Pen
クリックしたら円形背景が拡大(左下から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

中央から

See the Pen
クリックしたら円形背景が拡大(中央から)
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

クリックしたらナビ背景コンテンツがぼかされる ※IE11非対応

See the Pen
クリックしたらナビ背景コンテンツがぼかされる ※IE11非対応
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

追従メニューの現在地をハイライト表示する

See the Pen
追従メニューの現在地ハイライト
by Web Navigator (@web-navigator)
on CodePen.

「Result」下のRerunを押して動きを確かめてね!↑

次回の予定

ナビゲーションを収納し、パネルの開閉を明示するハンバーガーメニューを作ってみようと思います\\\\٩( ‘ω’ )و ////

ABOUT ME
WEBさん
WEBさん
WordPressの不具合をなおす人
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか? WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
WEB先案内があなたの悩みを解決します!
お問い合わせ
記事URLをコピーしました