Magic Line Menuはナビゲーションメニューのテキストに応じてアンダーラインが伸び縮みするのが特徴です。メニュー項目にホバーするとアンダーラインが移動して、ホバー中の文字の長さに合わせるように伸び縮みします。
Magic Line Menu
以下のページからMagic Line Menuの実際のデモやコードをチェックできます。
デモでは、Home、Short、Longer Navigation、Random、Followと書かれたナビゲーションメニューが設置されていて、各メニュー項目にホバーすると、そのメニューまでアンダーラインが移動します。それと同時にテキストの長さに応じてアンダーラインが伸び縮みします。
シンプルなアニメーションで、現在どのナビゲーションを選択しようとしているかが瞬時に分かるのが便利ですね。アニメーションの動きもとても滑らかです。
ナビゲーションメニューにちょっとしたアクセントをつけたい人は、ぜひ「Magic Line Menu」をチェックしてみてはいかがでしょうか？
