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. Liquid Slider

    JavaScript

    タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

    ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにも…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで$.inArrayを使えば配列の中に指定した値が何番目に入ってるか知ることができる

    jQueryで配列の中に自分が指定した値が何番目にあるか知りたい場合は…

  3. no-image

    JavaScript

    コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

    Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせ…

  4. no-image
  5. Listt

    JavaScript

    リストをiOSのようにアニメーションできるjQueryプラグイン「Listt」

    ListtはリストをiOSのセレクトボックスのようにアニメーションさせ…

  6. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

最近の記事

  1. ゴールデンパイナップル
  2. 雪がつもった公園
  3. ハンガリー産 純粋アカシアはちみつ
  4. COMOLI ダブルレイヤー L/Sクルー
  5. メキシコ オアハカ

アーカイブ

PAGE TOP