Download
User Rating: 4.1/5 ( 7 votes)
Tab drop - Very usefull plugin when your tabs do not fit in a single row. This script takes the not fitting tabs and makes a new dropdown tab. In the dropdown there are all the tabs that do not fit.
-
works only with horizontal tabs and pills
-
custom text for the dropdown tab
-
works with responsive design
Source: eyecon.ro
1. INCLUDE CSS AND JS FILES
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/tabdrop.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tabdrop.js"></script>
2. HTML
<div class="tabbable ">
<ul class="nav nav-tabs">
<li class=""><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li class=""><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li class=""><a href="#tab3" data-toggle="tab">Section 3</a></li>
<li class="active"><a href="#tab4" data-toggle="tab">Section 4</a></li>
<li><a href="#tab5" data-toggle="tab">Section 5</a></li>
<li><a href="#tab6" data-toggle="tab">Section 6</a></li>
<li><a href="#tab7" data-toggle="tab">Section 7</a></li>
<li><a href="#tab8" data-toggle="tab">Section 8</a></li>
<li><a href="#tab9" data-toggle="tab">Section 9</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3.</p>
</div>
<div class="tab-pane active" id="tab4">
<p>Howdy, I'm in Section 4.</p>
</div>
<div class="tab-pane" id="tab5">
<p>Howdy, I'm in Section 5.</p>
</div>
<div class="tab-pane" id="tab6">
<p>Howdy, I'm in Section 6.</p>
</div>
<div class="tab-pane" id="tab7">
<p>Howdy, I'm in Section 7.</p>
</div>
<div class="tab-pane" id="tab8">
<p>Howdy, I'm in Section 8.</p>
</div>
<div class="tab-pane" id="tab9">
<p>Howdy, I'm in Section 9.</p>
</div>
</div>
</div>
3. JAVASCRIPT
$(function(){
$('.nav-tabs').tabdrop();
});
4. OPTIONS
text
Type: string
Default: icon
<i class="icon-align-justify"></i>
To change the default value, call
.tabdrop({text: "your text here"});
when initalizing the tabdrop. The displayed value will change when a tab is selected from the dropdown list.
align
Type: string
Default: right
$('.nav-tabs').tabdrop({align: 'left'});
when initalizing the tabdrop. The tab will align on the left or right. This addresses issues with tabs that have display: flex.
offsetTop
Type: integer
Default: 0
To change the default value, call
.tabdrop({offsetTop: N});
when initalizing the tabdrop. This determines when tab has to be included in the dropdown.
5. METHODS
.tabdrop(options)
Initializes an tab drop.
.tabdrop('layout')
Checks if the tabs fit in one single row.