Expandy Menu

JavaScript

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

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

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

デモ

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

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

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

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

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

Expandy Menu

関連記事

  1. JQuery lightSlider

    JavaScript

    軽量でレスポンシブなサムネイルナビ付きのスライダー「JQuery lightSlider」

    JQuery lightSliderは軽量でレスポンシブに対応したサム…

  2. jQuery plugin Watermark
  3. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  4. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  5. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  6. AnimateScroll

    JavaScript

    面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」…

    ページの任意の場所にスクロールできるjQueryプラグイン「Anima…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP