Bienvenido! Por favor ingrese o registrese.

Autor Tema: Menú horizontal con zoom y menú vertical blogger  (Leído 1501 veces)

Gime

  • Nivel 4
  • ****
  • Puntos: 1817
  • Mensajes: 238
    • Ver Perfil
Menú horizontal con zoom y menú vertical blogger
« : diciembre 26, 2014, 12:33:34 pm »
Hace tiempo que pruebo nuevos diseños de menú que se adapten a mi blog. El menú horizontal simple no se ve muy bien sobre el fondo, y aunque se pueden cambiar algunas opciones he probado diferentes opciones: el menú con movimiento y el menú con zoom.

Otra opción es el menú vertical. No me interesa para mi blog pero les dejo el código para quien le pueda interesar.

La barra de menú horizontal común es muy simple de colocar, y el código ya lo compartí hace unas semanas en Menú horizontal en blogger.

<ul id="menu">
<li><a class="selected" href="http://ELNOMBREDELBLOG.blogspot.com/">INICIO</a></li>
<li><a href="http:// ELNOMBREDELBLOG.blogspot.com/search/label/ETIQUETA">LAPRIMERAOPCIONDELMENU</a></li>
<li><a href="http:// ELNOMBREDELBLOG.blogspot.com/search/label/ETIQUETA2">LASEGUNDAOPCIONDELMENU</a></li>
</ul>

Menú horizontal con zoom

Este menú horizontal con zoom lo encontré hace poco y me funciona un poco mejor en mi blog, aunque no es lo ideal. Sigo buscando. Si alguien tiene algún diseño se agradece compartir.

Este es el código para el menú con zoom que se coloca como siempre en los gadgets, html. Podemos cambiar varias de las características, como color, fuente, etc.

Lo que tenemos que personalizar aquí es la opción de tamaño de fuente. Lo que hace el menú es agrandar la letra de la opción cuando se pasa el puntero del mouse sobre ella.

En el texto vemos que hay 2 líneas de tamaño de fuente. La primera es el tamaño del texto y la segunda es el tamaño que toma cuando pasamos el ratón sobre la línea.

Menú con zoom:

<style>
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font-size:16px;
}
ul.arrowunderline li{
display:inline;
margin-right:12px;
}
ul.arrowunderline li a{
position:relative;
color:orange;
padding-bottom:3px;
text-decoration:none;
}
ul.arrowunderline li a:hover{
font-weight:bold;
font-style:italic;
font-size:20px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
ul.arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:0px;
bottom: 0;
border-width:0px;
border-style:solid;
border-color: transparent transparent red transparent;
}
</style>

<ul class="arrowunderline">
<li><a href="URL del enlace">Inicio</a></li>
<li><a href="URL del enlace">Item1</a></li>
<li><a href="URL del enlace"> Item2</a></li>
<li><a href="URL del enlace"> Item3</a></li>
<li><a href="URL del enlace"> Item4</a></li>
<li><a href="URL del enlace"> Item5</a></li>
<li><a href="URL del enlace"> Item6</a></li>
</ul>

Menú vertical

Otro menú para probar: el vertical. Tengo este código guardado para probar en otro blog pero les aviso que aún no lo he probado. Así que si alguien lo usa, se agradece compartir el resultado.
Según he leído es este menú un rectángulo con fondo pleno negro y letras blancas que cambia de color de fondo según el elemento seleccionado. Tiene un efecto deslizante, aunque no sabría decir los detalles en concreto. Habrá que probarlo.

El código:

<div class="menudes">
<a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<a href="#">Item4</a>
<a href="#">Item5</a>
<a href="#">Item6</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>


Linkback: http://afiliadostop.net/index.php?topic=7077.0
No Tienes Permisos Para Dar Puntos
point 0 Puntos

Este tema no recibió puntos.


Share via facebook Share via twitter

xx
Cómo poner un menú horizontal en Blogger

Iniciado por Gime

1 Respuestas
1796 Vistas
Último mensaje julio 10, 2014, 08:45:15 pm
por marcoojeda
xx
Menú horizontal con subítems y movimiento para Blogger

Iniciado por Gime

0 Respuestas
1179 Vistas
Último mensaje noviembre 11, 2014, 05:43:50 pm
por Gime
xx
como hacer un menu de navegacion en blogger [VIDEO]

Iniciado por Poll Xander

0 Respuestas
298 Vistas
Último mensaje octubre 17, 2016, 08:51:47 pm
por Poll Xander
xx
Como Crear Menu con Socrates

Iniciado por Peter Sandoval M

4 Respuestas
1317 Vistas
Último mensaje julio 08, 2013, 05:04:30 pm
por Peter Sandoval M