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

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

vueのコンポーネント化

vueの記事をポツポツ上げてきましたが、コンポーネント化した書き方に関して。 既存のvueの記事 Vue.jsについて vueの環境構築 今まではCDNで読み込んだり、HTMLの中に直接vueを入れて …

no image

JavaScriptのcookieに関して

今までCookieの管理などはPHP側でやることが多かったのですが、JavaSciprtで実行することも可能です。 設定に関してはkey=value形式で突っ込めばOKです。 [crayon-5f69 …

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …