sidebar-nav

JavaScript

ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

sidebar-navはツリー型でレスポンシブに対応したサイドナビゲーションを実装できるjQueryプラグインです。親メニューをクリックすると、子リストが下へスライドで表示されます。操作性もよくとても使いやすいナビゲーションですね。

sidebar-nav

sidebar-nav

PC版では左側に縦に並んだナビゲーションが設置されていて、親メニューをクリックすると子リストが下へのスライドと同時に表示されます。メニューがたくさんあるサイトなどでは、このように予め子リストを非表示にしておくことで、とてもスッキリしたデザインに仕上げれそうですね。

また、デモのsidebar-navはレスポンシブにも対応しているので、ブラウザの画面を縮小していくとモバイル版に最適化されたレイアウトに切り替わるのを確認できると思います。

パソコン、スマホ、タブレットなどいろんなデバイスから見やすいサイドナビゲーションを実装したいという人にはピッタリですね。

というわけで、ツリー型の操作性がいいサイドナビゲーションを探している人は、ぜひsidebar-navをチェックしてみてはいかがでしょうか。

CoutUpCircleカウントアップしてくれるjQueryプラグイン「CoutUpCircle」前のページ

アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」次のページjquery-confirm

関連記事

  1. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  2. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  3. Simple Easy Slider

    JavaScript

    美しいフェードスライダーを実装できるjQueryプラグイン「Simple Easy Slider」

    Simple Easy Sliderは美しいフェードアニメーションによ…

  4. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  5. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

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

    JavaScript

    jQueryの超基本的なアニメーションを試してみる

    jQueryの基本的なアニメーションを試してみました。やっぱりアニメー…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP