テキストナビゲーション

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

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

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

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

テキストナビゲーション

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

おさえておきたいところ

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

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

線が伸びて枠線になる

テキストが入れ替わる

楕円が線に変化

上下に線が伸びて背景になる

左から右に線が伸びて背景になる

左から右に背景が伸びる

左から右に線が伸びる（上部）

左から右に線が伸びる（下部）

中心から外に線が伸びる（中央）

中心から外に線が伸びる（下部）

左から右に背景が伸びる

左から右に線が伸びる（上部）

左から右に線が伸びる（下部）

次回の予定

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