Creating Tabs With CSS
Creating Tabs With CSS
Creating tabs is usually more popular using jquery, but actually it’s enough with css that we can create tabs that are no less good.
tabs-css
In this article, we will briefly explain how to create tabs using only css, without the help of jquery or other javascript.
HTML Structure
First, let’s create the HTML structure
Web Design.com Tutorials
CSS Tabs
<h3>Welcome TWDers</h3>
<p>Content....</p>About TWD
Content….
Contact TWD
Content….
Social Media
Content…
It can be seen in the script above, to create the title of the tab we use input tags and labels, in this example we create 4 tabs, where each tab is given the ID tab1, tab2, tab3, tab4
Meanwhile, the content of each tab is created with section tags, each of which has an ID content1, content2, content3, content4.
Styling with CSS
After we create the html structure of the tab, of course it will not be in the form of a tab, it needs to be designed or styled using css, this is the css code that we use
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
backgrounds: #5B264E;
font-family: “Open Sans”, “Arial”;
}
a{
text-decoration: none;
colors: #000;
}
a:hover{
color: #B7977B;
}
play {
background: #FFF;
width: 500px;
margins: 50px auto;
padding: 10px 30px 80px;
box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}
p {
font-size: 13px;
}
/* Important codes */
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
border-top: 2px solid transparent;
border-right: 1px solid transparent;
border-left: 1px solid transparent;
border-bottom: 1px solid #DDD;
}
label:hover {
cursors: pointers;
text-decoration: underline;
}
tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
display: block;
}
input:checked + label {
border-top-color: #B7977B;
border-right-color: #DDD;
border-left-color: #DDD;
border-bottom-color: transparent;
text-decoration: none;
}
CSS Code for Tab
The most important thing to note in the code above is the code that we marked with /* Important Code */ until the end.
Where is the code that changes the input tag to a tab, why use radio type input? because tabs usually only have one active section while the others will be closed, for that only radio type inputs are allowed to be selected like that.
So the logic is as simple as this: the section tag when loading will be hidden, when one of the tab IDs is active (one of the radio inputs is selected), the contents of that ID will be displayed, using the display:block command.
Demos and codes
You can see the demo and also download the source code at the link below
Thus our tutorial this time, greetings web design & development Indonesia.
If you are interested in being a guest writer on this website, please register immediately and write your interesting articles that are fresh and have never been posted anywhere before.