skillup

技術ブログ

JavaScript デザイン

横からスクロール sidrの使い方

投稿日:

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。

そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんなライブラリを紹介。

公式

https://www.berriart.com/sidr/

インストール

bowerで上記のようにインストールするかjsとcssをそのままもってくればOKです。

最小構成ですが、下記のようになります。公式にわかりやすいチュートリアルがあるのでそちらのほうがよいかもしれませんが・・・・(汗)

HTML

JS

ちなみに携帯での挙動を見たい場合は以前も紹介しましたが、Firefoxのuser agent switcherがおススメです。

左からのスライドを説明しましたが、もちろん右からも行けます。注意点としてはid名などは自由に決められないようなので、この名称でないと動かないようです。

参考リンク

http://www.plusdesign.co.jp/blog/?p=1710

-JavaScript, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

JavaScriptでのオブジェクト指向 クラス作成&インスタンス生成

JavaScriptというと一般的にはjQueryを使って画面の装飾をするスクリプト言語という認識が一般的かと思います。 しかし、JavaScriptでもPHPなどのようにオブジェクト指向的な思想は実 …

no image

HTML/JS/JavaScriptのキャッシュ機能の無効化に関して

AngularJSを使っていまして、更新したのにキャッシュ機能が働いていてブラウザでは変更が反映されてない・・・なんてことがちょいつづき、キャッシュを無効化する機能を調査しました。 まず通常のHTML …