Responsive Multi Menu

JavaScript

モバイルデバイスにも最適化されたナビゲーション実装「Responsive Multi Menu」

Responsive Multi Menuはレスポンシブ対応でモバイルデバイスにも最適化されたナビゲーションを実装することができるjQueryプラグインです。軽量、ユーザーフレンドリーで使い方も簡単なのが特徴的です。HTML5、CSS3、jQueryを使って実装します。

Responsive Multi Menu

Responsive Multi Menu

上記のページにはモバイル版のデモも用意されています。

MENUをクリックすると多階層になっているメニューが表示されます。複雑なアニメーションなどは全くなく、シンプルに表示・非表示を切り替えたりすることができるので、ユーザーにとっては使いやすいですね。

PC版ではメニュー項目に下の階層を示す矢印がある場合は、マウスオーバーすることでその下の階層にあるメニューが表示されるようになっています。

PC、モバイルともにシンプルですが、動作も軽量で余計なアニメーションもなく実用度は高そうですね。

マークアップも非常にスッキリしていて分かりやすく、そして実装しやすいと思います。

レスポンシブ対応でスマホにも最適化されたナビゲーションを取り入れたい場合は、ぜひ選択肢の候補に入れておきたいところです。

WD_ImageStax山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」前のページ

親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」次のページscroll-scope.js

関連記事

  1. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  2. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  3. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  4. SweetDropdown

    JavaScript

    スタイリッシュで多彩なドロップダウンを実装できる「SweetDropdown」

    SweetDropdownは、多彩なドロップダウンを実装することができ…

  5. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  6. no-image

最近の記事

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

アーカイブ

PAGE TOP