このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2012.06.03

CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し

スマートフォンでよくある、ページネーションをjQueryやjQueryMobileやJavaScriptを使わず、CSSのみで作ってみました。

ポイントとしては、アンカータグを使わず、li要素をlabel要素でラップし

チェックボックスにチェックが入るとスライドするように、cssで調整しています。

アニメーションするように-webkit-transition: all ease-in 0.5s;を各コンテンツに指定。

[code].slidearea{
width: 100%;
-webkit-transition: all ease-in 0.5s;
}[/code]

2ページ目、3ページ目はleft:100%;で飛ばしております。

[code].slidearea.a2,
.slidearea.a3{
position: absolute;
top:0;
left: 100%;
z-index: 10;
}[/code]

リストをクリックされると、チェックボックスにチェックが入り、スライドするように以下の設定を行っております。

[code]
.p2:checked ~ .slidearea.a2,
.p3:checked ~ .slidearea.a3{
left: 0;
}
[/code]

とスライドさせています。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

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。