simpler-sidebar

JavaScript

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

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

simpler-sidebar

デモ

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

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

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

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

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

simpler-sidebar

Emergence.jsブラウザで要素の可視性を検出する「Emergence.js」前のページ

スクエアなグリッドレイアウトを実装できる「jquery.square.js」次のページjquery.square.js

関連記事

  1. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  2. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  3. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  4. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

  5. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  6. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

最近の記事

  1. COMOLI ベタシャンCPOシャツ(サックス)
  2. ハワイアナス ビーチサンダル
  3. 蓮の花
  4. チキンアラビアータ 石窯フィローネ
  5. ユニクロ ポロシャツ

アーカイブ

PAGE TOP