Expandy Menu

JavaScript

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

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

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

デモ

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

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

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

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

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

Expandy Menu

関連記事

  1. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  2. Block Slide

    JavaScript

    jQueryプラグインで印象的なエフェクトで魅せるモーダルウィンドウ「Block Slide」

    Block SlideというjQueryプラグインを使えば印象的なエフ…

  3. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  4. Product comparison

    JavaScript

    製品などの比較に役立つjQueryプラグイン「Product comparison」

    Product comparisonは、いくつかの種類のものを比較する…

  5. Radial Progress Bars

    JavaScript

    アニメーション付きのサークルプログレスバー「Radial Progress Bars」

    Radial Progress Barsは、アニメーション付きのサーク…

  6. jQuery Flip-Quote

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP