スマホのブラウザ・サイドナビ

BootstrapとjQueryプラグイン「 bootstrap.offcanvas.js」を使って、スマホのブラウザ用のサイドからスライドするナビゲーションです。 PCの横幅があるブラウザ画面では、上部いっぱいに横並びナビゲーションが展開されますが、画面幅を縮めていき、780px程度以下の画面になると、上部のナビゲーションが消え、右上、もしくは左上、または両方(このサンプル)にナビゲーションのアイコンナビアイコン が表示されます。それをクリック、またはタップすると、横からナビゲーション画面がスライドしてきます。

このサンプルのケースでは、左上アイコンをクリック(タップ)すると、左から、同様に右上アイコンでは右からそれぞれスライドしてきます。閉じる場合は、閉じる「x」ボタン、またはナビゲーション画面以外をクリック(タップ)します。

※参照元:http://iamphill.github.io/Bootstrap-Offcanvas/

 

戻るボタン