JavaScript

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

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

MultiLevel toggle navigation responsive

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

MultiLevel toggle navigation responsive

デモ

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

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

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

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

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

レスポンシブにも対応

MultiLevel toggle navigation responsive

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

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

関連記事

  1. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  2. Sliding Panels Template
  3. JavaScript

    レイアウトを超簡単に雑誌風に整列してくれるjQuery Masonryの使い方

    jQuery Masonryというプラグインを使えば、ものすごく簡単に…

  4. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  5. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  6. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP