NiceSnippets.com
Html custom tab design usign pure css
This is html div tab design usign pure css. this tab design demo without javascript or other plugins. this is pure css tab desing demo. when you click on tab then is tab also selected after open. In this demo we create horizontal tab design. this work smotly and fast. it can not take time into load.
We allows to free snippets of tabs in html using css example , you can download full code of html tabs example with code layout. Here in this post i will give you example of simple css tabs snippet and you will get simple code of html, css and jquery. In html tabs without javascript snippet i give you three tab with html, css and js, you can easily get code of tab menu in html layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
</head>
<body>
<div class="tabs">
<ul role="tablist">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1" role="tab" aria-selected="true" aria-controls="panel1" tabindex="0">Step 1</label>
<div id="tab-content1" class="tab-content" role="tabpanel" aria-labelledby="description" aria-hidden="false">
<p>
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2" role="tab" aria-selected="false" aria-controls="panel2" tabindex="0">Step 2</label>
<div id="tab-content2" class="tab-content" role="tabpanel" aria-labelledby="specification" aria-hidden="true">
<p>
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3" />
<label for="tab3" role="tab" aria-selected="false" aria-controls="panel2" tabindex="0">Step 3</label>
<div id="tab-content2" class="tab-content" role="tabpanel" aria-labelledby="specification" aria-hidden="true">
<p>
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
*{
margin:0px;
padding: 0px;
font-family: 'Abel', sans-serif;
color:#fff;
}
body{
background: #9b59b6;
}
.tabs{
position: relative;
text-align: left;
width:80%;
margin: 0 auto;
margin-top:30px;
}
.tabs li {
float: left;
display: block;
}
.tabs input[type="radio"] {
position: absolute;
top: 0;
left: -9999px;
}
.tabs label {
position: relative;
display: block;
padding: 14px 21px;
border-radius: 2px 2px 0 0;
font-size: 20px;
background: #8e44ad;
cursor: pointer;
top:5px;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #703688;
}
.tabs .tab-content {
position: absolute;
z-index: 2;
display: none;
line-height: 25px;
padding: 25px;
top: 53px;
left: 0;
background: #612e76;
}
.tabs [id^="tab"]:checked + label {
top: 0;
padding-top: 17px;
background: #612e76;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block;
}
