simpler-sidebar

JavaScript

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

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

simpler-sidebar

デモ

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

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

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

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

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

simpler-sidebar

関連記事

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

    JavaScript

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方

    jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり…

  2. Filterable Product Grid
  3. jQuery Brazzers Carousel Plugin
  4. Smooth Scroll behavior polyfill
  5. Jqx-Media-Slider
  6. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP