Bootstrap Custom Animated Tabs
Bootstrap tabs are one of the most used components of the Bootstrap framework by the web developers. The Bootstrap tabs help to quickly create a small elegant menu system. Although I used Bootstrap extremely to quickly create my websites front end designing tasks but since it is not elegant I always customise it with using SASS for a better appearance.
In this tutorial, I will show you how to make a beautiful custom animated Tab system by modifying Bootstrap Default Tabs in order to give a better look and feel for your website. I used the before and after selector of CSS and CSS3 transition-timing-function Property to make a cool animation in Bootstrap Tab system. The final output image is given below.
Let's Start Coding
The default bootstrap tabs are created with <ul class="nav nav-tabs">. But I am not using this class. Instead, I am using a custom class named animated_tab to customise default tab system.
Tip: Mark the current page with <li class="active">
The CSS Code.
.animated_tab{
float:left;
width:100%;
text-align:center;
text-transform : uppercase;
margin-bottom:50px;
}
.animated_tab li{
position:relative;
display:inline-block;
}
.animated_tab li a{
display:block;
color:#999999;
padding:10px 15px;
font-weight:bold;
text-decoration: none ;
}
.animated_tab li.active a,
.animated_tab li:hover a{
color : #333333;
}
.animated_tab li.active:before,
.animated_tab li:hover:before,
.animated_tab li.active:after,
.animated_tab li:hover:after{
background-color: #7c4dff;
position: absolute;
width:55px;
height:2px;
}
.animated_tab li:before{
content: "";
transition: all 0.5s ease-in-out;
top: 0px;
right: 0px;
width: 0px;
}
.animated_tab li:after {
content: "";
transition: all 0.5s ease-in-out;
left: 0px;
bottom: 0px;
width: 0px;
}I will explain the code later in this tutorial.
The HTML Codes
<ul class="animated_tab">
<li class="active"><a href="#1a" data-toggle="tab">Home</a></li>
<li><a href="#2a" data-toggle="tab">Menu 1</a></li>
<li><a href="#3a" data-toggle="tab">Menu 2</a></li>
<li><a href="#4a" data-toggle="tab">Menu 3</a></li>
<li><a href="#5a" data-toggle="tab">Menu 4</a></li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<p> </p>
<div class="row">
<div class="col-md-4">
<div class="with_border">
<img src="sample1.jpg" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample2.png" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample3.jpg" class="img-responsive" >
</div>
</div>
</div>
<p> </p>
<div class="row">
<div class="col-md-4">
<div class="with_border">
<img src="sample4.jpg" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample5.jpg" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample6.jpg" class="img-responsive" >
</div>
</div>
</div>
</div>
<div class="tab-pane" id="2a">
<h3>Menu 1</h3>
</div>
<div class="tab-pane" id="3a">
<h3>Menu 2</h3>
</div>
<div class="tab-pane" id="4a">
<h3>Menu 3</h3>
</div>
<div class="tab-pane" id="5a">
<h3>Menu 4</h3>
</div>
</div>The above code does not require any explanation. It is just a basic bootstrap tab system. The complete code of demo page is given below.
The Complete Code of Demo Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tabs Modified</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.animated_tab{
float:left;
width:100%;
text-align:center;
text-transform : uppercase;
margin-bottom:50px;
}
.animated_tab li{
position:relative;
display:inline-block;
}
.animated_tab li a{
display:block;
color:#999999;
padding:10px 15px;
font-weight:bold;
text-decoration: none ;
}
.animated_tab li.active a,
.animated_tab li:hover a{
color : #333333;
}
.animated_tab li.active:before,
.animated_tab li:hover:before,
.animated_tab li.active:after,
.animated_tab li:hover:after{
background-color: #7c4dff;
position: absolute;
width:55px;
height:2px;
}
.animated_tab li:before{
content: "";
transition: all 0.5s ease-in-out;
top: 0px;
right: 0px;
width: 0px;
}
.animated_tab li:after {
content: "";
transition: all 0.5s ease-in-out;
left: 0px;
bottom: 0px;
width: 0px;
}
.with_border {
border: 1px solid rgba(0, 0, 0, 0.1);
padding : 20px;
margin : 10px;
}
}
</style
</head>
<body>
<div class="container">
<p> </p>
<h2 class="text-center" style="font-weight:bold;color:#7c4dff;">Bootstrap Custom Animated Tabs </h2>
<p> </p>
<ul class="animated_tab">
<li class="active"><a href="#1a" data-toggle="tab">Home</a></li>
<li><a href="#2a" data-toggle="tab">Menu 1</a></li>
<li><a href="#3a" data-toggle="tab">Menu 2</a></li>
<li><a href="#4a" data-toggle="tab">Menu 3</a></li>
<li><a href="#5a" data-toggle="tab">Menu 4</a></li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<p> </p>
<div class="row">
<div class="col-md-4">
<div class="with_border">
<img src="sample1.jpg" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample2.png" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample3.jpg" class="img-responsive" >
</div>
</div>
</div>
<p> </p>
<div class="row">
<div class="col-md-4">
<div class="with_border">
<img src="sample4.jpg" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample5.jpg" class="img-responsive" >
</div>
</div>
<div class="col-md-4">
<div class="with_border">
<img src="sample6.jpg" class="img-responsive" >
</div>
</div>
</div>
</div>
<div class="tab-pane" id="2a">
<h3>Menu 1</h3>
</div>
<div class="tab-pane" id="3a">
<h3>Menu 2</h3>
</div>
<div class="tab-pane" id="4a">
<h3>Menu 3</h3>
</div>
<div class="tab-pane" id="5a">
<h3>Menu 4</h3>
</div>
</div>
</div>
</body>
</html>Code Explanation
Now let's take a brief look at the main CSS properties that customise the tabs.
1) CSS ::before Selector
The CSS before selector helps us to insert something before the div container. In this case, we add an Indigo line of 2px height on the top of the Tab.
2) CSS ::after Selector
The CSS before selector helps us to insert something before the div container. In this case, we add an Indigo line of 2px height on the bottom of the Tab.
3) Position Relative and Absolute
The parent tag (ie ul tag) must always have the relative position. The child ( before and after selectors ie li tag ) must have the absolute position. The absolute position helps us to float above the parent tag.
4) CSS content Property
The CSS content can only be used with the after and before selectors. It is used to generate contents inside an element. It is needed to make the top and bottom lines in the Tabs.
5) The animation Effect
The CSS3 transition-timing-function Property is used to give the animation effect in top and bottom lines of tabs on mouse hover. The ease-in-out Specifies a transition effect with a slow start and end.
DEMO
You can demo the above code by visiting following link.
https://shareurcodes.com/demo/css/tabs.html
If anybody has any suggestions or doubts or need any help comment below and I try will respond to every one of you as early as possible. More tutorials like making real time WebSockets chat application and Facebook chat bot is coming soon. So please stay tuned and leave your suggestions below.
Similar Posts
-
26th Jun 2017 06:47:56 AM
-
26th Jun 2017 06:54:55 AM
-
16121