#css tabs

Tutorial: CSS tabs by phoenixthemes (robbarya)

So I had a few people asking how to work with css tabs as seen in my tags pages 3 and 4. Here I'm gonna show you the basic markup and how to customize it, so you'll have to have some css/html knowledge to understand it. This is meant to be used as a base, please don't claim the styling as your own.

Why CSS tabs?

Personally I think they are the perfect way to organize a good amount of content keeping the page clean and simple, especially because it doesn't require any kind of script.

Preview

STEP 1: HTML

<div class="main"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">Tab 1</label> <div class="content"> Tab 1 content </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">Tab 2</label> <div class="content"> Tab 2 content </div> </div> </div>

Each tab is wrapped in the <div class="tab"> and inside it we have the <label> and the <div class="content">. The label will be the one you click to see the content.

The checked attribute selects which tab will be open when refreshing the page. It can only be used in ONE tab (usually the first one). If you delete it, no tab will be checked

Note:

This is only two tabs but ,as you can see, you can add as much as you want, always changing the id="tab-1" for anything else. In my case I increase the number. Note that you have to change the <label for="tab-1"> aswell.

STEP 2: The CSS

2.1 Here we have the main styling. I always set the label to display:block and to cursor:pointer so you know it's clickable. You can style it as any other div.

.main { padding:20px; width: 240px; margin: 200px auto; background: #eee; border:1px solid #e2e2e2; } .tab { width:400px; margin: 0 auto; } .tab label { color: #999; letter-spacing: 2px; font-size: 8px; line-height: 14px; font-weight: bold; background-color: #ffffff; width:100px; padding: 5px; text-transform: uppercase; height: 15px; text-align: center; cursor: pointer; display: block; margin-bottom: 5px; } .tab label:hover { background: #333; color:#fff; }

2.2 This part sets the styling of the checked label and hides the default check button.

[type=radio]:checked ~ label { z-index: 2; color: #fff; background: #afd5d5; } .tab [type=radio] { display: none; }

2.3 Here is the content styling. You'll have to adjust the margins and such. The last part indicates the behaviour of the content when the tab is checked. In this case I increase the index for it to hide the rest of the tabs. You can also change it's opacity, color, etc

.content { color: #999; background-color: #ffffff; width: 100px; margin-top: 190px; margin-left: 115px; height: 65px; padding: 10px; overflow: scroll; text-align: justify; position: absolute; top:30px; } .content a { color: #999; padding: 3px; font-size: 8px; margin-bottom: 2px; display: block; text-decoration: none; text-transform: uppercase; } .content a:hover { letter-spacing: 2px; border-bottom: solid 2px #666; text-align:center; color: #666; font-weight: bold; padding: 2px; } [type=radio]:checked ~ label ~ .content { z-index: 1; }

Notes:

1. I always use position:absolute for the content so they all have the same position and hide eachother. You can also set them to display:hidden and then to display:block when the tab is checked. You know, just try different things.

2. Some css pseudo classes might not work in older browsers

I don't know if I forgot something but if I did I will edit this post! 

Feel free to ask if there's something you didn't understand or if I messed up but please don't ask me to help you customize this for you.

This tutorial is based on this article you can read to know a little more.