HTML tabs

Written by @kerixa 22 February 2014

Nice tabs box written by html and css. Useful for many websites to show multiple content to the users and save spaces in the page and make their pages beautiful.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style>
	*, #content :first-child, #content :last-child {
		margin: 0;
	}
	body {
		font: 300 15px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
		background: #333;
		margin: 20px;
	}
	h1 {
		margin-bottom: 20px;
		color: #fff;
		text-transform: uppercase;
		font-size: 55px;
		font-weight: 100;
		letter-spacing: 30px;
		text-shadow: 3px 3px 5px #000;
	}
	nav ul {
		list-style: none;
		padding: 0 0 0 10px;
		min-width: 460px;
	}
	nav li {
		float: left;
		position: relative;
		height: 30px;
		border-radius: 10px 30px 0 0;
		margin-left: -10px;
		text-shadow: 1px 1px 0 #bbb;
		box-shadow: 0px 0px 10px rgba(0,0,0,.5);
		transition: .2s;
	}
	nav a {
		display: block;
		position: relative;
		width: 90px;
		height: 20px;
		padding: 6px 10px 20px 0;
		border-radius: 10px 30px 0 0;
		background: #999;
		color: #444;
		text-align: center;
		text-decoration: none;
		transition: .2s;
	}
	nav li:hover {
		z-index: 1;
	}
	nav li:hover a {
		background: #ccc;
		color: #000;
	}
	#selected {
		z-index: 2;
	}
	#selected a {
		z-index: 3;
		background: #fff;
		color: #000;
		text-shadow: none;
		font-weight: 500;
	}
	#content {
		position: relative;
		z-index: 1;
		clear: both;
		min-width: 420px;
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0px 0px 10px rgba(0,0,0,.5);
		background: #fff;
	}
	#content p {
		margin: 20px 0;
	}
	</style>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="">tab1</a></li>
				<li id="selected"><a href="">tab2</a></li>
				<li><a href="">tab3</a></li>
				<li><a href="">tab4</a></li>
				<li><a href="">tab5</a></li>
			</ul>
		</nav>
	</header>
	
	<section id="content">
		<p>html tabs content.</p>
	</section>
	
</body>
</html>
<font face="Tahoma"><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></font><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2