Pro HTML5 and CSS3 Design Patterns

CHAPTER 17 ■ LAYOUTS

Tabs

HTML

<h1>Tabs</h1>

<ul class="tabs">

<li class="selected"><h3 class="tab-label"><a href="example.html">Tab 1</a></h3>

<div id="section1" class="tab-content"><div class="oi2">

<h4>Tab 1 Content</h4><p>This is the message of tab 1. More message...

</p></div></div></li>

<li><h3 class="tab-label"><a href="example2.html">Tab 2</a></h3>

<div id="section2" class="tab-content"><div class="oi2">

<h4>Tab 2 Content</h4><p>This is the message of tab 2.

</p></div></div></li></ul>

CSS

/* All rules from the Tab Menu design pattern apply to Tabs.

Only additional rules that apply to this design pattern are shown here. */

ul.tabs { position:relative; }

ul.tabs .tab-content { position:absolute; width:100%; height:6em;

border:1px solid gold; border-top:none;

left:-99999px; overflow:auto; }

ul.tabs li.selected .tab-content { left:0; }

ul.tabs li .oi2 { margin:10px; padding:10px; }

ul.tabs .tab-label a { display:block; text-decoration:none; color:black; }

ul.tabs .hover,

ul.tabs .tab-label:hover { text-decoration:underline; }

/* Nonessential rules are not shown. */