no-image

JavaScript

シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

snakeMenuはシンプルなアニメーションによるドロップダウンメニューを実装できるjQueryプラグインです。メニューにホバーすることで、手軽にドロップダウンメニューを操作できます。たくさんあるメニュー項目をシンプルなかたちで表示させたい場合にはとても最適な選択肢になりそうですね。

snakeMenu

snakeMenu

ファイルをダウンロードして実際のデモ動作もチェックできます。デモでは画面上部にナビゲーションメニューが設置されていて、多階層になっているメニュー項目にホバーすると上からスライドでメニューが降りてくる仕組みです。

シンプルなアニメーションで煩わしさもなく、手軽に下の階層のメニューへアクセスできます。ちなみにデモではbootstrapメニューとanimate.cssが使われています。

またレスポンシブにも対応していて、画面を縮小していくとナビゲーションメニューがハンバーガーアイコンに切り替わります。アイコンをクリックすると、メニューがドロップダウンで表示されるようになります。モバイルでの操作も快適に行えるのはうれしいですね。

マークアップなどの実装方法もシンプルでわかりやすく、特に難しい設定もなさそうです。snakeMenuにはオプションもいくつか用意されています。具体的には、menuCont、menuItem、menuItemData、doxCont、boxItem、boxItemData、cssMenuItemActive、destroySnakeRes、mouseDelay、boxOffsetTop、boxOffsetBottom、boxOffsetLeft、boxOffsetRight、noActiveMenuItemです。

そのほか、アニメーションのオープン時とクローズ時にカスタマイズできる、animOpenやanimCloseといった関数も用意されています。

シンプルなドロップダウンメニューでありながらも、多彩なカスタマイズ性も備えたjQueryプラグインに仕上がっています。ホバーによるドロップダウンメニューを実装したい人は要チェックです。

topbar画面上部に美しいプログレスバーを表示できる「topbar」前のページ

カスタマイズしやすいコンテキストメニューを実装できる「ax5ui-menu」次のページax5ui-menu

関連記事

  1. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  2. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  3. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  4. JavaScript

    アイコンをクリックすると周りにメニューが表示されるjQueryプラグイン「FerroMenu」

    FerroMenuというjQueryプラグインを使えばアイコンをクリッ…

  5. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP