JMiur [E]

Este es otro menú creado por leigeber.com que utiliza un efecto deslizante (slider). Es muy sencillo de aplicar, requiere un pequeño script que podemos descargar en formato ZIP desde la página del autor y que luego copiamos y pegamos, agregándolo a la plantilla antes de </head>:
<script type='text/javascript'>
//<![CDATA[
....... aquí copiamos el contenido del archivo .......
//]]>
</script>
El menú, lo creamos con un DIV y una lista:
<div class="menu">
<ul id="menu">
<li><a href="URL_enlace">Enlace</a></li>
<li value="1"><a href="URL_enlace">Enlace</a></li>
<li><a href="URL_enlace">Enlace</a></li>
<li><a href="URL_enlace">Enlace</a></li>
<li><a href="URL_enlace">Enlace</a></li>
</ul>
<div id="slide"></div>
</div>
<script type='text/javascript'>window.onload=function() {menuSlider.init('menu','slide');}</script>
A uno de los items (LI) le colocamos un parámetro extra value="1" con lo que indicamos cuál es el item base, aquel al que nuesto slider regresará, produciendo ese curioso efecto de resorte.


Todo lo que faltara sería crear las definiciones CSS del menú y allí está su mejor característica, podemos usar la que viene con el demo del script o inventar cualquier otra, las posibilidades son muchísimas. Un ejemplo:
<style type='text/css'>
.menu { /* es el bloque horizontal */
background: #789; /* el fondo de ese bloque */
height: 32px; /* la altura */
position: relative; /* obligatorio */
}
.menu ul { /* la lista */
height: 32px; /* la altura */
list-style: none;
margin: 0;
padding: 0 0 0 10px;
position: absolute;
z-index: 100;
}
.menu li { /* cada item de la lista */
float: left;
line-height: 32px;  /* centrada verticalmente */
padding: 0 0 0 5px;
}
.menu a, .menu a:active, .menu a:visited, .menu a:hover { /* cada item es un enlace */
color: #CDE;
padding: 0 15px;
text-decoration: none;
}
#slide { /* es el cursor que se desplaza */
-moz-border-radius: 10px;
background: #000;
height: 32px;
position: absolute;
top: 0;
z-index: 10;
}
</style>

43 comentarios:

Raúl Montero  

Está muy bien!

Responder
Graciela  

encantador!!!, bellísimo JMIUR :) buen lunes y besitos!!!

Responder
Claudio  

Esta genial, me gustan estas nuevas propuestas jajaja, que niños somos algunos :D

Responder
Σ=o) Pau  

mmm... me encantan los menu, ya va siendo hora que movilice mis gatitos de otro modo xD gracias! :D

Besos ronroneados ^_^ feliz comienzo de semana

Responder
JMiur  

A mi tambien me gustó, es muy fácil de hacer y se ve lindo ... Sí, somos niños :D

Responder
La Caldera del Diablo  

Hola, muy bueno tu blog, sirve para desasnarnos a los burritos informáticos. Te hago una pregunta relacionada con este post. ¿Cómo puedo hacer para crear un link (por ejemplo con una fotito en la barra lateral) que direccione hacia una las entradas que tengan determinada etiqueta? ¿es posible?
Gracias

Emiliano

Responder
JMiur  

No sé exactamente qué quieres hacer pero las etiquetas tienen una URL:
http://MIBLOG.blogspot.com/search/label/ETIQUETA

Algo así crea un enlace:

<a href="http://MIBLOG.blogspot.com/search/label/ETIQUETA">
<img src="LAIMAGEN" />
</a>

Responder
Manfenix  

hola JMiur. Implementé este menú y algo estoy haciendo mal, puedes hechar una ojeada al blog de pruebas?. Gracias
http://manfenix2.blogspot.com

Responder
Manfenix  

Ya solucioné el problema, unos tags de cierre mal ubicados, en el código para el elemento html, hacía que se viera descentrado el slider. Saludos, :P

Responder
Manfenix  

De nuevo por aquí JMiur, tengo un problema con la visualización del menu en IE. Los títulos estan desplazados hacia la derecha respecto del fondo del menú. En Firefox, se ve todo bien. Cómo puedo solucionarlo?.
Puedes apreciar el problema en Manfenix

Responder
JMiur  

Es probable que haya algún porblema con alguna versión de IE, en IE8 lo veo bien pero haz esto, agrega la siguente definición a las otras:

ul#menu {left: 0px;}

Responder
Manfenix  

Perfecto JMiur ;). Ahora se ve bien en IE 7.0. Una pregunta, cuál es la función de esta última definición?

Responder
JMiur  

Ese rectángulo llamado #menu se posiciona de manera absoluta, es decir, podemos ubicarlo donde se nos ocurra. left indica a que distancia desde el borde izquierdo va a estar. Por defecto, el valor es cero pero, parecería que este caso, es otro y por eso, al decirle left:0px le "ordenamos" que se ubique a la izquierda. En el resto de los navegadores, no hace falta decirlo.

Complicado de explicar en un comentario :D

Responder
Manfenix  

Clara la explicación. Gracias

Responder
Leonardo Fabián Kim  

No entiendo nada :(

Responder
JMiur  

Yo tampoco pero no se lo digo a nadie :$

Responder
Varo  

Hola Jmiur nose que estoy haciendo mal pero no me deja o mejor dicho nose como ponerlo. Como abro el archivo .js?

Graciass

Responder
JMiur  

No entiendo bien la pregunta. El JS esta dentro del ZIP. SI quieres editarlo, ábrelo con el block de notas. Los archivos JS son archivos de texto comunes.

Responder
Junior  

NO PUDE HACERLO EN REALIDAD CUAL ES CODIGO DEL RAR POR QUE HAY TRES Y CUAL ES HTML QUE VOY A COLOCAR EN EL DISEÑO DEL BLOG http://deskargalogratis.blogspot.com/

Responder
CHiCken  

quisiera saber donde se ponen el archivo CSS

Responder
JMiur  

En Blogger, lo mejor es colocarlos en la misma plantilla, junto con el resto. Dentro de las etiquetas <b:skin> </b:skin> o antesde de </head>, entre etiquetas style:

<style>
...........aqui
</style>

Responder
Maik  

Todo bien JMiur?
Quisiera hacer una consulta, implemente este menu en mi pagina y funciona bien y me gusta, pero no puedo colocarle las esquinas redondeadas en IE.Intente con el nifty pero no me sale. Tienes alguna idea que pueda usar?
Saludos!

Responder
JMiur  

En IE no hay propiedades para redondear bordes así que debe recurrirse a imágenes de fondo o algún truco similar. Nunca probé Nifty Corners.

Por ahí leí sobre un script para IE pero, aún no lo he probado.

Responder
Felipe  

Sencillo, muy elegante y con un bonito efecto.
Me lo llevo porque lo usare en mi nueva plantilla.
Esta genial.
Gracias por el aporte.
Una pregunta... Jorge si entras a mi blog veras que el cursor que se desplaza (slider) lo he reducido y que se situa justo encima de cada enlace.
Qué debería modificar en el Css para que el slider si situara debajo de cada enlace.

De antemano gracias por tu atencion. :)

Responder
JMiur  

Imagino que debería cambiarse la propiedad top acá; que en lugar de cero tuviera un valor, por ejemplo, 30 pixeles:

#slide {
............
top:30px;
}

Responder
Felipe  

Si :)
Eso mismo pense al principio, y sería lo lógico, pero no va por ese lado.
Sería genial pero igual no hay problema, de por si ya el menu es bastante elegante a mi gusto personal.
Chau.!

Responder
Admin  

Oye Jmiur esque pretendo poner las etiquetas en el menu es decir copiar su url de la etiqueta y pegarla como enlace al menu y poder eliminar la seccion de etiquetas pero ya que puse el link de etiquetas en el menu ejemplo:

http://tibialaner.blogspot.com/search/label/tutoriales

o

http://tibialaner.blogspot.com/search/label/Descargas%20Tibia%208.54

le doy click en el enlace y no aparece ninguna entrada a esa etiqueta mientras que la agrego en etiquetas y si aparece como se debe poner el link de etiquetas en el menu correctamente a lo mejor algo en el link de la etiqueta debo eliminar o si se podre poner directamente las etiquetas en un menu?

Responder
JMiur  

Eso es porque en la URL, la etiqueta es sensible a mayñusuculas y minúsculas así que debería ser:

http://tibialaner.blogspot.com/search/label/Tutoriales

por ejemplo.

Responder
ESNAPRI  

Lo coloqué!
J.Miur, haces que todo esto, que a mi me suena a chino, sea fácil con las explicaciones que das tan claras.Aaaaaiinnnsss...lo voy a poner en todos mis blogs!!.
Sólo un detalle, insignificante. Se podría, de alguna manera, hacer que el slider, funcionara más rápido?
Gracias!Estoy como niña con zapatos nuevos, jajaja

Responder
JMiur  

Me alegra que funcionara :D

Respecto de la velocidad, tengo mis dudas. Se me ocurre que el valor está dado por:
i=8
que es un dato del script y que poniendo un número menor, podría ser que se ascerera pero, no estoy seguro.

Responder
ESNAPRI  

Pues voy a intentarlo, por probar...que no quede.
Gracias!
Ya te contaré.

Responder
ESNAPRI  

:D , J.Miur, siiii, aunque con ciertos cambios.
Me fijé en que al lado del valor (i=8), que me diste, aparecía con el mismo número el valor "q". Bajé la numeración y la subí, pero el efecto no era el deseado; así que probé añadiendo el mismo número a los dos valores y, después de varias pruebas, el resultado ha sido satisfactorio pero con numeración alta y desigual. Finalmente, lo he dejado así:
"q=150 i=100"
Les he puesto, incluso, un valor =200, pero parece que pierde efecto.Supongo el script, tendrá un tope, digamos de velocidad.E incluso, podran seguramente interferir en esto otros scripts que se tengan en la plantilla.El caso es que ahora, va más rápido.
Gracias J.Miur. Acabaré llamándote "el mago de Blogger, códigos y scripts". ;)

Responder
JMiur  

SI. Ese q=8 tambien debe servir para algún cálculo de la velocidad aunque no se exactamente cual. No conviene que sea muy alto, es verdad, porque puede interferir con otras cosas.

Si está a tu gusto, todo es perfecto :D

Responder
ESNAPRI  

Hola de nuevo, J.Miur....¡ Ya me extrañaba a mi, no tener que molestarte!
Coloqué este menú en varios de mis blogs sin ningún problema, pero ya tuvo que salir, el que me iva a dar quebraderos de cabeza.En mi ignorancia con este tema, pienso si será por culpa de la distancia que hay entre el "content-wrapper" y el "crosscoll", pero por más vueltas que le he dado a la plantilla - Mínima, igual que en los otros blogs-,no hago más que "dar palos de ciego" y no consigo nada.Sé que es abusar de tu amabilidad, pero si me das permiso, ¿podría enviarte a tu correo, un par de capturas de pantalla, para que veas a lo que me refiero?
Si te es más cómodo, visitar mi blog,¿puedo dejarte aquí la dirección?
Gracias anticipadas por tu paciencia con esta mala alumna :((

Responder
JMiur  

Lo mejor es que me digas la dirección para verlo online y me fijo.

Responder
ESNAPRI  

Gracias!!
La dirección es la siguiente:
http://esnapri-gifts.blogspot.com

Responder
JMiur  

Fíjate que hay une rror en el CSS. Estás colocando etiquetas <style type='text/css'> y </style> dentro de <b:skin> </b:skin> y eso, hace que muchas propeidades no se tengan en cuenta; quita esas dos etiquetas de STYLE.

Responder
ESNAPRI  

Gracias, J.Miur!
No me cansaré de repetir que eres el mago de las plantillas.:D El problema con el slider, solucionado;únicamente, falta un detalle, aunque perfectamente podría quedar el menú como está, pero me llama la atención que el color de fondo de la barra, no se vea. ¿ A qué puede ser debido?

Responder
JMiur  

Parece que todoe l problema estaba allí, ahora se ve bien.

Me aprece que el tema del color es por otro pequeño erro de sintaxis; dice:
background color: #FBC9E3; /* el fondo de ese bloque */
y debería decir:
background-color: #FBC9E3; /* el fondo de ese bloque */
falta el guión; las propeidades CSS no tienen espacios.

Responder
ESNAPRI  

Aaayyss....lo que puede llegar a marear un simple guioncito!!!
Muchísimas gracias J.Miur.Ahora sí que está perfecto.
Lo que me dá rabia, es haberte molestado por algo "tan tonto" pero, QUIEN COMO TÚ, SABE.....PUES SABE, y quien como yo, no....pues te ocupará tu tiempo :$.Gracias por tu paciencia.
Que tengas un buen fin de semana!

Responder
JMiur  

No hay problema, ESNAPRI :D

Responder
Administrador  

Hola, JMiur. He usado este menú en mi blog, pero me gustaría aumentar un poco el tamaño de la letra sin que quede descentrada dentro de las pestañas. ¿Podrías indicarme qué debo hacer?

JMiur  

Tendría que ver tu ejemplo si es que ha problemas pero, bastaría establecer el tamaño de la fuente en esta regla:
.menu a, .menu a:active, .menu a:visited, .menu a:hover {}

Responder
 
CERRAR