Tabs orizzontale 4

Precedente Successiva Torna all'elenco Chiudi

Menu di navigazione composto da una lista <UL> con effetto rollover

 

Esempio

 

Codice 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>

 

Codice 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;
	border: 3px solid #CCC;
	margin-top: 0px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 100px;
	text-align: left;
	text-transform: uppercase;
	height: 37px;
	padding: 0px;
	display: block;
	vertical-align: middle;
	background-color: #F3F3F3;
	-webkit-border-top-right-radius: 40px;
	-moz-border-radius-topright: 40px;
	border-top-right-radius: 40px;
}

#listatabs a:hover, #listatabs 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: left;
	vertical-align: middle;
	display: block;
	background-color: #FFF;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 4px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F30;
	border-right-color: #F30;
	border-bottom-color: #FFF;
	border-left-color: #F30;
}

#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: left;
	height: 37px;
	vertical-align: middle;
	display: block;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 4px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F30;
	border-right-color: #F30;
	border-bottom-color: #FFF;
	border-left-color: #F30;
	background-color: #FFF;
}

#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: left;
	vertical-align: middle;
	display: block;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 4px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #F30;
	border-right-color: #F30;
	border-bottom-color: #FFF;
	border-left-color: #F30;
}

.tabCentratoVerticalmente {
	width: 92px;
	margin-top: 12px;
	text-align: left;
	vertical-align: middle;
	display: block;
	margin-left: 8px;
}

         

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Località Cinquale - Italy
P.IVA 01027000452
C.F. VRSMTT71R16F704B
Privacy e Cookies
Preferenze Cookie