simpler-sidebar

JavaScript

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

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

simpler-sidebar

デモ

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

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

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

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

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

simpler-sidebar

関連記事

  1. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  2. Emergence.js

    JavaScript

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

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

  3. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  4. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP