Tabs provide a simplistic approach to organize and manage your contents in a web page without having to navigate though loads of pages. As the application of single page web pages are increasing, tabs supplement to the growing application by providing in-site navigation medium. When designing tabs you may come across several brilliant design ideas. You can design in variety of ways. Designs for icon tabs menu, vertical tabs menu, horizontal tabs menu and many others are readily available on internet. After you’ve decided for the designs, then comes the decision for development tools. Most developers prefer using javascript with html and css to built mobile bottom navigation tabs. However In this tutorial we are developing a simple example of mobile bottom navigation tabs with pure CSS and html.
Whenever a visitor visits your site, the most important thing that the user scans on your site is the readability. With proper content organization managed under a common theme or group, the relevant content could be easily accessible and readable that too in a single page. This is where tabs come handy.
Learn to Make Bottom Navigation Tabs with HTML and CSS
Okay! with the basics known, lets get on to understand the core concept that we will be implementing on our tutorial. First of all, lets make it clear that we won’t be using any extra frameworks but rather exploiting some hacks of CSS and HTML in this tutorial to build bottom tabs navigation menu.
Step 1: Basic HTML – Radio Button
The feature of radio button that is the activation of only one button amongst the group of radio button under same name will be exploited to use as our tab feature. So, Lets build a basic radio button with our CSS
<input class="radioClass" type="radio" name="tabs" checked id="tab1" />
<label for="tab1">HTML</label>Simple as that! This radio button on our HTML will act as our menu tab for bottom tabs navigation customized with CSS.
Remember to add the value for name attribute so as to group all other buttons under the same name.
Okay, We want to display something as this button gets clicked that means when the corresponding radio button gets selected. So, lets add some images and text to be displayed.
<div class="content">
<img src="https://materializecss.com/images/sample-1.jpg">
<p>Hello there amigo. This is an example of bottom tab navigation
built with Just CSS and HTML.</p>
</div> I’ve added all these above html code under a list tag as we will be adding more buttons. So have a look at my basic html structure.
<ul class="tabs">
<li class="tab">
<input class="radioClass" type="radio" name="tabs" checked id="tab1" />
<label for="tab1">HTML</label>
<div class="content">
<img src="https://materializecss.com/images/sample-1.jpg">
<p>Hello there amigo. This is an example of bottom tab navigation built with Just CSS and HTML.</p>
</div>
<div class="indicator"></div>
</li>
</ul>Well, to be honest the use of list in this case seems irrelevant. I just happened to use it. You can use simple div element if you prefer. Okay! you might be wondering the use of indicator div. We will be exploring it’s usage later on. The indicator will be used to showcase the active menu tab.
Step 2 : Adding more radio button for multiple tabs menu
We don’t want our bottom tabs menu with just one menu right?? So, lets add more of these. And the structure will just be redundant to the basic one as developed in the step 1.
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab2" />
<label for="tab2">CSS</label>
<div class="content">
<img src="https://materializecss.com/images/office.jpg">
<p>Hey there. This is an example of bottom tab navigation built with Just CSS and HTML.</p>
</div>
<div class="indicator"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab3" />
<label for="tab3">JavaScript</label>
<div class="content">
<img src="https://images.pexels.com/photos/302743/pexels-photo-302743.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/>
<p>Hi there. This is an example of bottom tab navigation built without the use of JS.</p>
</div>
<div class="indicator"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab4" />
<label for="tab4">Bootstrap</label>
<div class="content">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"/>
</div>
<div class="indicator"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab5" />
<label for="tab5">Material</label>
<div class="content">
<img src="https://cdn.pixabay.com/photo/2019/08/30/12/54/landscape-4441297__340.jpg"/>
<p>Hello there. In this tutorial we will built bottom tabs menu with Just CSS and HTML.</p>
</div>
<div class="indicator"></div>
</li>
The first page should look more or less similar to this, if you have added the same pictures and used list tag as mine. Oh yeah! I have added the header code as well on top of all these element.
<div class="header">
<h2>Pure HTML CSS Built Tab</h2>
</div>Okay, All these tab menu will be manipulated with CSS codes to behave as bottom navigation tabs menu. So lets go to next step of adding CSS.
Step 3: Removing the default feature
There if you look at your page. You can see the radio button and the list style set default as a bullet point. We surely don’t want that.
.tabs .tab{
overflow: hidden;
width:100%;
}
.tabs .tab .radioClass{
display:none;
}Okay, The above code should do the trick. The width is set to 100% because we want our tabs menu at the bottom to cover the whole width.
Step 4: Adding CSS to header
This is just a beautifying step. You can experiment with CSS as much as you want.
body{
margin:0;
font-family: 'Saira Stencil One', cursive;
}
.header{
background-color:#EE6E73;
padding:1vh 1vw 1vh 1vw;
color:white;
text-align:center;
box-shadow: 0px 4px 4px grey;
}
h2{
font-size:3vh;
}
Step 5: Adding the Show/Hide feature of tabs menu
First of all lets hide our content so that we can display each contents on selecting the radio button.
.tabs .content {
opacity:0;
width:45vw;
height:65vh;
box-shadow: 2px 4px 2px 4px rgba(0, 0, 0, 0.2)
}We could have made use of display:none but display property can’t be animated. We could however use z-index which I will be discussing on the conclusion part. Okay, as you scroll down yo can see all other images have been hidden. Now to display them lets add CSS to the checked pseudo class selector which is invoked as each button is checked.
Width, height and box-shadow has been set as a beautifying effort.
.tabs>.tab .radioClass:checked ~ .content {
opacity:1;
transition: opacity 1s ease;
}The above code sets the opacity of the content class, sibling of the checked radio, to 1.
Note: ~ selector selects all siblings of the particular element appearing after that element.
Now as you click on other labels you can see the pictures appearing as the pervious appeared picture vanishes. And just for extra touch of fairness, I’ve added the following CSS
img{
width: 100%;
height:80%;
border-radius:4px 4px 0px 0px;
}
p{
text-align:justify;
}
The height less than 100% is to give the textual contents some space to be displayed.
Step 6: Fixing the Navigation Tabs Menu to bottom with CSS
Okay! we have customized our radio button to behave as a tab possessing show and hide feature. Now lets stick the tab fixed to bottom
.tabs{
position:fixed;
bottom:0;
width:100%;
display:flex;
flex-direction:row;
margin:0;
padding:0;
}Flex box is used to horizontally arrange the tabs menu. But You can see that the menu is still not attached to bottom rather the picture is. So we have to position the picture upwards. You might be thinking to add the content element before the radio button in html structure itself. I thought of that too. But as you see in step 5 we’ve made use of tilde ~ selector to show the content and since the selector works for siblings appearing after the radio button only, so changing the structure doesn’t produce our desired result.
So lets position the contents as absolute and try adjusting the image away from the bottom.
.tabs .content {
position: absolute;
top:-70vh;
left:30vw;
}We have already created the above CSS component in step 5. So yo can just add the above CSS with it. The result produced should visibly explain the above CSS. And yes, that was the result of some random experimentation.
Note: vh and vw are units measuring the percentage of your browser’s screen viewport. It’s just my small attempt for responsive design.
Step 7: Designing the Bottom Navigation Tabs Menu with CSS
I don’t thin yet we are finished with the designed. The radio button though behaves like a tab menu doesn’t look so intimidating and in that case doesn’t in anyway look like a menu. Lets work on that.
.tabs .tab label {
display:block;
text-align:center;
padding:4vh 4vw 4vh 4vh;
cursor: pointer;
font-size:1em;
color: WHITE;
background-color:#EE6E73;
}
.tabs{
box-shadow: 0px 0px 5px 0px black;
}The picture speaks for itself.
Step 8: Adding Interactiveness to that Bottom Navigation Tabs Menu with hover CSS
Okay! we have our design but the user interaction is n’t yet satisfactory. So, Let add some hover effect on our tabs menu.
.tabs .tab label:hover{
background-color:#C1474C;
color:black;
transition: all 0.3s ease;
}Also, We want to show some selection indicator as we select particular menu. For that, if you remember, we have created an indicator element to each list item in HTML structure at step 1.
.indicator{
position:absolute;
bottom:0px;
width:0px;
height:4px;
background:black;
}With the above code, The indicator element is positioned to the bottom of the page. The indicator can’t be seen because we have set the width of the indicator to 0px. Now as we select the menu we are increasing the width of the indicator which shows an expanding effect.
.tabs>.tab .radioClass:checked ~.indicator{
width:20vw;
transition:width 400ms ease;
}
.tabs>.tab .radioClass:checked + label {
color:black;
}Okay! Here we have it our final bottom tabs menu example created with pure CSS and HTML in this tutorial.
Complete Code
Okay! Now we’ve learnt every codes used in developing the example of bottom tabs menu in this tutorial with pure CSS and HTML which can be used for mobile applications. So, finally Below I have compiled the final code of the example of bottom tabs menu consisting of both full HTML and CSS
HTML
<div class="header">
<h2>Pure HTML CSS Built Tab</h2>
</div>
<ul class="tabs">
<li class="tab">
<input class="radioClass" type="radio" name="tabs" checked id="tab1" />
<label for="tab1">HTML</label>
<div class="content">
<img src="https://materializecss.com/images/sample-1.jpg">
<p>Hello there amigo. This is an example of bottom tab navigation built with Just CSS and HTML.</p>
</div>
<div class="indicator"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab2" />
<label for="tab2">CSS</label>
<div class="content">
<img src="https://materializecss.com/images/office.jpg">
<p>Hey there. This is an example of bottom tab navigation built with Just CSS and HTML.</p>
</div>
<div class="indicator"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab3" />
<label for="tab3">JavaScript</label>
<div class="content">
<img src="https://images.pexels.com/photos/302743/pexels-photo-302743.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"/>
<p>Hi there. This is an example of bottom tab navigation built without the use of JS.</p>
</div>
<div class="indicator"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab4" />
<label for="tab4">Bootstrap</label>
<div class="content">
<img src="https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg"/>
</div>
<div class="indicator"></div>
</li>
<li class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab5" />
<label for="tab5">Material</label>
<div class="content">
<img src="https://cdn.pixabay.com/photo/2019/08/30/12/54/landscape-4441297__340.jpg"/>
<p>Hello there. In this tutorial we will built bottom tabs menu with Just CSS and HTML.</p>
</div>
<div class="indicator"></div>
</li>
</ul>
CSS
/*====================================================
Removing the Default look
=====================================================*/
.tabs .tab{
overflow: hidden;
width:100%;
margin:0;
}
.tabs .tab .radioClass{
display:none;
}
/*====================================================
Removing the Default look
=====================================================*/
body{
margin:0;
font-family: 'Saira Stencil One', cursive;
}
.header{
background-color:#EE6E73;
padding:1vh 1vw 1vh 1vw;
color:white;
text-align:center;
box-shadow: 0px 4px 4px grey;
}
h2{
font-size:3vh;
}
/*====================================================
Hide and Show the content
=====================================================*/
.tabs .content {
position: absolute;
opacity:0;
top:-70vh;
bottom: 0vh;
left:30vw;
width:45vw;
height:65vh;
box-shadow: 2px 4px 2px 4px rgba(0, 0, 0, 0.2)
}
.tabs>.tab .radioClass:checked ~ .content {
opacity:1;
transition: opacity 1s ease;
}
img{
width: 100%;
height:80%;
border-radius:4px 4px 0px 0px;
}
p{
text-align:justify;
}
/*====================================================
Fixing tabs menu to bottom
=====================================================*/
.tabs{
position:fixed;
bottom:0;
width:100%;
display:flex;
flex-direction:row;
margin:0;
padding:0;
box-shadow: 0px 0px 5px 0px black;
}
/*====================================================
Desigining the tabs menu
=====================================================*/
.tabs .tab label {
display:block;
text-align:center;
padding:4vh 4vw 4vh 4vh;
cursor: pointer;
font-size:1em;
color: WHITE;
background-color:#EE6E73;
}
/*====================================================
Adding the hover effect
=====================================================*/
.tabs .tab label:hover{
background-color:#C1474C;
color:black;
transition: all 0.3s ease;
}
/*====================================================
Adding the selection indicator
=====================================================*/
.indicator{
position:absolute;
bottom:0px;
width:0px;
height:4px;
background:black;
}
.tabs>.tab .radioClass:checked ~.indicator{
width:20vw;
transition:width 400ms ease;
}
.tabs>.tab .radioClass:checked + label {
color:black;
}
Conclusion
Summarizing, we’ve built a mobile applicable bottom navigation tabs menu example with pure CSS and HTML in this tutorial. To build bottom tabs ,in this tutorial, we’ve made use of radio button. However the use of Javascript or jquery is more preferable and can better suit for mobile responsiveness but as we restricted the use of CSS in that case you can make use of :target pseudoclass to build tabs feature just like in our example.
As you can see all the position of the content lie in the same position, so instead of using opacity we could have stacked all the contents together setting z-index to some negative value to hide from display. And as the menu gets selected you can reposition the z-index value to some positive number displaying the content from screen. Well! you could get lots of other options. Here, I have explained to the best extent about what I did. So Moving on.. keep experimenting with several development approaches, some of which I’ve mentioned above. For now, That’s it. Congrats You held through!!