How to create a tab menu Using HTML5 And CSS3

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: , , ,

Related posts:

Topics
Quick Links

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us