Here is a example how to make a tab component responsive to different devices view port width. Here the requirement was, there shall be more tabs(numbers of tabs is dynamic), where the width of each tab is different. When the tabs is viewed on different devices, it should automatically accomodate tabs which fits to the available view port width and others can be shown as dropdown. And always active tab shall be shown as first tab.This was achieved with the help of HTML, CSS and jQuery. This code works in all modern browsers in all devices. In Internet explorer browser from version 8 works well. HTML<ul id="tabs">
<li>Tab 1
<li>Tab 2
<li>Tab 3
<li>Tab 4
<li>Tab 5
<li>Tab 6
<li>Tab 7
<li>Tab 8
<li>Tab 9
<li>Tab 10
<li>Tab 11
<li>Tab 12
<li>Tab 13
<li>Tab 14
<li>Tab 15
</ul>CSS#tabs{
margin:0 auto;
max-width:580px;
}
#tabs > li{
display:inline-block;
list-style:none;
margin:0 2px;
clear:both;
position:relative;
}
#tabs > li > a{
padding:5px 10px;
background:#ECF0F1;
color: #3498DB;
text-decoration:none;
}
#tabs > li:hover > a{
background:#3498DB;
color: #ECF0F1;
}
#tabs > li:hover ul{
display:block;
}
#tabs > li.down-button{
position: absolute;
padding:2px;
}
.sub_tabs{
position: absolute;
padding:10px;
min-width:100px;
right:2px;
margin-top:2px;
background:#3498DB;
display:none;
}
.sub_tabs li{
list-style:none;
padding:0;
margin:0;
}
.sub_tabs li a{
text-decoration:none;
color: #ECF0F1;
}
.sub_tabs li a:hover{
text-decoration:underline;
}Java Script$(document).ready(function(){
responsiveTabs();
});
function responsiveTabs(){
var firstoffset=$("#tabs li:first-child");
if (firstoffset.length > 0) {
var firstoffsetval = firstoffset.offset().top;
var i = 0;
var activeele = $('#tabs li a.active');
var activeelehtml = activeele.parent().html();
activeele.parent().remove();
$('<li>' + activeelehtml + '</li>').prependTo('#tabs');
$('#tabs li').each(function(){
var offsetval= $(this).offset().top;
if(firstoffsetval<offsetval){
i++;
if ( i == 1) {
$(this).parent().append('<li class="down-button"><a href="javascript:void();" class="down-arrow">⇓</a><ul class="sub_tabs"></ul></li>');
}
$(this).appendTo( '.sub_tabs' );
}
});
}
}
$( window ).resize(function() {
$('.sub_tabs li').appendTo('#tabs');
$('li.down-button').remove();
responsiveTabs();
}); DesignResponsiveJqueryFacebook Google Plus LinkedIn Twitter
