simpler-sidebar

JavaScript

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

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

simpler-sidebar

デモ

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

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

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

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

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

simpler-sidebar

関連記事

  1. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  2. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  3. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  4. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  5. AJAX Live Search
  6. Jquery Toast Plugin

    JavaScript

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

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

最近の記事

  1. 梅しば
  2. BM-IBCDH13RD
  3. 雪
  4. ホットのドリップ
  5. めんたいこ&チーズ味 海老せんべい

アーカイブ

PAGE TOP