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. Rythim.js

    JavaScript

    音楽のリズムに合わせてボタンなどに躍動感を与える「Rythim.js」

    Rythm.jsは、あなたのホームページに躍動感を与えてくれるjsライ…

  2. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  4. ClassyCountdown

    JavaScript

    スタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」

    ClassyCountdownはシンプルでスタイリッシュな円形カウント…

  5. hoverpulse

    JavaScript

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hoverpulse」

    マウスオーバーで画像が拡大するシンプルなjQueryプラグイン「hov…

  6. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP