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:
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;
}
Haciendo 
A diferencia de otros medios, internet está abierta las 24 horas del dia así que, en la práctica, es imposible controlar constantemente pero lo razonable es que el administrador ejerza ese control y, aunque sea de forma periódica, elimine cualquier tipo de comentario que pueda considerar agraviante o dudoso y no deba recurrir a escudarse en algún tecnicismo vanal. No es un tema jurídico, es pura higiene.
