CSS Only Tabs

By | 2017-06-16T13:05:42+00:00 December 30th, 2013|Categories: Cascade CMS|Tags: , , , , |

Est. Reading Time: 1 minute

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.



* { 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;}



You can see the demo and also get the source code here.

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.