Horizontal Tabs 2

Previous Next Back to list Close

Navigation menu consists of a list <UL> with rollover effect

 

Example

 

Code Html

<div id="contenitoretabs">
<ul id="listatabs">
<li id="tabcorrente"><a href="#"><div class="tabCentratoVerticalmente">2013</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2012</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2011</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2010</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2009</div></a></li>
</ul>
</div>

 

Code CSS

#contenitoretabs {
	height: 40px;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 8px;
}

#listatabs {
	margin: 0px;
	padding: 0px;
}

#listatabs ul, #listatabs li {
	padding: 0px;
	display: inline;
	list-style-type: none;
	margin: 0px;
}

#listatabs a:link, #listatabs a:visited {
	float: left;
	font-weight: bold;
	text-decoration: none;
	color: #999;
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100px;
	text-align: center;
	text-transform: uppercase;
	height: 37px;
	display: block;
	vertical-align: middle;
	background-color: #F3F3F3;
	border-bottom-width: 3px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-bottom-color: #CCC;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
}

#listatabs a:hover, #listatabs a:active {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	margin-top: -3px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100px;
	height: 37px;
	text-align: center;
	vertical-align: middle;
	display: block;
	background-color: #FFF;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FFF;
	border-top-width: 3px;
	border-right-width: 3px;
	border-left-width: 3px;
	border-top-color: #F30;
	border-right-color: #F30;
	border-left-color: #F30;
	padding: 0px;
}

#listatabs li#tabcorrente a:link, #listatabs li#tabcorrente a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
	width: 100px;
	text-align: center;
	height: 37px;
	vertical-align: middle;
	display: block;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FFF;
	background-color: #FFF;
	border-top-width: 3px;
	border-right-width: 3px;
	border-left-width: 3px;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
}

#listatabs li#tabcorrente a:hover, #listatabs li#tabcorrente a:active {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
	width: 100px;
	height: 37px;
	text-align: center;
	vertical-align: middle;
	display: block;
	border-bottom-width: 4px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #FFF;
	border-top-width: 3px;
	border-right-width: 3px;
	border-left-width: 3px;
	border-top-color: #F30;
	border-right-color: #F30;
	border-left-color: #F30;
}

.tabCentratoVerticalmente {
	width: 100px;
	margin-top: 12px;
	text-align: center;
	vertical-align: middle;
	display: block;
}

         

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Cinquale - Italy
VAT 01027000452
Fiscal Code VRSMTT71R16F704B
Privacy and Cookies
Cookies Settings