JMiur [E]

Este script se llama M6 menu y es una de las tanta genialidades de dhteumeuleu que siempre me sorprende con sus experimentos. El código es realmente mínimo y ta vez sea eso lo que más llama la atención. El script en si mismo ocupa unas pocas líneas y se coloca antes de </head>:
<script type="text/javascript">
//<![CDATA[
// ===========================================
//                -------- M6 menu ------ 
// script written by Gerard Ferrandez - Ge-1-doot - December 2005 
// http://www.dhteumeuleu.com 
// updated Feb 2010 - namespaced 
// ===========================================

var M6 = function () {
var P,T;
var over = -1;
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#FFF";
var selected = "#F80";
var zoom = function (s) {
if(s!=over){
over = s;
var i = 0,o;
while (o = P[i]) {
o.style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
o.style.color=(i==s)?selected:color;
i++;
}
}
}
var init = function () {
P = document.getElementById("menu").getElementsByTagName("a");
var i = 0,o;
while (o = P[i]) {
if(num){
x=i+".";
if(x.length<3)x="0"+x;
o.innerHTML = x+o.innerHTML;
}
o.style.width = "100%";
o.i = i;
o.onmouseover= function() {
zoom(this.i);
}
i++;
}
zoom(0);
}
return {
init : init
}
}();
onload = function() {
M6.init();
}
//]]>
</script>
donde hay cuatro datos configurables:
  • var num agrega un número de orden delante de cada enlace (poner false para eliminarlo)
  • var fontSize establece el tamaño de la fuente del texto
  • var color el color de los enlaces (blanco por defecto)
  • var selected el color del enlace activo (naranja por defecto)
A esto, le podemos sumar dos definiciones de CSS; por ejemplo:
#menu { /* el rectángulo donde se mostrará la lista de enlaces */
height: 300px; /* la altura del rectángulo */
position: relative;
width: 400px; /* el ancho del rectángulo */
}
#menu a {  /* los enlaces */
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}
Y el código HTML sólo es un DIV con una serie de enlaces:
<div id="menu">
<a href="URL_enlace1"> enlace 1 </a>
<a href="URL_enlace2"> enlace 2 </a>
<a href="URL_enlace3"> enlace 3 </a>
.......
</div>

¿Y esto podría usarse para algo?

Sí, claro, por ejemplo, podemos aplicarlo al blog como una forma distinta de mostrar las etiquetas. Para eso basta agregar un nuevo Elemento Etiquetas o usar el que ya tenemos, establecer el tipo LIsta y desmarcar Mostrar cantidad de entradas por etiqueta. Luego, buscamos el widget que, por defecto tendrá como id Label1 y modificamos una línea del script; en lugar de:
P = document.getElementById("menu").getElementsByTagName("a");
ponemos:
P = document.getElementById("Label1").getElementsByTagName("a");
Tambien conviene reducir la fuente del texto y no mostrar el número de orden; Por último, adaptamos el CSS, por ejemplo:
#Label1 {
height: 300px;
position: relative;
width: 250px;
}
#Label1 li {
list-style-type: none;
margin: 0;
padding: 0;
}
#Label1 a {
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}
#Label1 a:hover {
text-decoration: none;
}

38 comentarios:

Ivoc  

uno tiene q poner cada enlace de las etiquetas??

Responder
Manuel Alberto  

Despues de empecinarme en aplicar en un blog Before my eyes, y conseguir mi versión Carrousel de Imágenes lo que puso a prueba mi obstinación, al ver este nuevo post de dhteumleu, reaparece mi deseo de continuar "experimentando" (léase golpeándome la cabeza contra la pared).
Y el culpable es JMiur... :D

Responder
egoloco  

:O Me gustó.. mucho, creo que lo voy a usar... pero en el de Wordpress... muchas gracias... nos vemos!

Responder
JMiur  

Ivoc: Si se usa en un elemento Etiquetas no hace falta.

Manfenix: El script viene con una caja grande de aspirinas. Bueno, no tan grande porque usé algunas pero, aún quedan suficientes :D

Responder
Unknown  

Me dije qué de interesante tiene, una lista...:(

preciosa! no había pasado el cursor!, además como es mágica! cambia el orden de las etiquetas no importando la cantidad de entradas guau guau :P

Responder
Vku  

hace mucho lo vi pero no funcionaba bien, se ve que lo solucionaron. esta bueno y muy original como todo lo de ellos.

Responder
Manuel Alberto  

Ahh... Si el post viene con aspirinas de regalo, entonces está perdonado JMiur, :P

Responder
Ivoc  

pregunta... como se puede reducir el espacio entre etiquetas.. es q me quedaron muy separadas

gracias

Responder
JMiur  

Graciela: Divertido :D

Gracias, Manfenix; tendría que poner un mensaje diciendo que no me hago responsable de dolores de cabeza :D

Ivoc: Si, creo que podrías solucionarlo modificando la propeidad de line-height. Para eso, te convendría agregar lo siguiente en el CSS:

#Label1 li {line-height:normal;}

de esa manera, no se modificará el resto de la sidebar. En este momento, el valor de line-height de esa parte es de 1.5em; puedes probar con otros valores inferiores expresados en em o en pixeles.

Responder
Admin  

Que bonito que está esto JM, voy a ver si lo pruebo en blog de pruebas, valga la redundancia...
El tamaño de la fuente de 38 es la mas grande no? Si, obviamente si, como siempre me contesto sola, para mi sidebar sería muy grande, con 20 crees que estaría bien para que se diferencie de las otras?
Y otra cosa eso que va en el html que son enlaces, que llevan dentro? Estamos hablando de un elemento de página no?
Y donde te referís a las definiciones de CSS y decís de un rectángulo sería lo que se ve en la sidebar con las etiquetas dentro... o sea tengo que cambiar esas medidas por otras acordes a mi sidebar y cambiando #menu por #labels no?
Todo esto teoricamente hablando, ya me veo que cuando lo voy a poner la plantilla me lo rechaza :S Tengo tanta suerte yo con esa plantilla nueva ;)

Responder
JMiur  

El tamaño máximo de la fuente dependerá de la sidebar, hay que probar y ver, que sea lo más grande posible es lo ideal.
Si lo usás en eun elemento Etiquetas de Blogger, sólo debés cambiar esa línea que indico al final en el script; no hace falta tocar el HTML.
Con el CSS, yo empezaría con el modelo que está en el post y luego se va adaptando. Tal vez, lo único que deberías ver es el ancho, el resto es más o menos estandard.

Responder
Soma.CP Comunicação | Communication  

Buenas JM,
Precioso, isto é o que posso dizer sobre as orientações deste post:
Mostrar las etiquetas con un script experimental.
Atendeu de pronto a necessidade de modificar meu template.

Parabénnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnsssssssssss!!!!!!!!

Responder
Emerald  

:) me quedó rebonita!!
Gracias JMiur

Responder
JMiur  

Perfecto Luz :D

Responder
Admin  

Hola JM, tengo varios problemas con esto de las etiquetas, mirá en FolkTango por ejemplo si las pongo en forma de lista, sale una lista laaaaaaaaarga que se pasa al widget siguiente, intenté achicar el espacio entre las etiquetas, pero no me sale, no se donde modificar eso... :S
Lo dejé como nube, hace el efecto pero las letras pequeñas casi ni se ven, es que tengo muchas etiquetas... no se que hacer... si querés darle un vistazo, lo dejé como nube, pero sale infiltrado otro color (amarillo) yo puse la fuente en azul y blanco...
Sospecho que tengo algún otro código en la plantilla para las etiquetas y se superponen o algo así, no se cual es ni como cambiarlo :'(
Había probado primero en un blog de pruebas y salía bien, pero era otra clase de plantilla y también tenía menos etiquetas...

Responder
JMiur  

Habría que verlo en un ejemplo para saber cuales son als propeidades que afectan eso pero, podes intentar con estoss agregados:

#Label1 {
overflow:hidde.;;
.......
}
#Label1 li {
padding: 0 !important;
.......
}
#Label1 a {
padding: 0 !important;
line-height: 1 !important;
.......
}

Responder
Admin  

Gracias JM, parece que resulta lo que decís, pero si la dejo así a lo largo es re larga la lista de etiquetas, como dije antes se pasa para el widget de abajo, será que tengo muchas etiquetas?
El amarillo se fue con ese cambio, pero sigue el problema del largo de la lista... Lo dejé así para que lo veas, si querés te paso el código...

Responder
JMiur  

Sí. Creo lo mismo, que la lista es demasiado larga para usar este tipo de diseño.

Responder
SOLOMOCHILA  

Me gustó mucho la idea.. pero no funciona.. ni siquiera tira un error!.. que puede ser??

Responder
SOLOMOCHILA  

Me olvide!.. algo importante..

Lo estoy probando acá. http://solomochila.blogspot.com

Responder
JMiur  

¿Por qué tienes repetido el script?

Responder
SOLOMOCHILA  

Repetido?? mmm no.. es el único menú M6 que tengo..

Lo que puede ser que tenga repetido es el menú de etiquetas pero no debería ser problema..

Responder
JMiur  

Pués, según tu código fuente, está una vez en el head de la página y luego, en el elemento HTML8.

Responder
SOLOMOCHILA  

A.. ahora entendí.. creí que te referías a que estaba dos veces en el head..

El otro fue una simple prueba...

Pero a todo esto!.. Alguna pista para hacerlo andar?? o simplemente mi plantilla no lo soporta??

Responder
JMiur  

Sí. Ahí hay varios scripts que se ejecutan al cargar la página y vaya uno a saber cuál interfiere. Podrías probar eliminar esta aprte del script:

onload = function() {
M6.init();
}

y colocar lo suguente al final del la plantilla, antes de </body>

<script> M6.init(); </script>

Responder
SOLOMOCHILA  

No no quiere andar...

Lo logré hacer a mano poniendo la lista de links... por ahora creo que va a quedar así, lo provisorio es permanente como dicen..

Pero Muchas Gracias!.. por la buena onda..

si en algún otro momento Harry te toca con la barita loca y te das cuenta cual puede ser el tema que está fallando con un chiflido hacemos el intento!!..

Saludos!.

Responder
Rafael  

Hola:
Antetodo darte la enorabuena por este fantastico blog.
Soy novato en esto y estoy interesado en esta forma de editar las etquetas del blog, pero no entiendo esta parte:
"el código HTML sólo es un DIV con una serie de enlaces:

div id="menu">
URL_enlace1"> enlace 1
URL_enlace2"> enlace 2
URL_enlace3"> enlace 3

¿Donde pongo ese codigo y que urls?
Gracias

Responder
JMiur  

Eso lo colocas donde quieras que se vea la lista.

¿Qué URLs? Las de las páginas que quieras enlazar; si son etiquetas, las de las etiquetas que tengas; por ejemplo, en general es así:

http://miblog.blogspot.com/search/label/ETIQUETA

Responder
Ipsum  

Hola!

Comentarte que primero aparece los nombres de las etiquetas y después se aplica el efecto sobre ellas, por lo que produce un impacto visual no adecuado.

He probado el script a ponerlo al principio , también el css, con widget y sin el, pero nada...primero carga las etiquetas y aprox 2 segundos aparece el efecto..

En tu demo tambien ocurre lo mismo, aunque al no estar al principio de la página no se aprecia.

Hay alguna manera de solucionarlo? tipo por ejemplo no cargar el widget hasta que no cargue el blog o modificar algo en el script ?

Muchas gracias , !!

Pd: Felicidades por tu constancia y el cariño que le pones.

Responder
JMiur  

El script se ejecuta cuando la página se ha cargado; esa velocidad, depende de la conexión, horarios y una serie de situaciones; de todos modos, es posible hacer eso que dices, basta tener oculto el gadget de etiquetas; suponiendo que su ID es Label1:

#Label1 {display:none;}

Y mostrarlo cuando se haya ejecutado el script:

onload = function() {
M6.init();
document.getElementById("Label1").style.display="block;"
}

Responder
Ipsum  

Hola! disculpa el retraso.

Lo he probado , pero no funciona. No aparece las etiquetas.

Se te ocurre otra solucion?

Un abrazo!.

Responder
JMiur  

Pues ahi las veo: captura.

Responder
Ipsum  

Si, bueno... :)
Le quite el "display:none;" haciendo pruebas ubicando las etiquetas.
Si lo pongo.. no me aparecen las etiquetas.

http://img67.xooimage.com/files/5/b/4/etiquetas-29d76c0.jpg

Pd: El blog esta en desarrollo, eres la primera persona que lo visita! :D

Un Saludo.

Responder
JMiur  

Hay un error en al trnascripción del código, coloca esto:

document.getElementById("Label1").style.display="block";

El punto y coma está errado.

Responder
Ipsum  

Vaya error! :D

Ahora funciona perfecto!!, muchas gracias!!

Un Abrazo!

:)

Responder
JMiur  

Es que usé un punto y coma flotante y ... flotó hasta ubicarse donde no debía :-D

Responder
Ipsum  

:D

Curioso este tipo de errores, se acercan mucho a las ilusiones opticas :D

Un Abrazo!

Responder
JMiur  

Com odice la entrada, se controla con la variable num

var num = false;

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR