Un par de menús con efectos. En horizontal y en vertical

Un menú para poder acceder rápidamente desde un solo elemento a otras páginas o secciones importantes, es algo casi indispensable en cualquier sitio web que tenga un mínimo de contenido.

Pero como con los colores (los que visualizan los humanos normales), versiones hay tantas como personas multiplicadas por gustos. Por aquí ya hemos publicado algunas decenas, pero seguro que más de uno todavía no ha encontrado ese que le acaba de cuadrar del todo.

Para ellos y siempre planteándolos sólo como base para modificar según la conveniencia de cada cual, aquí van un par que utilizan transiciones para incorporar efectos de "movimiento" con transiciones CSS. Ambos dos son variaciones de otros vistos anteriormente.

Rectángulos grandes con la fuente de iconos Awesome

Este lo he visto por un par de sitios últimamente, pero estaba hecho con imágenes. En su momento vimos una fuente que permitía añadir iconos mediante una fuente "trucada" para que las letras no fueran tales sino dibujos escalables y que podían ser tratados con propiedades reservadas para texto (bold, font-size, color, etc.). Era la fuente Awesome.

Para ejemplarizar su uso presenté un menú muy similar a este pero mucho más sencillo de aspecto; apenas una palabra y un icono para cada elemento, sin ninguna cosa más.

No es que le haya añadido mucho más... unos bordes redondos y un cambio de escala para el hover, pero con poco a veces las cosas cambian mucho.

Para probar:

My blog

About

Portfolio

Search

Contact

Para añadirlo en un gadget tipo HTML/JavaScript (bajo la cabecera parece el mejor sitio), sólo tenéis que copiar y pegar lo siguiente. Si hay alguna duda sobre su funcionamiento, sólo tenéis que decirlo en los comentarios.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<div class="menuicon">
<a href="#">
<div class="fa fa-bug"></div>
<div class="title">My blog</div>
</a>
<a href="#">
<div class="fa fa-user"></div>
<div class="title">About</div>
</a>
<a href="#">
<div class="fa fa-camera"></div>
<div class="title">Portfolio</div>
</a>
<a href="#">
<div class="fa fa-search"></div>
<div class="title">Search</div>
</a>
<a href="#">
<div class="fa fa-envelope"></div>
<div class="title">Contact</div>
</a>
</div>
<style>
.menuicon {text-align: center; font-size: 0;}
.menuicon a {position: relative; display: inline-block; *display: inline; zoom: 1; width: 100px; height: 120px; text-align: center; color: PaleGoldenrod; text-shadow: 1px 1px 0 DarkGoldenrod; text-decoration: none; background: #D3AE4E; vertical-align: top; -webkit-transition: .3s all; -moz-transition: .3s all; transition: .3s all;}
.menuicon a .fa {position: relative; top: 10px; padding: 10px; border-radius: 200px; border: 2px solid white; font-size: 40px;}
.menuicon a .title {font-size: 20px; line-height: 60px;}
.menuicon a:hover {-webkit-transform: scale(0.90,0.90); -moz-transform: scale(0.90,0.90); transform: scale(0.90,0.90);}
.menuicon a:nth-of-type(odd) {background: #BF9830;}
.menuicon a:first-child {background: #A67900; width: 200px;}
.menuicon a:first-child .fa {border: 0; font-size: 60px;}
.menuicon a:first-child .title {font-size: 30px; line-height: 20px; font-style: italic;}
</style>

En la primera parte del código (HTML), los div con clases fa marcan el icono que se debe mostrar, siguiendo el catálogo de los disponibles con Awesome.

En la segunda (CSS) sólo destacar que de las cuatro últimas reglas, la primera es para que los elementos impares tengan un color de fondo distinto y las tres siguientes para cambiar el tamaño y asimismo el fondo del primer elemento.

El resto son reglas habituales y cambiando background y color de los selectores que los lleven, podréis integrar el menú totalmente con vuestro diseño.

Para que hagáis experimentos he preparado también un Codepen.

En vertical con una marca de selección deslizante

También vimos anteriormente tres de este tipo pero con disposición horizontal.

El elemento seleccionado se va a ver con un cambio de color de fondo, pero en lugar de ser un simple background que cambia de golpe, el color será realmente un bloque independiente que bajará de manera progresiva desplazándose hasta el elemento.

Otra vez para probar:

InicioPinturaEsculturaGrabadosMúsicaDanzaAcerca deContacto

También como antes, os doy el código preparado para copiar y pegar en un gadget. En este caso, por ser más alto que ancho, parece que el sitio idóneo sería la barra lateral.

<div class="menudes">
<a href="#">Inicio</a>
<a href="#">Pintura</a>
<a href="#">Escultura</a>
<a href="#">Grabados</a>
<a href="#">Música</a>
<a href="#">Danza</a>
<a href="#">Acerca de</a>
<a href="#">Contacto</a>
<div class="marca"></div>
</div>
<style>
.menudes {
position: relative;
overflow: hidden;
width: 200px;
margin: 10px auto 10px;
background: #000;
text-align:center;
font-size: 0;
}
.menudes a {
display: block;
padding: 8px;
border-bottom: 2px solid #fff;
position: relative;
z-index: 2;
color: white;
text-decoration: none;
font-size: 14px;
text-transform: uppercase;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
font-family: arial;
font-weight: bold;
}
.marca {
position: absolute;
top: -30%;
left: 0;
width: 100%;
height: 12.5%;
background: orange;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
z-index: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.menudes a:hover {color: #000;}
.menudes a:nth-child(1):hover ~ .marca {top: 0%;}
.menudes a:nth-child(2):hover ~ .marca {top: 12.5%%;} /* (100/nº elementos)x1 */
.menudes a:nth-child(3):hover ~ .marca {top: 25%;} /* (100/nº elementos)x2 */
.menudes a:nth-child(4):hover ~ .marca {top: 37.5%;} /* (100/nº elementos)x3 */
.menudes a:nth-child(5):hover ~ .marca {top: 50%;}
.menudes a:nth-child(6):hover ~ .marca {top: 62.5%;}
.menudes a:nth-child(7):hover ~ .marca {top: 75%;}
.menudes a:nth-child(8):hover ~ .marca {top: 87.5%;}
</style>

Aquí lo destacable son las últimas líneas del CSS que lo que hacen es situar el rectángulo naranja (.marca) que inicialmente está desplazado por arriba fuera de la zona visible (top: -30px;), dentro del menú y en concreto a la altura del elemento correspondiente.

El top en tanto por ciento para el elemento n tiene que ser el que salga de la fórmula (100/nºtotal elementos) * (n+1), así que eso hay que cambiarlo si la cantidad de elementos de vuestro menú son más o menos de 8, que son los que yo usé para el ejemplo.

En el anterior post sobre este tipo de menús lo expliqué con más detalle para el que necesite más aclaraciones.

Otro Codepen para pruebas con este último tipo de menú.


Y bueno, los de BPT que no olviden cambiar los símbolos # por las direcciones de destino que corresponda, que en las demo están así por innecesarios.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter