Creare menu di navigazione con CSS3

Oggi vediamo come sfruttare la potenza di CSS3 per la creazione di un menu di navigazione animato.

Il codice Html

Il primo passo e’ dare l’ossatura al nostro progetto attraverso il codice HTML5. Inseriamo al suo interno lo script per IE, per gli altri Browser non ci sono problemi:

CSS3 Animated Navigation Menu | iwebdesigner.it














Menu di navigazione animato in CSS3
« leggi e download su iwebdesigner  




Home
News
About us
Servizi
Contatti



Per il download, visita www.iwebdesigner.it

Possiamo notare che abbiamo utilizzato una API di Google per utilizzare il font Lobster. Abbiamo diviso la pagina HTML5 in parti ben distinte Header, Nav e Footer. Abbiamo utilizzato un tag UL all’interno del tag NAV e questo e’ il nostro menu di navigazione. La lista non ordinata ha una classe chiamata fancyNav. Ogni elemento LI dispone di un ID univoco per applicare il target pseudo-classe allo stile della voce di menu’ in uso.

Questo e’ il risultato:

Il codice CSS

Innanzi tutto dovete sapere che non utilizziamo immagini, ma solo ombre e sfondi multipli forniti da CSS3.

Il nostro file css e’ definito nel file style.css. Cominciamo con lo stile del menu di navigazione. Per prima cosa analizziamo la classe fancyNav e i suoi elementi LI:

.fancyNav{
	/* Affects the UL element */
	overflow: hidden;
	display: inline-block;

	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;

	box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
	-moz-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
	-webkit-box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.fancyNav li{
	/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */

	background-color: #f0f0f0;
	background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
	background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
	background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
	background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
	background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

	border-right: 1px solid rgba(9, 9, 9, 0.125);

	/* Adding a 1px inset highlight for a more polished efect: */

	box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
	-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
	-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;

	position:relative;

	float: left;
	list-style: none;
}

Questo definisce il gradiente CSS3 e poi con il seguente codice definiamo le ombre col la pseudo classe :after

.fancyNav li:after{

	/* This creates a pseudo element inslide each LI */

	content:'.';
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:1;
	opacity:0;

	/* Gradients! */

	background-image:-webkit-gradient(linear, left top, right top, from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
	background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
	background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));

	/* Creating borders with box-shadow. Useful, as they don't affect the size of the element. */

	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;

	/* This will create a smooth transition for the opacity property */

	-moz-transition:0.25s all;
	-webkit-transition:0.25s all;
	-o-transition:0.25s all;
	transition:0.25s all;
}

Adesso usiamo le pseudo classi :first-child e last-child per definire l’aspetto della prima e dell’ultima voce del menu’:

/* Treating the first LI and li:after elements separately */

.fancyNav li:first-child{
	border-radius: 4px 0 0 4px;
}

.fancyNav li:first-child:after,
.fancyNav li.selected:first-child:after{
	box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
	-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
	-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

	border-radius:4px 0 0 4px;
}

.fancyNav li:last-child{
	border-radius: 0 4px 4px 0;
}

/* Treating the last LI and li:after elements separately */

.fancyNav li:last-child:after,
.fancyNav li.selected:last-child:after{
	box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
	-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
	-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

	border-radius:0 4px 4px 0;
}

.fancyNav li:hover:after,
.fancyNav li.selected:after,
.fancyNav li:target:after{
	/* This property triggers the CSS3 transition */
	opacity:1;
}

Adesso definiamo l’azione al passaggio del mouse:

.fancyNav:hover li.selected:after,
.fancyNav:hover li:target:after{
	/* Hides the targeted li when we are hovering on the UL */
	opacity:0;
}

.fancyNav li.selected:hover:after,
.fancyNav li:target:hover:after{
	opacity:1 !important;
}
/* Styling the anchor elements */

.fancyNav li a{
	color: #5d5d5d;
	display: inline-block;
	font: 20px/1 Lobster,Arial,sans-serif;
	padding: 12px 35px 14px;
	position: relative;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
	z-index:2;
	text-decoration:none !important;
	white-space:nowrap;
}

.fancyNav a.homeIcon{
	background:url('../img/home.png') no-repeat center center;
	display: block;
	overflow: hidden;
	padding-left: 12px;
	padding-right: 12px;
	text-indent: -9999px;
	width: 16px;
}

Questo e’ tutto. Abbiamo realizzato un menu’ di navigazione semplicemente con l’aiuto dei CSS3 senza utilizzo di immagini.