基礎編

テキストナビゲーション

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

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

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

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

テキストナビゲーション

今回はメニューにマウスポインタを持っていった時のテキストナビゲーションのアニメーションを作りました。

おさえておきたいところ

テキストナビゲーションを使う目的と使いどころはこんな感じです。

        目的:ユーザーを的確に情報に導く
使いどころ:マウスオーバー

線が伸びて枠線になる

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.

左から右に背景が伸びる

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.

次回の予定

掲載内容をコンパクトに収め、情報の全体像や重要度を俯瞰的に見せるタブメニューを作ってみようと思います\\\\٩( ‘ω’ )و ////
合わせて読みたい
テキストナビゲーション
テキストナビゲーション
ABOUT ME
WEBさん
WEBさん
WordPressの不具合をなおす人
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか? WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。
記事URLをコピーしました