JavaScript

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

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

MultiLevel toggle navigation responsive

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

MultiLevel toggle navigation responsive

デモ

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

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

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

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

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

レスポンシブにも対応

MultiLevel toggle navigation responsive

関連記事

  1. JavaScript

    とてもシンプルで綺麗なツールチップを簡単に実装することができるjQueryプラグイン「gips」

    使いやすさや見た目もシンプルで綺麗なツールチップを実装することができる…

  2. Sliding Panels Template
  3. JavaScript

    JavaScriptの関数のスコープについてちょっと確認してみる

    JavaScriptの関数のスコープを確認、整理する意味で記事にしてみ…

  4. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

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

    JavaScript

    jQueryのマウス操作のイベントをまとめてみる

    マウス操作に関するイベントをまとめてみました。まとめたイベントはmou…

最近の記事

  1. CITTA TT5.0
  2. Kindle Oasis
  3. OWL-WDDESK01
  4. ワンタッチ着脱フィルターキット

アーカイブ

PAGE TOP