En este breve tutorial, usaremos el poder de los efectos y transiciones de CSS3 para crear un menú de navegación animado sin JavaScript que puede usar para agregar una apariencia refinada a su sitio web o plantilla. Usaremos algunas características interesantes como el :target pseudoselector y :after elementos.
El HTML
El primer paso es definir la columna vertebral HTML del sitio web. Usamos mucho las etiquetas de HTML5, por lo que necesitaremos incluir el script de habilitación de HTML5 para IE en la sección principal del documento. Como está incluido en un comentario condicional, solo se solicitará en los navegadores IE y no afectará el rendimiento de los demás:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Animated Navigation Menu | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!-- Including the Lobster font from Google's Font Directory -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<!-- Enabling HTML5 support for Internet Explorer -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>CSS3 Animated Navigation Menu</h1>
<h2>« Read and download on Tutorialzine</h2>
</header>
<nav>
<ul class="fancyNav">
<li id="home"><a href="#home" class="homeIcon">Home</a></li>
<li id="news"><a href="#news">News</a></li>
<li id="about"><a href="#about">About us</a></li>
<li id="services"><a href="#services">Services</a></li>
<li id="contact"><a href="#contact">Contact us</a></li>
</ul>
</nav>
<footer>Looks best in Firefox 4, usable everywhere.</footer>
</body>
</html> Puede notar que estamos incluyendo una hoja de estilo de las API de Google. Contiene una declaración de código>@font-face e incluye la Langosta fuente en nuestra página, desde el directorio de fuentes web de Google, que ha crecido hasta incluir más de 100 maravillosas fuentes de código abierto, alojadas generosamente por Google.
En el cuerpo del documento tenemos el header , nav y footer Etiquetas HTML5, que dividen la página en tres secciones con valor semántico. Nos concentraremos en el elemento UL dentro de la etiqueta de navegación. Este es nuestro menú de navegación.
La lista desordenada tiene un fancyNav class aplicada a él, que usaremos para limitar el efecto de los estilos CSS que escribiremos en un momento. Esto hará que el código sea más portátil y limitará los posibles efectos secundarios. Otra cosa a señalar es que cada uno de los elementos LI tiene una identificación única, vinculada desde los elementos de anclaje dentro de ellos. Esto nos permitirá usar la pseudoclase :target para diseñar el elemento de menú seleccionado actualmente.
Así que pasemos a los estilos CSS.
El CSS
Puede que le resulte sorprendente que el menú de navegación que estamos creando no utilice ninguna imagen (excepto el icono de inicio, un png transparente). Todo se hace con degradados CSS3, sombras de cuadro y múltiples fondos.
En cuanto a la compatibilidad con el navegador, el menú funciona en las últimas versiones de Firefox, Chrome, Safari y Opera, mientras que todavía se puede usar en todas las versiones de IE desde la 7 en adelante. Sin embargo, se ve mejor en Firefox 4, ya que admite la animación de pseudo elementos :before y :after a través de la propiedad de transición (se espera que otros navegadores sigan la suite).
Nuestros estilos CSS se definen en assets/styles.css . Le sugiero que descargue el código del menú desde el botón de arriba y abra ese archivo en un editor de texto. Nos centraremos principalmente en el menú de navegación, por lo que me saltaré las partes aburridas del archivo.
¡Comencemos a diseñar el menú de navegación! Primero escribimos las reglas para la lista desordenada, apuntada con el fancyNav class, y los elementos 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;
} Observe la enorme lista de sintaxis de degradado de CSS3. Todas las versiones recientes de Firefox, Chrome y Safari admiten gradientes. Con Opera e IE 10 (actualmente en modo de vista previa de la plataforma), sumándose también con sus últimas versiones. Inicialmente, había dos sintaxis en competencia, respaldadas por Mozilla (Firefox) por un lado y Webkit (Chrome y Safari) por el otro, pero se acordó que la sintaxis de gradiente de Firefox es el estándar de la industria.
El siguiente paso es usar el :after pseudo elemento para crear las sombras oscuras, que se muestra cuando se desplaza sobre un elemento del menú:
.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;
}
El :after declaración crea un elemento de estilo real. Tiene un degradado horizontal suave que oscurece el elemento del menú cuando se pasa el cursor sobre él. Como es invisible de forma predeterminada (la opacidad está configurada en 0), estamos usando transiciones CSS3 para animarlo entre cero y opacidad total, que se activan al pasar el mouse. Desafortunadamente, solo Firefox admite la animación de pseudoelementos en este momento, pero se espera que otros navegadores presenten pronto esta característica.
A continuación, usaremos el :first-child y :last-child pseudoselectores para apuntar al primer y último elemento del menú.
/* 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;
} Es necesario aplicar diferentes estilos al primer y último elemento, ya que no queremos mostrar bordes desagradables que se extiendan fuera del menú. También redondeamos las esquinas correspondientes de estos elementos.
Después de esto, debemos aplicar una corrección al menú. Es para ocultar el elemento actualmente seleccionado cuando volvemos a pasar el cursor sobre el menú:
.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;
} Y, por último, todo lo que queda es diseñar los elementos de anclaje que residen en los LI.
/* 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;
} ¡Con esto nuestro menú CSS3 animado está completo!
Para concluir
Tener su menú de navegación construido completamente con CSS le da mucho control. Puede personalizar cada parte del diseño intercambiando un valor de color o la fuente. La mayor parte del código provino de tener que proporcionar una declaración separada para cada navegador, algo que pronto será cosa del pasado.
¿Te ha gustado este tutorial? Asegúrese de compartir sus pensamientos en la sección de comentarios a continuación.