May 22, 2024
HTML CSS Tabs
seen from China
seen from United States
seen from Italy
seen from Germany
seen from Saudi Arabia
seen from Malaysia
seen from China
seen from Denmark
seen from Pakistan
seen from China
seen from Malaysia
seen from China
seen from South Korea
seen from United States
seen from Denmark
seen from Germany
seen from Qatar
seen from United States
seen from United States
seen from Malaysia
HTML CSS Tabs
12 CSS Tabs. Collection of free HTML and pure CSS tabs. Update of May 2018 collection. https://freefrontend.com/css-tabs/
Pure HTML CSS Tabs Design
29 CSS Tabs
Collection of HTML and CSS tabs. Update of September 2017 collection. 5 new examples. http://freefrontend.com/css-tabs/
Responsive Tab Design CSS
In this pure CSS tab tutorial we design simple css tabs menu without JS with :target and radio button. Example of tabs with HTML and CSS code is included.
css tab menu
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.
Reblog/Like if you found it useful