simpler-sidebar

JavaScript

シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

simpler-sidebarは、シンプルでスタイリッシュなサイドナビゲーションを実装することができるjQueryプラグインです。モバイルアプリっぽいデザインで、操作もしやすくとても使いやすいナビゲーションです。

simpler-sidebar

デモ

デモページでは左上にハンバーガーアイコンが設置されていて、ここをクリックすると左からスライドアニメーションとともにナビゲーションが表示されます。ナビゲーションが表示されている間は、ナビゲーション以外のところにオーバーレイがかかるのでナビゲーションに集中しやすくなります。

ナビゲーションの外をクリックすると、スライドしながら元の状態に戻ります。

メニューアイコンはページをスクロールしても固定された位置のままなので、いつでもナビゲーションにアクセスすることが可能です。クリックしないとナビゲーションが表示されないので、Webページのデザインをスッキリさせたい時にはピッタリですね。

また、右上にもナビゲーションのアイコンがあり、ここからでもナビゲーションを表示させることができます。こちらは先ほどとは逆に右からスライドで表示されます。

simpler-sidebarの使い方やマークアップもシンプルに記述できるのでわかりやすいのがいいですね。オプションには、selectors、animation、sidebar、maskといった項目が用意されています。

simpler-sidebar

関連記事

  1. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  2. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  3. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  4. Instafeed.js

    JavaScript

    Webサイト内にInstagramの画像を表示できる「Instafeed.js」

    Instafeed.jsはWebサイト内にInstagramの画像一覧…

  5. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  6. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

最近の記事

  1. LE エルイー 6 PANEL CAP
  2. タリーズ ハウスブレンド
  3. BAG-TW1BKシリーズ
  4. 落ち葉と雪

アーカイブ

PAGE TOP