Menús con efectos.

HoY  vamos a mostraros algunos menús con efectos.

Todos sabemos que los menús son la mejor forma para acceder a nuestras páginas de forma rápida y es indispensable para cualquier web que tenga un mínimo de contenido.

Rectángulos grandes 

My blog

About

Portfolio

Search

Contact

Para este menú hemos usado las fuentes e iconos de Awesome.

Como añadir el menú 

Nos vamos a Diseño > Añadir un gadget 
Busca la etiqueta  HTML/JavaScript y añadimos este código

Código

<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.

Menú vertical deslizante

Al igual que el menú anterior este lo podemos usar en cualquiera de nuestra barra lateral.

Inicio Pintura Escultura Grabados Música Danza Acerca de Contacto

este código

Código

<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>

Enlace

Datos de https://www.soratemplates.com/