Pesquisar

Mostrando postagens com marcador menus. Mostrar todas as postagens
Mostrando postagens com marcador menus. Mostrar todas as postagens

"Um par de menus com efeitos. Em horizontal e em vertical "


"Um par de menus com efeitos. "

"Em horizontal e em vertical"


  traduzido:                                                    


fonte e créditos: 
oloblogger




Un par de menús con efectos. En horizontal y en vertical | Oloblogger Un menú para poder acceder rápidamente desde un solo elemento a otras páginas o secciones importante...

 

 

 

 

 

 


  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.


2 menús con efectos



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.





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





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.




|Clique Aqui e Leia| +++...

Postagens mais visitadas

divulgando

Parcerias banner 120 x 60 nosso banner * copie o código envialinksurlnoticias
via6

divulgando


Registre-se/Cadastre-se

...ser membro de... edihitt
membrospara ser membro de...
Envia Links
...clique aqui cadastre-se/registre-se
inscrevam-se como Membro de edihitt
.edihitt Muito Mais que um Agregador de Links.
Uma Verdadeira Rede Social! ...!...

clique na imagem

ENVIAR LINKS

ao vivo

edihittedihitt

blogs/sites

 
|template by ebds|http://envialinksurlnoticias.blogspot.com|http://envialinksurlnoticias.blogspot.com|