JavaScript

マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションがあったのでご紹介します。ユーザーが使いやすくなるような便利な機能が色々と備わっています。PCやスマフォで使えるナビゲーションメニューを実装したい時によさそうです。

MultiLevel toggle navigation responsive

以下は実際のデモになります。

MultiLevel toggle navigation responsive

デモ

メニューが階層化されている場合は、カーソルを乗せると子メニューが表示されます。親メニューの横には階層化を表すアイコンが表示されているんですが、これをクリックとメニューを固定表示できる仕組みになっています。

マルチレベルタイプのナビゲーションってカーソルを離したとたん全部消えちゃってまた一からカーソルを乗せていかなきゃいけないパターンが多いですが、それを固定することでこういった問題を解決しています。

アイコンをクリックして固定すると水平マークから垂直マークに切り替わります。

水平マークから垂直マークになる

レスポンシブになっているので、こんな感じでスマフォでも快適にナビゲーションを操作することができます。以下はiPhoneで確認してみました。

レスポンシブにも対応

MultiLevel toggle navigation responsive

関連記事

  1. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  2. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

  3. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  4. jsPanel

    JavaScript

    高度なセッティングができるフローティングパネルやモーダルウィンドウ実装「jsPanel」

    jsPanelは高度なセッティングができるフローティングパネル、モーダ…

  5. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  6. HoldOn.js

    JavaScript

    ユーザーの待機中に表示させるアニメーション実装「HoldOn.js」

    HoldOn.jsはユーザーが待機している間に表示させるアニメーション…

最近の記事

  1. カメラマングローブ Grip Hot Shot III
  2. 包(つつむ)巾着ポーチ
  3. KMC-80BK
  4. 味噌ラーメン〜旨辛にんにく味噌〜

Instagram始めました

Facebookページ

PAGE TOP