[CSS]スクリプト無しで実装する、タブUIのスタイルシート
Post on:2010年3月10日
sponsors
パネルをタブで変更するUIをスタイルシートで実装するチュートリアルをCSS-Tricksから紹介します。
使用しているCSSはCSS3で、デモページは対応ブラウザでご覧ください。
※キャプチャはChrome
タブの実装は、タブがリスト要素、パネルがdiv要素で、下記のものがベースとなっています。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="tabbed-area"> <ul class="tabs group"> <li><a href="#box-one">Tab 1</a></li> <li><a href="#box-two">Tab 2</a></li> <li><a href="#box-three">Tab 3</a></li> </ul> <div class="box-wrap"> <div id="box-one"> <!-- box two content --> </div> <div id="box-two"> <!-- box two content --> </div> <div id="box-three"> <!-- box two content --> </div> </div> </div> </textarea> |
タブのハイライト処理もCSSで行われています。
ただし、一点だけ積み残しがあり、タブの切り替えにハッシュ「#box-one」を使用しているため、ページ内アンカーが有効になってしまいます。
現時点ではページの下部に配置することで、とりあえず移動はなくなります。
sponsors
