Tab drop for Twitter Bootstrap
Very usefull script 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
Comentarii (5)
Andrey
27 mar 2014, 11:40
Hello!
Tab drop made for Bootstrap, but not work with Bootstrap,clash.
Together, your bootstrap-tabdrop.js not work , dropdown tab not work.
Andrey
28 mar 2014, 07:26
I beg your pardon. All are working. It was my problem.
jared
6 iun 2014, 14:31
this works well even with bootstrap 3!
i made a small modification so that the name / label of the tab was shown instead of the icon when selected;
collection.each( function() {
$(this).bind("click", function() {
t.dropdown.addClass("active");
t.dropdown.find(".dropdown-toggle").html($(this).text()+'');
});
});
this.element.find("li:not(.dropdown):first").bind("click", function() {
t.dropdown.find(".dropdown-toggle").html($.fn.tabdrop.defaults.text);
});
thanks!
Luke
25 iun 2014, 13:05
Does this work with dropdown menus? I'm having huge problems trying to get it to work with a dropdown submenu
Christophe
28 aug 2014, 13:34
Great script thank you -
I made an Improvement though:
This will make the script behave better -
layout: function() {
var collection = [];
this.element
.append(this.dropdown.find('li'))
.find('>li')
.not('.tabdrop')
.each(function(){
if(this.offsetTop > 0) {
collection.push(this);
}
});
if (collection.length > 0) {
collection = $(collection);
this.dropdown
.find('ul')
.empty()
.append(collection);
if (this.dropdown.find('.active').length == 1) {
this.dropdown.addClass('active');
} else {
this.dropdown.removeClass('active');
}
this.dropdown.removeClass('hide');
} else {
this.dropdown.addClass('hide');
}
}