JavaScript

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

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

MultiLevel toggle navigation responsive

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

MultiLevel toggle navigation responsive

デモ

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

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

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

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

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

レスポンシブにも対応

MultiLevel toggle navigation responsive

MacのFinderの共有を削減MacのFinderの共有を削減して表示されないようにする設定方法前のページ

カスタマイズ性に優れたタグ入力ができるJSライブラリ・insignia次のページ

関連記事

  1. zoomwall.js

    JavaScript

    高さを揃えたグリッドレイアウトのLightbox系イメージギャラリー「zoomwall.js」

    zoomwall.jsは高さを揃えたグリッドレイアウトを実装することが…

  2. no-image

    JavaScript

    シンプルで軽量なスクロールアニメーション実装「animateMePlz」

    animateMePlzはシンプルで軽量なスクロールアニメーションを実…

  3. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  4. JQuery Clock

    JavaScript

    シンプルなアナログ時計を実装できる「JQuery Clock」

    JQuery Clockはシンプルなアナログ時計を実装できます。画像を…

  5. no-image
  6. Brusher

    JavaScript

    インタラクティブな背景を実装できる「Brusher」

    Brusherはインタラクティブな背景を実装できる軽量なJavaScr…

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP