Crear un bello menú de navegación con CSS3

Hoy les traigo un tutorial para sorprenderse un poco y para sorprender a nuestros amigos ya que les voy a enseñar a crear un menú de navegación con CSS3, y digo que se van a sorprender sus amigos porque pensarán que es un menú en flash pero no lo es ya que incluso sin usar Javascript este menú es la opción perfecta para aquellos que buscan modernizarse y poner en su sitio web o blog un elemento muy elegante. Después del salto les traigo todo el tutorial, pero si quieren ver el resultado final aquí está el ejemplo. Cabe aclarar que el menú funciona con Chrome, Safari y Opera únicamente.

XHTML

Lo primero que tenemos que hacer es crear la estructura básica de nuestro menú que se basa en una lista en donde cada elemento tiene un hipervínculo y una etiqueta spam para el texto a mostrar. En el ejemplo ponemos 4 elementos para mostrar en el menú.

Nótese que cada link tiene una clase diferente, no es la misma y el # que aparece debe reemplazarse por la dirección web que queramos.

<ul id="navigationMenu">
    <li>
	    <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
    	<a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
	     <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
    	<a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
    	<a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

CSS PARTE 1

Ahora si vamos a la parte de magia, de hojas de estilo. Lo primero que hacemos es agregar un estilo universal con “*” este no es necesario y pueden eliminarlo si altera el margen de su sitio web o blog.

Después de eso empieza lo interesante, creamos un degradado para mozilla y para webkit, eso en el fondo de la página.

Y por último se configuran las propiedades de la etiqueta base de la lista.

*{
	/* A universal CSS reset */
	margin:0;
	padding:0;
}

body{
	font-size:14px;
	color:#666;
	background:#111 no-repeat;

	/* CSS3 Radial Gradients */
	background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
	background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

	font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
	list-style:none;
	height:39px;
	padding:2px;
	width:40px;
}

CSS PARTE 2

Este código configura todos los elementos, primero configuramos la etiqueta spam que funciona de forma global para todos los elementos, también se configuran los estilos para los links y por último la forma en que se oculta la etiqueta spam cuando el mouse ya no está sobre el elemento.

#navigationMenu span{
	/* Container properties */
	width:0;
	left:38px;
	padding:0;
	position:absolute;
	overflow:hidden;

	/* Text properties */
	font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.6px;
	white-space:nowrap;
	line-height:39px;

	/* CSS3 Transition: */
	-webkit-transition: 0.25s;

	/* Future proofing (these do not work yet): */
	-moz-transition: 0.25s;
	transition: 0.25s;
}

#navigationMenu a{
	/* The background sprite: */
	background:url('img/navigation.jpg') no-repeat;

	height:39px;
	width:38px;
	display:block;
	position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
	text-decoration:none;

	/* CSS outer glow with the box-shadow property */
	-moz-box-shadow:0 0 5px #9ddff5;
	-webkit-box-shadow:0 0 5px #9ddff5;
	box-shadow:0 0 5px #9ddff5;
}

CSS PARTE 3

Pues aunque no lo crean, todavía hay una parte 3 y como les mencioné al principio, cada elemento tiene una clase diferente, esto para que podamos modificar el estilo de cada elemento individualmente, donde se agtrega un color de fondo, se cambia el color de texto y se añade sombra, por eso el último trozo de código es el siguiente:

/* Green Button */

#navigationMenu .home {	background-position:0 0;}
#navigationMenu .home:hover {	background-position:0 -39px;}
#navigationMenu .home span{
	background-color:#7da315;
	color:#3d4f0c;
	text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
	background-color:#1e8bb4;
	color:#223a44;
	text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
	background-color:#c86c1f;
	color:#5a3517;
	text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
	background-color:#d0a525;
	color:#604e18;
	text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
	background-color:#af1e83;
	color:#460f35;
	text-shadow:1px 1px 0 #d244a6;
}