In most of the cases we uses bootstrap, which is easy to use. But sometimes we may need to create tabbed menu without bootstrap. Here I am sharing you the related html, css and jQuery code using which you can use Tabbed menu without using bootstrap (screenshot above). You can use this in WordPress, Shopify or any other platform where you can use html,css and jQuery.
Related CSS Code:
<style>
ul.nav.nav-tabs {
clear: both;
}
ul.nav.nav-tabs li {
list-style: none;
float: left;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav>li {
position: relative;
display: block;
}
.nav-tabs>li {
float: left;
margin-bottom: -1px;
}
.nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
display: table;
content: " ";
}
.nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
clear: both;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.tab-pane:not(.active) {
display: none;
}
</style>
Related JQuery Code :
<script>
jQuery(document).ready(function(){
jQuery(".nav-tabs li.active").click();
jQuery(".nav-tabs li").click(function(e){
e.preventDefault();
jQuery(".nav-tabs li").removeClass('active');
jQuery(this).addClass('active');
let tid= jQuery(this).find('a').attr('href');
console.log("ID:"+tid);
jQuery('.tab-pane').removeClass('active in');
jQuery(tid).addClass('active in');
});
});
</script>
Related HTML Code
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#included_service">Included Service</a></li>
<li><a data-toggle="tab" href="#needed_assets">Needed Assets</a></li>
<li><a data-toggle="tab" href="#delivery_time">Delivery Time</a></li>
<li><a data-toggle="tab" href="#extra_options">Extra Options</a></li>
</ul>
<div class="tab-content">
<div id="included_service" class="tab-pane fade in active">
<p>Included Service Text will go here </p>
</div>
<div id="needed_assets" class="tab-pane fade">
<p> Need Asset Text will go here </p>
</div>
<div id="delivery_time" class="tab-pane fade">
<p>Delivery Time Related Text will go here</p>
</div>
<div id="extra_options" class="tab-pane fade">
<p> Extra Option text will ho here</p>
</div>
</div>
All About Basic 