CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し
2012.06.03
この記事は最終更新日から1年以上が経過しています。
スマートフォンでよくある、ページネーションをjQueryやjQueryMobileやJavaScriptを使わず、CSSのみで作ってみました。
ポイントとしては、アンカータグを使わず、li要素をlabel要素でラップし
チェックボックスにチェックが入るとスライドするように、cssで調整しています。
アニメーションするように-webkit-transition: all ease-in 0.5s;を各コンテンツに指定。
.slidearea{
width: 100%;
-webkit-transition: all ease-in 0.5s;
}
2ページ目、3ページ目はleft:100%;で飛ばしております。
.slidearea.a2,
.slidearea.a3{
position: absolute;
top:0;
left: 100%;
z-index: 10;
}
リストをクリックされると、チェックボックスにチェックが入り、スライドするように以下の設定を行っております。
.p2:checked ~ .slidearea.a2,
.p3:checked ~ .slidearea.a3{
left: 0;
}
とスライドさせています。92行目
チェックボックスを非表示するには、-webkit-appearanceを加えて非表示にしております。
詳しくはCSSでフォームパーツ(input,checkbox,etc…)をカスタマイズを参考に。
CSS3のみで Ajax風ページネーション JavaScript無し – jsdo.it – share JavaScript, HTML5 and CSS
CSS3のみで Ajax風ページネーション JavaScript無し – jsdo.it – share JavaScript, HTML5 and CSS
