How to create awesome responsive CSS3 tabs
In this tutorial we will show you how to create awesome responsive CSS3 tabs to displaying tabbed content using resource only HTML and CSS and no Javascript required. Just follow step by step go make tabs for your website.
Tabs are very useful to display large, lengthy contents on a page. Today we are going to show you how to create a awesome responsive tab box using CSS3. This is certainly a common component found in many websites today.
Implementation:
1. Making index.html file and copy code bellow:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Responsive CSS3 Tabs</title> <meta name="viewport" content="width=device-width" /> <link type="text/css" href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <header> <h1>Responsive CSS3 Tabs</h1> <a href="https://designsmaz.com/create-awesome-responsive-css3-tabs/">Back to article</a> </header> <article class="tabs"> <span id="one" class="anchor"></span> <div class="panel"> <a class="tab-link" href="#one">One</a> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacus turpis, pretium nec iaculis sit amet, scelerisque sed quam. Pellentesque et sapien tellus. Curabitur ultricies blandit quam. Curabitur neque enim, vulputate nec commodo eget, porta vitae massa. Curabitur suscipit malesuada nunc eget egestas. In at sem sed tortor dignissim facilisis. In vitae varius lorem. Nam eros nibh, fringilla vitae molestie quis, tempus ut nibh. Integer risus mi, elementum vel aliquam in, dictum quis leo. Suspendisse feugiat porta purus vitae lacinia. In eget sapien in purus fringilla accumsan id id risus. Suspendisse adipiscing, ipsum nec congue suscipit, arcu neque semper leo, sed pellentesque eros nulla at elit. Quisque id metus ac massa blandit venenatis sit amet ut orci. Mauris ac lorem sem. Aenean tempor nisl erat. </div> </div> <span id="two" class="anchor"></span> <div class="panel"> <a class="tab-link" href="#two">Two</a> <div> Sed mauris eros, accumsan consectetur tempor quis, pulvinar non mi. Etiam placerat ipsum a felis convallis quis aliquet lacus gravida. Cras eget sapien arcu, a pellentesque elit. Duis porttitor urna et velit convallis fringilla. Sed eu porttitor lorem. Aliquam erat volutpat. Etiam egestas pulvinar eros vel convallis. Phasellus viverra posuere nibh vitae luctus. Proin eget nibh ante, ac vulputate felis. Donec aliquet, est sagittis ultricies faucibus, enim tortor malesuada dui, vel tincidunt mauris ipsum at metus. Donec non nunc augue. Ut purus tortor, mattis sit amet suscipit at, volutpat ac justo. Morbi facilisis enim nec leo iaculis aliquam. Vestibulum tempor magna sed ligula consequat sit amet congue est eleifend. Fusce faucibus hendrerit convallis. </div> </div> <span id="three" class="anchor"></span> <div class="panel"> <a class="tab-link" href="#three">Three</a> <div> Vestibulum porta venenatis odio, eu iaculis urna iaculis ut. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tempor, arcu vitae tristique gravida, nibh tortor suscipit sapien, euismod lacinia diam orci id turpis. Fusce ut rutrum lacus. Pellentesque vitae nisi et ipsum posuere eleifend at at magna. Vestibulum libero nibh, rhoncus quis euismod sit amet, mattis sed mauris. Aliquam in quam nisl, non cursus diam. Nam hendrerit, quam eget rhoncus rhoncus, eros est tincidunt tortor, quis posuere purus est vel nunc. Pellentesque hendrerit semper nisl a feugiat. Mauris suscipit eros vel neque ultricies hendrerit. </div> </div> <span id="four" class="anchor"></span> <div class="panel"> <a class="tab-link" href="#four">Four</a> <div> Sed aliquam, erat eget ornare semper, ipsum nisl tristique velit, ac commodo turpis lacus vel ipsum. In accumsan scelerisque lacus quis consectetur. In lobortis volutpat metus, eget rutrum metus viverra. Phasellus dui ligula, imperdiet quis porta id, sagittis ac sapien. Nam mi risus, posuere et tempus ac, lobortis et justo. Cras molestie iaculis nisl et tempus. Sed interdum, ante eget rhoncus semper, tortor velit suscipit enim, vitae sollicitudin libero metus a sem. Quisque consequat porta purus, et suscipit enim porttitor hendrerit. </div> </div> </article> </div> </body> </html>
2. Making file style.css and copy stylesheet bellow:
@charset "utf-8";
/* CSS Document */
.container {
width: 100%;
max-width: 960px;
margin: 50px auto;
font: 90% arial;
}
article, header {
display: block;
}
header h1, header p {
margin:0 auto;
position:relative;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
margin-top: 10px;
}
header a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
.tabs {
width: 100%;
max-width: 600px;
background: #ccc;
margin: 50px auto 0;
position: relative;
}
span.anchor {
position: fixed;
display: none;
}
.panel div {
opacity:0;
background: #eee;
float: left;
width: 100%;
position: absolute;
top: 19px;
left: 0;
padding: 10px;
box-sizing: border-box;
line-height: 1.5em;
border-radius: 5px;
border-top-left-radius: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.panel .tab-link {
margin-top: -20px;
float: left;
width: 20%;
padding: 10px;
background: #eee;
margin-right: .5%;
text-decoration: none;
box-sizing: border-box;
font-weight: bold;
font-size: 1.1em;
color: #333;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.panel .tab-link:visited {
color: #333;
}
.anchor:target + .panel div {
opacity: 1;
background: #ccc;
}
.anchor:target + .panel .tab-link {
background: #ccc;
}
@media screen and (max-width:300px) {
.panel .tab-link {
font-size: 0.8em;
padding: 12px 10px 12px 10px;
}
}
Finish and run your code ! 😀
You might like this: jQuery Responsive Tabs Plugin
Hi,
Using your code for CSS tabs; My Tabbed content overlap any content below, in my case:
content
See screenshot:
https://www.evernote.com/l/ASFOETcmmmhDzZO-E1x9hFjUYzEM4E_awAc
Any advise please?
Thank you,
Hi Schalk,
You can download demo source code then edit you want.
If you want us to check your error please send an html url, we can not check out with just a screenshot.