WordPress Tricks

HTML Tab without bootstrap : Tabbed menu with only css, jQuery and html

Tabbed menu without bootstrap ( using css, jquery and html)

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.

You can contact me at om2000_cuet in my skype or can ask question in comments section.

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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s