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. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

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

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  3. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  4. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  5. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

  6. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP