CSS Only Tabs
Published December 30, 2013 | Categories: Cascade CMS
Have you wanted a simple tabbed interface without the use of javascript? There’s an easy way using only CSS. This provides better page load so it doesn’t have to rely on javascript and also prevents the page from jumping when javascript isn’t enabled. The source code below is a simple example.
CSS:
<style>
* { margin: 0; padding: 0; }
body { padding: 1em; font-family: sans-serif; background-color: #777; }
ul { list-style-type: none; }
input[type=radio] { position: absolute; left: -9999px; top: -9999px; }
.tabs { position: relative; z-index: 999; height: 42px; white-space: nowrap; font-size: 0; }
.tabs label { display: inline-block; vertical-align: bottom; margin-right: 4px; margin-bottom: -1px; margin-left: -1px; background: #EEE; padding: 12px 24px; border: solid 1px #DDD; border-radius: 5px 5px 0 0; cursor: pointer; background-color: #EEE; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; box-shadow: 0 -1px 6px rgba(0,0,0,0.1) inset; color: #666; }
.tabs label:first-child { margin-left: 0; }
.tabs label:hover { background-color: #DDD; }
input:nth-child(1):checked ~ .tabs label:nth-child(1), input:nth-child(2):checked ~ .tabs label:nth-child(2), input:nth-child(3):checked ~ .tabs label:nth-child(3), input:nth-child(4):checked ~ .tabs label:nth-child(4) { padding: 14px 24px; border-bottom-color: #FFF; background: #FFF; box-shadow: none; color: #000; }
.sections {} .sections li { display: none; height: 180px; padding: 1em; border: solid 1px #DDD; border-radius: 0 5px 5px 5px; background-color: #FFF; box-shadow: 1px 1px 20px rgba(0,0,0,0.4); }
input:nth-child(1):checked ~ .sections li:nth-child(1), input:nth-child(2):checked ~ .sections li:nth-child(2), input:nth-child(3):checked ~ .sections li:nth-child(3), input:nth-child(4):checked ~ .sections li:nth-child(4) { display: block;}
</style>
<div>
<input type="radio" id="s1" name="s" checked/>
<input type="radio" id="s2" name="s"/>
<input type="radio" id="s3" name="s"/>
<input type="radio" id="s4" name="s"/>
<div>
<label for="s1">One</label>
<label for="s2">Two</label>
<label for="s3">Three</label>
<label for="s4">Four</label>
</div>
<ul>
<li>Section one</li>
<li>Section two</li>
<li>Section three</li>
<li>Section four</li>
</ul>
</div>You can see the demo and also get the source code here.
Recent Posts
