no-image

JavaScript

テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

Magic Line Menuはナビゲーションメニューのテキストに応じてアンダーラインが伸び縮みするのが特徴です。メニュー項目にホバーするとアンダーラインが移動して、ホバー中の文字の長さに合わせるように伸び縮みします。

Magic Line Menu

Magic Line Menu

デモでは、Home、Short、Longer Navigation、Random、Followと書かれたナビゲーションメニューが設置されていて、各メニュー項目にホバーすると、そのメニューまでアンダーラインが移動します。それと同時にテキストの長さに応じてアンダーラインが伸び縮みします。

シンプルなアニメーションで、現在どのナビゲーションを選択しようとしているかが瞬時に分かるのが便利ですね。アニメーションの動きもとても滑らかです。

ナビゲーションメニューにちょっとしたアクセントをつけたい人は、ぜひ「Magic Line Menu」をチェックしてみてはいかがでしょうか?

no-imageミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」前のページ

シンプルなアナログ時計を実装できる「JQuery Clock」次のページJQuery Clock

最近の記事

  1. FUNLOGY スピーカー
  2. 聖剣伝説 VISIONS of MANA
  3. エルデの追憶
  4. コーヒー豆
  5. マレニア様……
PAGE TOP