Tabs responsive on different gadgets

nanda 0
Design
Responsive
Jquery
Tabs responsive on different gadgets

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">&#8659;</a><ul class="sub_tabs"></ul></li>');
					}
					$(this).appendTo( '.sub_tabs' );
				}
			}); 
		}
	}
	
	$( window ).resize(function() {
		  $('.sub_tabs li').appendTo('#tabs');
		  $('li.down-button').remove();
		  responsiveTabs();
	}); 

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.

Want to discuss, How Global Softlab can help you?Get Started