Haciendo un Menú animado con CSS3
Haciendo un Menú animado con CSS3
En este breve tutorial, vamos a utilizar el poder de los efectos y transiciones CSS3, para construir un menú de navegación animada JavaScript libre que se puede utilizar para añadir un aspecto más pulido de su sitio web o plantilla.
Nosotros vamos a usar algunas interesantes características como la :targetpseudo-selector y :afterelementos.
el HTML
El primer paso es definir la columna vertebral HTML de la página web. Estamos utilizando HTML5 etiquetas ampliamente, por lo que necesitaremos para incluir la secuencia de comandos que permite HTML5 para IE en la sección head del documento. Ya que está encerrado en un comentario condicional, que sólo va a ser solicitada en los navegadores IE y no afectará el rendimiento de los otros:
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="https://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>Se puede notar que estamos incluyendo una hoja de estilo de Google API. Contiene una @font-facedeclaración e incluye la langosta fuente en nuestra página, desde el directorio de fuentes de Internet de Google , que ha crecido hasta incluir más de 100 fuentes de código abierto maravillosos, generosamente alojados por Google.
En el cuerpo del documento, tenemos el header, navy footerlas etiquetas de HTML 5, 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 una fancyNavclase que se le aplica, lo que vamos a utilizar para limitar el efecto de los estilos CSS que nos van a escribir en un momento.
Esto hará que el código sea más portátil y limitar los posibles efectos secundarios.
Otra cosa a destacar es que cada uno de los elementos LI tiene un identificador único, vinculado a partir de los elementos de anclaje dentro de ellos. Esto nos permitirá utilizar el : diana pseudo-clase con el estilo de la opción de menú seleccionada.
Así que vamos a pasar a los estilos CSS.
El CSS
Puede que le resulte sorprendente que el menú de navegación que estamos construyendo no utiliza ninguna imagen (excepto para el icono de inicio – un png transparente).
Todo se hace con gradientes CSS3 , las sombras de la caja , y varios fondos .
En cuanto a la compatibilidad con exploradores, el menú funciona en las últimas versiones de Firefox, Chrome, Safari y Opera, mientras que todavía se puede utilizar en todas las versiones de IE de 7 en adelante.
Sin embargo, lo hace ver mejor en Firefox 4, ya que soporta animación : antes y : después depseudo elementos a través de la transición de la propiedad (se espera que otros navegadores para seguir la habitación).
Nuestros estilos CSS se definen en los activos / styles.css .
Yo sugeriría que se descarga el código de menú del botón de arriba, y abrir ese archivo en un editor de texto. Nos centraremos principalmente en el menú de navegación, por lo que estaremos salteando las partes aburridas del archivo.
Vamos a empezar el estilo del menú de navegación! En primer lugar, escribimos las reglas para la lista desordenada – dirigidos a la fancyNavclase, 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;
}Nótese la enorme lista de sintaxis gradiente CSS3. Todas las versiones recientes de Firefox, Chrome y Safari gradientes de apoyo. Con Opera e IE 10 (actualmente en modo de vista previa de la plataforma), que además se integra con sus últimas versiones.
Al principio había dos sintaxis de la competencia, respaldados por Mozilla (Firefox) en un lado y Webkit (Chrome y Safari) en el otro, pero la sintaxis gradiente de Firefox se ha acordado como el estándar de la industria.
El siguiente paso es utilizar el :afterelemento seudo para crear las sombras oscuras, que se muestra cuando se pasa sobre un elemento de 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;
}La :afterdeclaración crea un elemento styleable real.
Tiene un gradiente horizontal lisa que oscurece el elemento de menú cuando flotaba sobre. Ya que es invisible por defecto (opacidad se establece en 0), estamos usando transiciones CSS3 para animar entre cero y la opacidad completa, desencadenada en vuelo estacionario.
Desgraciadamente, sólo Firefox es compatible con la animación de pseudo elementos en este momento, pero se espera que otros navegadores para introducir pronto esta función.
El menú Explicación
A continuación vamos a estar utilizando las :first-childy :last-childlos pseudo selectores para apuntar a los primeros y los últimos elementos 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;
}La aplicación de diferentes estilos para los primeros y últimos elementos es necesario, ya que no queremos mostrar las fronteras feos que se extienden fuera del menú. también que la vuelta de la esquina adecuada de estos elementos.
Nota: Puede añadir class = “seleccionar” a un elemento de lista en orden para que sea seleccionado / activo por defecto. Esto es útil cuando la construcción de plantillas o la generación del menú con un lenguaje de servidor.
Después de esto tenemos que aplicar una solución al menú. Es para ocultar el elemento seleccionado en ese momento cuando pasemos por el menú de nuevo:
.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 el estilo de los elementos de anclaje que residen en el SIL.
/* 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 este nuestro menú CSS3 animada se ha completado!
Para concluir
Tener su menú de navegación construido en su totalidad con CSS le da una gran cantidad de control. Puede personalizar cada parte del diseño mediante el canje de un valor de color o la fuente. La mayor parte del volumen en el código vinieron de tener que suministrar una declaración separada para cada navegador, algo que va a ser pronto una cosa del pasado.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros