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でのfilter

今回はAnuglarでよく使うfilterという機能です。 使いどころとしては入力フォームに対応させて表示項目を絞る、みたいな使い方が一般的かと思います。 一番簡単なものとしては配列があり、入力値にあ …

no image

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

ejsのテンプレート

普段生のHTMLを書く機会はほとんどなく、画面側の仕事でもフレームワークを使うことがほとんどなので搭載されているテンプレートを使っています。 で、生のHTML/CSSの本を読んでいてejsなるテンプレ …

no image

npmコマンドの整理

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