Tabs menu is a way to group together your content so that your web site visitors could easily locate them. They provide a convenient way to navigate within the pages. You can find lots of way to design tabs menu. You can opt for verticals tabs, horizontal tabs, bottom tabs, tabs with pictures, icon tabs etc. These designs could well be based on what you’ve planned your website to look like or how you desire to organize your contents. After that, you will have more development decisions to make. You can use JS, jquery, bootstrap and other related frameworks. However in this tutorial, we will be using pure HTML and CSS to build icon tabs menu. We will be working on a tabs menu example using HTML and CSS by making use of radio button that could be exploited to act as a tab menu with icon from font-awesome.
CSS Icon Tab Menu Tutorial with Example
With that known, lets get on to interesting stuff that you’ve actually come here for.
Step 1: Preparing the Basics
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
To make an icon tab, first of all we need icons and for that we won’t be using any icon images but rather link the above CDN link to our application. It is recommended to add the above link in the head section of the HTML structure.
<h1>Tabs with font-awesome icon</h1>
<ul class="tabs">
<li class="tab">
<input class="radioClass" type="radio" name="tabs" checked id="tab1" />
<label for="tab1">
<i class='fab fa-html5'></i>
<p>HTML</p>
</label>
</li>
<l>Now that we have added icon on our application. Lets focus on building the tab menu on our HTML first, before adding CSS codes. In this example, as we’ve already mentioned, we will be exploiting radio button’s exclusive feature that is to restrict the selection of single button among the group fo buttons under the same name to build tab feature with just CSS. So in the above HTML code we’ve added an input of type radio. Then we’ve used an icon for HTML from font-awesome. Here we’ve used list as later on we’ll be adding more list items to include each radio buttons. Though for now considering the simplicity, we’ve used a single radio button only.
<div class="bg" id="html-bg"></div>Now that we have our very own radio button. The above code prepare a div block in HTML which could be further enhanced with pure CSS to cover the background of our icon tabs menu example.
Step 2: Styling the Div Block
.bg{
z-index: -1;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
opacity:0
}
#html-bg{
background-color:#0A4A8A;
}In previous step we’ve structured a basic radio button with a div block for background setting. Yes, we could have simply set the body background but to show the tab effect we’ll be changing the background of the page and since changing body with CSS seemed more complex we are using div block. The div block would assist us in the deemed process. So, the above CSS positions div block on absolute position from where we could extend it to cover the whole page. The use of z-index is to stack the div block behind the overall picture of our webpage so that the div wouldn’t block the development process as all the other elements would be stacked on top of it with default z-index value 0.
We’ve also set the opacity of the block to zero removing it from the display. But for the sake of following along and learning how the div block exists in our tabs menu example, set the opacity to 1 for now in the above CSS. However later on we will be setting the opacity to 0. The reason behind this will be explained later in step 9.
Step 3: Removing the Default Feature
If you are still following with the tutorial, with just basic CSS and HTML you’ve got the basic webpage of icon tabs menu as depicted above with just one radio button to act as a tab. Now, that’s just a sad presentation. We’ve got a lot to enhance.
Okay, Now first of all let’s get rid of the default list styles and the radio button’s default circle structure. The following CSS code does just that.
.tabs .tab{
overflow: hidden;
}
.tabs .tab .radioClass{
display:none;
}Step 4: Arranging the Elements
h1{
font-family: 'Saira Stencil One', cursive;
color:yellow;
text-align:center;
margin-top:10%;
}
.tabs{
display:flex;
flex-direction:row;
justify-content: center;
text-align:center;
}Since all the elements are positioned static at beginning, let’s manipulate them to arrange them as we desire. With some styling above we can manage to align them to center. We’ve used flex display and used its feature to arrange the list item which for now is just a single button but with more icons they arrange like tabs menu. Go on, try adding more tabs. If you plan to follow along, we will be adding more icons ,to act as tabs menu, on html structure later on as we’ve finished discussing the CSS section.
Step 5: Styling the Icon & Label
Lets face it, the icon doesn’t look so nice. Does it? So, Let’s experiment with some CSS properties of icon to see if we can come up with a better tab like menu design. In this example, I’ve developed the following CSS, that pretty much can look like a icon tab. Or.. At least I think so. If you don’t, feel free to comment or add your own designs.
.fab{
font-size:75px;
width:85px;
height:85px;
color:white;
box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3);
border-radius:50%;
transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tabs .tab label {
display: block;
padding:4vw;
cursor: pointer;
color: grey;
}
p {
margin-top:0px;
} The above code is just product of my experimentation.Ah! the transition.. They are for animating the changes during hovering and highlighting steps. Font size scales the icon while the width and height are kept same to make the icon have a squared shaped block. The square block would help us further in developing circle like structure when its border-radius is set to 50%. For now, no such effects are seen but they will be used in next step.
If you’ve followed along this tutorial, This is what you must have achieved till now as a icon tabs menu with basic CSS:
Step 6: Adding the Hover Effect to CSS Icon Tab
.fab:hover{
box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.3);
background-color:rgba(255, 255, 255, 0.3);
}
.fab:hover ~p{
margin-top:30px;
color:white;
transition:all 1s;
}With hover pseudo class selector, interaction to your page becomes more interesting. The first block of CSS code adds a shadow to our icon and sets the background-color of the icon just as same as the color of our shadow so that no distinction could be seen between the icon and it’s shadow. The second block makes use of tilde(~) selector which selects the sibling of the hovered icon for styling. Here, we’ve just increased margin, changed the color and added transition for animating the effect.
Step 7: Highlighting the Selection
Having added the hovering effect, Now it’s time to add some highlights in our CSS to show the selection of particular tab among the icon tabs menu.
.tabs>.tab .radioClass:checked + label>.fab{
box-shadow: 0 0 0 14px #4DDFDC;
background-color:#4DDFDC;
color:black;
transform:scale(1.05);
}The above CSS might contains a mixture of + and > selectors. As we select particular radio its state will be checked. Then the + selector selects the immediate element (label) of selected radio button. Then again the > selector selects the direct child of the label element and styles it. Phew!! that was hard. Lets break it by using a example, the HTML radio if checked then the CSS selects its corresponding label by + selector then by > selector its child element, which in this case is icon of class fab for html, is selected. Once the icon is selected the shadow effect from the hover effect is retained while changing the background, color and scaling it by a small amount. That should differentiate it from the rest icon tabs menu, right??
.tabs>.tab .radioClass:checked + label {
color:white;
}
.tabs>.tab .radioClass:checked + label>p {
margin-top:30px;
}Okay, that wasn’t enough, the label below look congested so above styling is used. I will leave this up to you to understand by yourself. It’s simple.
Step 8: Adding CSS Icon Tabs
Okay, Now we have a tab with hover and highlighting effects coded in our CSS but to see how it works like a tab, we need to add some more icon on our HTML structure. If you haven’t done that yet, then the add the following code:
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab2" />
<label for="tab2"><i class='fab fa-css3'></i> <p>CSS3</p></label>
<div class="bg" id="css-bg"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab3" />
<label for="tab3"> <i class="fab fa-node-js"></i><p>Node</p></label>
<div class="bg" id="js-bg"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab4" />
<label for="tab4"><i class="fab fa-bootstrap"></i><p>Bootstrap</p></label>
<div class="bg" id="bootstrap-bg"></div>
</li>As you reach here, You should see the page display like the one below. The example sure does look like tabs menu and it is built entirely with HTML and CSS. Give yourself a pat but yet remains the final test of the tab feature.
Step 9: Displaying the Tab Feature
Up till here, You’ve styled the radio button but lets face it this tutorial is about icon tabs menu just CSS, So yet still the major part to show the tab effect remains. The code below gives background-color to each div element attached with each radio button.
#js-bg{
background: linear-gradient(to right, #11998e, #38ef7d);;
}
#css-bg{
background:linear-gradient(to right, #00f260, #0575e6);;
}
#bootstrap-bg{
background:linear-gradient(to right, #800080, #ffc0cb);;
}In step 2 the bg class selector had a property property opacity which we had set it 1 for the sake of the development flow. But Now, set the opacity to 0 so that though every div are stacked on the same position, they aren’t displayed. However,We are now changing the opacity of the background to 1 as the radio button get checked which hence displays the appropriate background as indicated by the code below:
.tabs>.tab .radioClass:checked + label + .bg{
opacity:1;
transition:opacity 1s ease;
}Now, If you see the transition effect, you can see the abrupt background transition that’s because our body has default white background and as the background of div block transitions, it transitions from the white background to the set color. So lets add the following line of code.
body{
background-color:#0A4A8A;
}Viola! we’ve come to the end of our tutorial and finally developed a example of icon tabs menu with pure HTML and CSS using radio button as a tab.
Complete Icon Tab Menu Code
If you’ve jumped right to the button, then seriously I don’t wanna disappoint you. So yeah, here you have it the complete code of pure css and html to build icon tabs menu. Enjoy!
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css">
<h1>Tabs with font-awesome icon</h1>
<ul class="tabs">
<li class="tab">
<input class="radioClass" type="radio" name="tabs" checked id="tab1" />
<label for="tab1">
<i class='fab fa-html5'></i>
<p>HTML</p>
</label>
<div class="bg" id="html-bg"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab2" />
<label for="tab2"><i class='fab fa-css3'></i> <p>CSS3</p></label>
<div class="bg" id="css-bg"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab3" />
<label for="tab3"> <i class="fab fa-node-js"></i><p>Node</p></label>
<div class="bg" id="js-bg"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab4" />
<label for="tab4"><i class="fab fa-bootstrap"></i><p>Bootstrap</p></label>
<div class="bg" id="bootstrap-bg"></div>
</li>
</ul>CSS
@import url('https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap');
body{
background-color:#0A4A8A;
}
h1
{
font-family: 'Saira Stencil One', cursive;
color:yellow;
text-align:center;
margin-top:10%;
}
p {
margin-top:0px;
}
.bg{
z-index: -1;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
opacity:0;
}
.tabs{
display:flex;
flex-direction:row;
justify-content: center;
text-align:center;
}
/*==================================================
Removing the default bullets and checkbox
=================================================*/
.tabs .tab{
overflow: hidden;
}
.tabs .tab .radioClass{
display:none;
}
/*==================================================
styling the icon and label
=================================================*/
.fab{
font-size:75px;
width:85px;
height:85px;
color: white;
box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3);
border-radius:50%;
transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.tabs .tab label {
display: block;
padding:4vw;
cursor: pointer;
color: grey;
}
/*==================================================
Effects to show when mouse hovers over the menu
=================================================*/
.fab:hover{
box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.3);
background-color:rgba(255, 255, 255, 0.3);
}
.fab:hover ~p{
margin-top:30px;
color:white;
transition:all 1s;
}
/*==================================================
Effects to show when a radio is selected
=================================================*/
.tabs>.tab .radioClass:checked + label>.fab{
box-shadow: 0 0 0 14px #4DDFDC;
background-color:#4DDFDC;
color:black;
transform:scale(1.05);
}
.tabs>.tab .radioClass:checked + label {
color:white;
}
.tabs>.tab .radioClass:checked + label>p {
margin-top:30px;
}
.tabs>.tab .radioClass:checked + label + .bg{
opacity:1;
transition:opacity 1s ease;
}
/*==================================================
Background color for each different div
=================================================*/
#html-bg{
background-color:#0A4A8A;
}
#js-bg{
background: linear-gradient(to right, #11998e, #38ef7d);;
}
#css-bg{
background:linear-gradient(to right, #00f260, #0575e6);;
}
#bootstrap-bg{
background:linear-gradient(to right, #800080, #ffc0cb);;
}Moving on…
Don’t just yet settle with one experiment, there are lots of way to design and develop icon tabs menu and not just with pure CSS as coded in the example. Go for more advanced dynamic approach with javascript or jquery. And for icons there are several of them available in internet, you can use icons from iconicons, material designs, bootstrap, google icons etc.
As for tab effect, We’ve managed to exploit the feature of radio button. But as you move on yo can go for the user of :target pseudoclass selectors as well. Also in place where we’ve added opacity to display the tab feature we could make use of display and z-index property as well but they don’t go so well with the animation, So, here I’ve used opacity. Congrats, You made through! That’s it for now.