Este menú en diapositiva, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.
Para ponerlo en nuestro blog:
1.- Vamos a Editar HTML: | Diseño | ► | Plantilla | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
2.- Para obtener la librería jQuery localizamos la etiqueta </head> y pegamos, entes de la misma, el siguiente código: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
|
3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},500);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},500);
}
);
});
</script> |
-85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra.
Los números 500 corresponden a la velocidad del efecto slide que, en el caso del DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida. 4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:
/* CSS menú de Navegación Slide*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#cfcfcf;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .imagen1 a{
background-image: url(http://s7.tinypic.com/1428pag_th.jpg);
}
ul#navigation .imagen2 a {
background-image: url(http://s7.tinypic.com/ke8ax1_th.jpg);
}
ul#navigation .imagen3 a {
background-image: url(http://s7.tinypic.com/r210fl_th.jpg);
}
ul#navigation .imagen4 a {
background-image: url(http://s7.tinypic.com/a4vexe_th.jpg);
}
ul#navigation .imagen5 a {
background-image: url(http://s7.tinypic.com/50ruz7_th.jpg);
}
ul#navigation .imagen6 a {
background-image: url(http://s7.tinypic.com/15qpxj8_th.jpg);
}
ul#navigation .imagen7 a {
background-image: url(http://s7.tinypic.com/2r4lh0z_th.jpg);
} |
Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes. 5.- Vista previa y Guardar plantilla. 6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML: <ul id="navigation">
<li class="imagen1"><a href="#" title="descripción"></a></li>
<li class="imagen2"><a href="#" title="descripción"></a></li>
<li class="imagen3"><a href="#" title="descripción"></a></li>
<li class="imagen4"><a href="#" title="descripción"></a></li>
<li class="imagen5"><a href="#" title="descripción"></a></li>
<li class="imagen6"><a href="#" title="descripción"></a></li>
<li class="imagen7"><a href="#" title="descripción"></a></li>
</ul> |
Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.
|
13 comentarios :
quisiera saber como hago para modificar cuanto se introduce en el borde los botones, porque hice uno y las imagenes sobresale mucho del borde
saludos
Matunob: en el código indicado en el punto 3 del tutorial, localice este segmento:
{'marginLeft':'-2px'}
...y aumente el valor absoluto de -2. Ensaye con varios valores y con la Vista previa va observando hasta que encuentre el que más le convenga.
Saludos.
Castorlux está muy interesante su página, no he utilizado ningún truco aún pero seguro que utilizo algunos.
Gracias por su ayuda
Antonio: Gracias por su visita y por su comentario. Espero que esta página le sea útil.
Saludos.
Hola!! Su blog esta muy interesante.
tengo unas preguntas:
1. ¿como hago para eliminar un rayas que aparecen entre cada icono?. ya que al colocarlo aparece esto:---------, entre cada icono y en su demo no aparece.
2.¿como hago para disminuir el tamaño de la herramienta?
3.¿como agrego mas iconos a la misma?
muchas gracia por compartir lo que sabe con todos, espero su respuesta.
HB's:
1.- Si aplicó con exactitud lo explicado en el tutorial, esas rayas no tienen por qué aparecer. Revise el gadget en el que puso el código indicado en el punto 6 y observe: a) si puso las rayas accidentalmente, bórrelas, o b) si puso etiquetas como ésta <h2>, bórrelas.
2.- Para disminuír el tamaño: En el código del punto 4 aparece dos veces: width: 100px; y una vez: height: 70px; que son el ancho y el alto de las diapositivas. Disminuya esa cifras (100 y 70). Las dimensiones de las imágenes que ponga no deden ser mayores. En el código del punto 3 aparece dos veces: {'marginLeft':'-85px'} debe disminuír la cifra (85), en la misma proporción en que disminuya las anteriores.
3.- Para agregar más íconos: En el código del punto 4 agrega esta línea ul#navigation .imagen7 a {
background-image: url(http://s7.tinypic.com/2r4lh0z_th.jpg);
}
con las URLs de las imágenes que vaya a adicionar, tantas veces cuantos íconos agregue. poniendo los números consecutivos correpondientes (imagen8, imagen9, etc.)
En el código del punto 6 agrega esta línea:
<li class="imagen7"><a href="#" title="descripción"></a></li> tantas veces c uantos íconos agregue, poniendo los números consecutivos correspondientes (imagen8, imagen9, etc.). Obviamente el número de lineas agregadas en este código debe ser igual al agregado en el código anterior.
Saludos.
Hola, lo primero felicitarle por su gran blog.
Lo segundo comentar que he seguido al pie de la letra los pasos indicados y no consigo hacerlo funcionar, solo consigo que me salgan unas flechas del tipo >> que no hacen nada.
gracias de antemano por su ayuda.
Antonio: Como puede ver en la Demo del tutorial el menú funciona perfectamente. Lo mismo debería ocurrir en su blog si siguió las instrucciones correctamente. Si a pesar de hacer la cosas bien el menú no funciona puede deberse a alguna modificación que hizo a la plantilla, que está generando ese problema.
Saludos.
Me a encantado todas las aplicaciones que he visto en su pagina, pero tengo un problema, los menus con efecto slide no me funciona, como hago para saber sI mi pagina es o no compatible con estos codigos, soy de jimdo
PD: en los smarphone como activo para que se vea tambien el slide..
de antemano muchas gracias
y de nuevo
felicitaciones
John: No puedo responderle su inquietud porque no manejo las plantillas de Jimdo. Gracias por su visita.
Cordial saludo.
Pedro Pablo, sos un genio! Gracias por compartir estas cosas muy utiles. Ya lo aplique a mi blog, y ahora tiene mas look!
Detrás del código, te quedó muy bien el menú ¡Felicidades!
Hola cree un blog con una plantilla dinámica predeterminada de blogger, luego cambie la plantilla por otra encontrada en la web que se llama Blogghiamo http://demo.mybloggerthemes.com/2014/10/blogghiamo-blogger-templates.html como pueden ver en el demo en la barra lateral aparecen unos gadgets que no aparecen en mi blog después de cambiarlo.Mas específicamente me interesa tener el Gadget de Categorías y el Gadget de Seguidores, en el Diseño de Plantillas del Blog aparecen esos Gadget pero no en el Blog.Eso me tiene retrasado el blog, gracias de antemano por su colaboración.
Walberto
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.