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

テキストナビゲーション

テキストナビゲーション
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を押して動きを確かめてね!↑

次回の予定

掲載内容をコンパクトに収め、情報の全体像や重要度を俯瞰的に見せるタブメニューを作ってみようと思います\\\\٩( ‘ω’ )و ////

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