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. jQuery Panelize Plugin
  2. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  3. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  4. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  5. countdownCube

    JavaScript

    3Dキューブのように回転するカウントダウンタイマーを実装できる「countdownCube」

    countdownCubeは3Dキューブのようにクルッと回転するカウン…

  6. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP