携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。
そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんなライブラリを紹介。
公式
https://www.berriart.com/sidr/
インストール
|
1 |
bower install sidr --save |
bowerで上記のようにインストールするかjsとcssをそのままもってくればＯKです。
最小構成ですが、下記のようになります。公式にわかりやすいチュートリアルがあるのでそちらのほうがよいかもしれませんが・・・・(汗)
HTML
|
1 2 3 4 5 6 7 8 9 10 |
ライブラリ読み込み <link rel="stylesheet" type="text/css" href="/css/jquery.sidr.dark.min.css"/> <script type="text/javascript" src="/js/jquery.sidr.min.js"> トリガーにしたい部分はここ <a href="#left-menu" id="left-menu">タグ</a> ・・・・・・・・・・・・・・・・・・・・・・・・・ <div id="sidr-left"> スライドさせたい部分はここ </div> |
JS
|
1 2 3 4 5 6 |
$(function() { $('#left-menu').sidr({ name : 'sidr-left', side : 'left' }); }); |
ちなみに携帯での挙動を見たい場合は以前も紹介しましたが、Firefoxのuser agent switcherがおススメです。
左からのスライドを説明しましたが、もちろん右からも行けます。注意点としてはid名などは自由に決められないようなので、この名称でないと動かないようです。
参考リンク
