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プラグインに仕上がっています。ホバーによるドロップダウンメニューを実装したい人は要チェックです。

関連記事

  1. zingtouch

    JavaScript

    タッチジェスチャーをカスタマイズできるJSライブラリ「zingtouch」

    Zingtouchは、タッチ対応のデバイスにおける基本的なジェスチャー…

  2. Folder Preview Ideas

    JavaScript

    フォルダに楽しいホバーアニメーションをつける「Folder Preview Ideas」

    Folder Preview Ideasは、フォルダにさまざまな楽しい…

  3. jQuery ui material design datepicker
  4. jQuery Smart Placeholder
  5. WebSnowjq.js

    JavaScript

    Webページに雪を降らせてくれるjQueryプラグイン「WebSnowjq.js」

    WebSnowjq.jsはWebページの中に雪を降らせることができるj…

  6. Points Of Interest

    JavaScript

    各ポイントごとにクリックで詳細文を表示させるjQuery「Points Of Interest」

    Points Of Interestはサイト内に設置した各ポイントを…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP