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

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

JavaScriptのコールバック関数について

JavaScriptでのコールバック関数について。 たまにでてきますが、これまた慣れないと手間取ります。 コールバック関数に関してまとめると以下のような感じでしょうか。 ある関数(func1)の引数と …

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

アーカイブ