Home » Labs » How to create a tab menu Using HTML5 And CSS3  

How to create a tab menu Using HTML5 And CSS3
Filed under Labs

Here is another CSS trick for creating tab menu using only HTML5 And CSS3. you can change it according to your needs and almost modern browsers supports this. This is tested on latest version of Firefox, Chrome, Opera and IE. Below you can find code used for developing this example and after that there is also option for viewing live demo of this tutorial.

CSS

 
	#tab li { 
		float:left;
		width:90px; 
		list-style:none; 
		line-height:25px;
		padding:10px; 
		font-size:16px;
		border-radius:3px 3px 0 0; 
		background:#24bd91; 
		color:#fff;
		text-align:center; 
		border-bottom:none;
		cursor:pointer;
		margin: 0 5px 0 0; 
	}
	#tab li:hover { 
		background:#37dcad;
	}
	label { 
		padding:10px;
		cursor:pointer; 
	}
	input { 
		display:none; 
	}
	#t1:checked ~ ul .li:nth-child(1),
	#t2:checked ~ ul .li:nth-child(2),
	#t3:checked ~ ul .li:nth-child(3),
	#t4:checked ~ ul .li:nth-child(4)
	{ 
		background:#fff;
		color:#000; 
	}
	.tab-bottom{
		float:left; 
		width:100%; 
		height:250px; 
		background:#fff;
	}

HTML

 
 
		<h1>Tab Menu using HTML5 and CSS3 Demo </h1>
 
 
			<div style="width:60%; height:auto; margin: 0 auto;">
 
			<!-- TAB -->	
 
					<input type="radio" id="t1" name="t1">
					<input type="radio" id="t2" name="t1">
					<input type="radio" id="t3" name="t1">
					<input type="radio" id="t4" name="t1">
					<ul id="tab">
						<li class="li"><label for="t1">Tab 1</label></li>
						<li class="li"><label for="t2">Tab 2</label></li>
						<li class="li"><label for="t3">Tab 3</label></li>
						<li class="li"><label for="t4">Tab 4</label></li>
					</ul>
					<div class="tab-bottom"></div>
 
			<!-- / TAB -->	
 
			</div>

Live Demo

Tags:

Posts you may like: