ダッシュボードに自作ウィジェットを作ってみた話
WEB先案内
WEB先案内 ITブログ
グローバルナビゲーション２
WEB先案内
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
グローバルナビゲーション２
前回に続きグローバルナビゲーションです。
今回はハンバーガーメニューをクリックすると、ナビメニューがスライド表示されたり、円形の背景がスライド表示（拡大表示）されるアニメーションを作りました。
おさえておきたいところ
前回と同様、グローバルナビゲーションを使う目的と使いどころはこんな感じです。
- 目的：サイト全体の構成を分かりやすく伝える
- 使いどころ：画面の読み込み中 / クリック / マウスオーバー / スクロール / 画面のリサイズ
クリックしたらナビがスライド表示
上から下
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
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？
WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
