Crear Un Menú Con Salida Emergente Con CSS3

Los sitios web modernos ofrecen una más compleja jerarquía de navegación. Esta navegación a veces hace que la experiencia de usuario en el menú de la página web un poco confuso. El uso de un menú emergente con CSS3 hace que sea una manera más fácil encontrar lo que quieres en el sitio rápidamente. Como sabemos, gracias a CSS3 podemos brindar una excelente animación.

En este tutorial encontraras cómo crear un menú de tipo Metro que oculta y hace visible el menú de texto debajo de los iconos cada vez que pasa el ratón sobre ella. Bueno, Comencemos!

Nuestro Producto Final

Estructura De Los Archivos

Nuestra estructura de archivos consistirá en cuatro carpetas y un archivo HTML:

index.html – Esto servirá como nuestro archivo principal. Todas nuestras marcas se utilizarán utilizando este archivo
carpeta img– Para nuestras imágenes e iconos
carpeta fonts – Todas nuestras fuentes adicionales estarán aquí y serán cargadas por el archivo CSS (Nota: si usted elige otro tipo de letra en las fuentes de Google, no habrá necesidad de esta carpeta).
carpeta css – Para nuestro estilo (CSS)

Preparando Los Iconos

Primero descargaremos un pack de iconos, en los cuales encontraremos los iconos que vamos a usar. Luego haremos uso de estos iconos, estaremos creando una imagen de sprites para los iconos de nuestro menú.

• Home icon
• User icon
• Portfolio icon
• Chat icon
• Envelope icon

En primer lugar, arrastre el icono de Inicio en un nuevo archivo de Photoshop. Luego ir a Image -> Canvas Size y luego añadir otro ancho 16px en el lado izquierdo. Asegúrese de que los anclajes están apuntando a la derecha.

Después de eso, coloque el icono de usuario para el lado derecho. Asegúrese de que usted los alinea a la derecha correctamente. Usted puede hacer esto pulsando Ctrl – A en el teclado y haciendo clic en la alineación bordes derecha botón en el panel Align.

A continuación, repita el mismo proceso para el resto de los iconos y, finalmente, guardelo como un archivo PNG.

Etiquetas HTML

Para nuestro archivo HTML, agregaremos nuestros archivos CSS:

[html]
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" media="screen" />
[/html]

Los elementos del menú están envueltos dentro de una lista desordenada. Cada elemento tiene una clase de box, seguido de una etiqueta de ancla, iconos envergadura y una etiqueta H2 (para el título del elemento). Todo nuestro menú está envuelto en una clase de contenedor.

[html]
</pre>
<div class="container">
<ul class="icon-menu">
<li class="icon-box home"><a href="#">
</a>
<h2>Home</h2>
<a href="#">
</a></li>
<li class="icon-box aboutme"><a href="#">
</a>
<h2>About Me</h2>
<a href="#">
</a></li>
<li class="icon-box portfolio"><a href="#">
</a>
<h2>Portfolio</h2>
<a href="#">
</a></li>
<li class="icon-box blog"><a href="#">
</a>
<h2>Blog</h2>
<a href="#">
</a></li>
<li class="icon-box contact"><a href="#">
</a>
<h2>Contact</h2>
<a href="#">
</a></li>
</ul>
[/html]

Después abrimos el archivo HTML, deberíamos tener algo como esto:

El CSS

Ahora es el momento de brillar para nuestro menú emergente. En primer lugar, vamos a importar la fuente que vamos a utilizar en nuestros elementos de menú y títulos.

[css]
@font-face
{

src: url(‘../fonts/Museo500-Regular.otf’);
}
[/css]

Ahora vamos a añadir los estilos a nuestros ajustes generales. En primer lugar vamos a añadir un fondo de color hexadecimal de     #263544 y un tipo de fuente de Museo 500. Y luego, también vamos a definir algunos estilos para nuestra ancla y etiquetas H2.

[css]
body {background: #263544; }
a{text-decoration: none;}
h2 {color: #fff; font-size: 22px; margin: 0 24px;}
[/css]

A continuación, vamos a añadir algunos estilos de nuestras iconos en las cajas donde estaremos ocultando nuestro menú de texto. El uso de la lista desordenada, daremos estilo con la clase icon-menu para mantener todo nuestro menú de iconos.

Entonces, daremos estilo con la clase icon-box y le daremos una dimensión de 120px * 120px. Ahora vamos a utilizar el nombre del menú que su clase para manipular el color de fondo de cada caja de acuerdo a su título.

[css]
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
[/css]

Después de eso, también vamos a establecer las posiciones de nuestros iconos del menú utilizando nuestras imágenes de sprite. Vamos a utilizar la etiqueta span y añadir el nombre de clase icono para ella y manipular su posición.

[css]
span.icon {display: inline-block; background: url(‘../img/icon-sprites.png’)no-repeat; width: 32px; height: 32px; margin: 43px 45px;}
span.icon.home {background-position: 0px 0px;}
span.icon.aboutme {background-position: -36px 0px;}
span.icon.portfolio {background-position: -72px 0px;}
span.icon.blog {background-position: -109px 0px;}
span.icon.contact {background-position: -145px 0px;}
[/css]

Para nuestro nombre de menú, utilizaremos las etiquetas H2 como nuestra etiqueta de ancla y y vamos a definir la posición de absoluta y luego empujarlo hacia la izquierda. Utilizando el método de estilo z-index, vamos a ocultar el menú dentro de su icono de menú y la caja.

Usando el atributo de transición, podemos agregar un efecto al cambiar de un estilo a otro sin necesidad de utilizar animaciones en Flash o JavaScript. Esto significa que cada vez que el usuario mueve el mouse sobre los iconos, que va a cambiar su posición hacia la derecha, añadiendo un valor de margen a su izquierda con una animación suave.

[css]
.icon-box.home h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;

}

.icon-box.home a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}

.icon-box.aboutme h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #1dd0ad;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #0d866e;
}

.icon-box.aboutme a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}

.icon-box.portfolio h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #3498db;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #2177b1;
}

.icon-box.portfolio a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}

.icon-box.blog h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f1c40f;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #b8960e;
}

.icon-box.blog a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}

.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f39c12;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #bc780d;
}

.icon-box.contact a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;

}
[/css]

Con esto ya habremos finalizado nuestro menú emergente. Como podemos ver, podemos realizar interesantes efectos con CSS3 sin la necesidad de usar JavaScript. Para descargar los archivos deben dar clik al siguiente enlace.