Expandy Menu

JavaScript

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

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

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

デモ

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

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

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

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

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

Expandy Menu

関連記事

  1. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  2. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  3. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

  4. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  5. Rainbow.js
  6. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

最近の記事

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

Facebookページ

PAGE TOP