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. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  2. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  3. JavaScript

    指定した要素をパカパカと点滅させることができる「jquery.flicker」

    とてもシンプルなプラグインだったのでメモがてらご紹介します。指定した要…

  4. no-image

    JavaScript

    レスポンシブでスタイリッシュな「lightbox-jquery-plugin」

    lightbox-jquery-pluginは、レスポンシブに対応した…

  5. Basic Metro Dynamic jQuery Tab Menu
  6. jQuery Text Fade Delay

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP