Create a CSS-only Responsive Tabs with Icons
Creating responsive tabs using only CSS can be a fun and effective way to improve the user experience on your website. In this tutorial, we will learn how to create a CSS-only responsive tab system with icons.
Step 1: Set up the HTML structure
First, let’s create the basic HTML structure for our tabs. We will use an unordered list for the tabs and the content will be placed in separate divs.
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-only Responsive Tabs with Icons</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tabs">
<ul class="tab-list">
<li class="tab-item" data-tab="tab1">
<i class="icon icon-home"></i>
<span>Home</span>
</li>
<li class="tab-item" data-tab="tab2">
<i class="icon icon-about"></i>
<span>About</span>
</li>
<li class="tab-item" data-tab="tab3">
<i class="icon icon-contact"></i>
<span>Contact</span>
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="content-item">
<h2>Home</h2>
<p>Welcome to the Home tab!</p>
</div>
<div id="tab2" class="content-item">
<h2>About</h2>
<p>This is the About tab.</p>
</div>
<div id="tab3" class="content-item">
<h2>Contact</h2>
<p>Get in touch with us through the Contact tab.</p>
</div>
</div>
</div>
</body>
</html>Step 2: Style the tabs and content
Now, let’s add some basic styles for the tabs and the content. We will also hide the content initially and display it when the corresponding tab is clicked.
/* CSS */
body {
font-family: Arial, sans-serif;
}
.tabs {
width: 100%;
}
.tab-list {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
}
.tab-item {
padding: 10px;
cursor: pointer;
}
.tab-item:hover {
background-color: #f1f1f1;
}
.icon {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 5px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-home {
background-image: url('home-icon.svg');
}
.icon-about {
background-image: url('about-icon.svg');
}
.icon-contact {
background-image: url('contact-icon.svg');
}
.content-item {
display: none;
padding: 20px;
}
.content-item.active {
display: block;
}Step 3: Add the CSS-only functionality
To create a CSS-only responsive tabs system, we will use the :checked pseudo-class along with radio buttons and labels.
Update the HTML structure:
<!-- HTML -->
<!-- Add the following inside the <head> tag -->
<style>
/* Include the previously created CSS styles here */
</style>
<!-- Add the following inside the <body> tag -->
<divclass="tabs">
<input type="radio" name="tab-group" id="tab-1" class="tab-radio" checked>
<label for="tab-1" class="tab-item" data-tab="tab1">
<i class="icon icon-home"></i>
<span>Home</span>
</label>
<input type="radio" name="tab-group" id="tab-2" class="tab-radio">
<label for="tab-2" class="tab-item" data-tab="tab2">
<i class="icon icon-about"></i>
<span>About</span>
</label>
<input type="radio" name="tab-group" id="tab-3" class="tab-radio">
<label for="tab-3" class="tab-item" data-tab="tab3">
<i class="icon icon-contact"></i>
<span>Contact</span>
</label>
<div class="tab-content">
<div id="tab1" class="content-item">
<h2>Home</h2>
<p>Welcome to the Home tab!</p>
</div>
<div id="tab2" class="content-item">
<h2>About</h2>
<p>This is the About tab.</p>
</div>
<div id="tab3" class="content-item">
<h2>Contact</h2>
<p>Get in touch with us through the Contact tab.</p>
</div>
</div>
</div>Update the CSS styles:
/* CSS /
/ Add the following styles */
.tab-radio {
display: none;
}
.tab-radio:checked + .tab-item {
background-color: #f1f1f1;
border-bottom: 1px solid #fff;
}
.tab-radio:checked + .tab-item + .content-item {
display: block;
}With these changes, the tabs will now function using only CSS. The radio buttons are hidden, and when a label is clicked, the corresponding content is displayed by selecting the adjacent .content-item.
Conclusion:
Creating a CSS-only responsive tabs system with icons is a simple and effective way to improve the user experience on your website. In this tutorial, we learned how to create the HTML structure, style the tabs and content, and add the CSS-only functionality for the tabs. You can now apply these techniques to create your own responsive tab systems with icons.