CSS3 Menú de navegación animada

CSS3 Menú de navegación animada

En este breve tutorial, vamos a crear un menú desplegable de colores usando sólo CSS3 y la impresionante fuente icono de la fuente.

Una fuente icono es, como su nombre indica, un tipo de letra que se asigna a los personajes iconos en lugar de letras.

Esto significa que se obtiene bonitos iconos vectoriales en cada navegador que soporte HTML5 fuentes personalizadas (que es prácticamente todos ellos).

Para agregar iconos a los elementos, sólo es necesario asignar un nombre de clase y el icono será añadido con un : antes de elemento de la fuente de estilo impresionante.

el HTML

Aquí está el margen de beneficio que vamos a trabajar con:

index.html

<nav id="colorNav">
	<ul>
		<li class="green">
			<a href="#" class="icon-home"></a>
			<ul>
				<li><a href="#">Dropdown item 1</a></li>
				<li><a href="#">Dropdown item 2</a></li>
				<!-- More dropdown options -->
			</ul>
		</li>

		<!-- More menu items -->

	</ul>
</nav>

Cada elemento del menú principal es un niño de la lista sin orden superior. Por dentro es un enlace con una clase de icono (ver una lista completa de las clases icono aquí ), y otra lista desordenada, que se mostrará como un menú desplegable en vuelo estacionario.

el CSS

Como se puede ver en el fragmento de código HTML anterior, tenemos listas desordenadas anidados en el ul principal, así que tenemos que escribir el código CSS con precaución. No queremos que el estilo de la parte superior UL en cascada en los descendientes. Por suerte, esto es precisamente lo que el CSS selector de hijo ‘ > ‘ es para:

activos / css / styles.css

#colorNav > ul{
	width: 450px;
	margin:0 auto;
}

Esto limita las declaraciones de anchura y de margen de sólo la primera lista desordenada, que es un descendiente directo de nuestra #colorNav artículo. Teniendo esto en mente, vamos a ver lo que los elementos de menú reales se ven como:

#colorNav > ul > li{ /* will style only the top level li */
	list-style: none;
	box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
	display: inline-block;
	line-height: 1;
	margin: 1px;
	border-radius: 3px;
	position:relative;
}

Estamos estableciendo un inline-block valor de la pantalla de modo que los elementos de la lista se muestran en una sola línea, y estamos asignando una posición relativa para que podamos compensar los menús desplegables correctamente. Los elementos de anclaje contienen los iconos reales tal como se define por Font impresionante.

#colorNav > ul > li > a{
	color:inherit;
	text-decoration:none !important;
	font-size:24px;
	padding: 25px;
}

Ahora podemos seguir adelante con los menús desplegables. Aquí estaremos definiendo una animación de transición CSS3. Vamos a crear un máximo de la altura de 0 píxeles, que ocultará la lista desplegable. Al pasar por encima, vamos a animar la altura máxima a un valor mayor, lo que hará que la lista que se revela gradualmente:

#colorNav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	width:180px;
	left:50%;
	margin-left:-90px;
	top:70px;
	font:bold 12px 'Open Sans Condensed', sans-serif;

	/* This is important for the show/hide CSS animation */
	max-height:0px;
	overflow:hidden;

	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
}

Y este es el desencadenante de animación:

#colorNav li:hover ul{
	max-height:200px;
}

El valor de 200 píxeles es arbitraria y que tendrá que aumentar si su lista desplegable contiene una gran cantidad de valores que no encajan. Desafortunadamente no hay manera css sólo para detectar la altura, así que tenemos que codificar la misma.

El siguiente paso es el estilo de los elementos reales desplegables:

#colorNav li ul li{
	background-color:#313131;
}

#colorNav li ul li a{
	padding:12px;
	color:#fff !important;
	text-decoration:none !important;
	display:block;
}

#colorNav li ul li:nth-child(odd){ /* zebra stripes */
	background-color:#363636;
}

#colorNav li ul li:hover{
	background-color:#444;
}

#colorNav li ul li:first-child{
	border-radius:3px 3px 0 0;
	margin-top:25px;
	position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#313131;
	left:50%;
	top:-10px;
	margin-left:-5px;
}

#colorNav li ul li:last-child{
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
}

Y, por supuesto, vamos a ninguna parte sin algunos colores de fantasía! Aquí hay 5 versiones:

#colorNav li.green{
	/* This is the color of the menu item */
	background-color:#00c08b;

	/* This is the color of the icon */
	color:#127a5d;
}

#colorNav li.red{		background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{		background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{	background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{	background-color:#df6dc2;color:#9f3c85;}

Un aspecto aseado de utilizar fuentes de icono, es que se puede cambiar el color del icono simplemente declarando una propiedad de color. Esto significa que todas las personalizaciones es posible que desee hacer se puede hacer con CSS solos .

¡Hecho!

Fuentes de iconos son una gran adición a un conjunto de herramientas de desarrollo web. Ya que son fuentes regulares, puede utilizar las fuente de tamaño , de color y la sombra de texto propiedades de personalizarlos. Este ejemplo no utiliza ni imágenes JS, por lo que debería ser bastante fácil para que coincida con su diseño actual y usarla dentro de unos minutos.

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros