no-image

JavaScript

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

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

Magic Line Menu

Magic Line Menu

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

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

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

関連記事

  1. Animated Intro With jQuery

    JavaScript

    プログレスバーつきのカッコいいイントロページを実装する「Animated Intro With jQ…

    シンプルなアニメーションがとてもカッコいいイントロページを実装する「A…

  2. jquery countDownTimer
  3. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  4. Flurry

    JavaScript

    Webページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」

    FlurryはWebページに雪を美しく降らせてくれるアニメーションを実…

  5. Choice.js
  6. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP