Expandy Menu

JavaScript

マウスオーバーで広がるメニューパネル「Expandy Menu」

Expandy Menuはマウスオーバーすると横に広がるメニューパネルを実装できるjQueryプラグインです。たとえば、各メニューにタイトルだけ表示させておき、マウスオーバーするとそのメニューに対する詳細を表示させるといったことができます。

スライドアニメーションでパネルが降りてくる

デモ

Click me!と書かれたメニューアイコンをクリックすると、上からスライドアニメーションでパネルが降りてきます。パネルは1から5まで用意されており、各パネルにマウスオーバーすると横に拡大して詳細が表示されます。

クリックする手間が省けるうえに、コンテンツもスッキリ表示させれるのがいいですね。

最初にクリックしたメニューアイコンは、メニューパネルを表示させると「×」に変化します。ここを再度クリックすると、今度は逆のスライドアニメーションでメニューパネルが隠れます。

マークアップもスッキリ記述できるほか、実装方法もシンプルなのがいいですね。シンプルな機能ながらも、なかなかインパクトあるメニューだなーと思いました。

というわけで、マウスオーバーで横に広がるメニューパネルをサイトに取り入れたい人は、ぜひ「Expandy Menu」を活用してみてはいかがでしょうか?

Expandy Menu

関連記事

  1. Relocator
  2. jQuery Pit-scheduler v2.0
  3. Enllax.js

    JavaScript

    軽量で簡単なパララックスを実装できるjQueryプラグイン「Enllax.js」

    Enllax.jsは軽量で使い方も簡単なパララックスエフェクトを実装す…

  4. Animated Intro With jQuery

    JavaScript

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

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

  5. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  6. jQuery contextMenu plugin & polyfill

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP