|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Menú nervioso
por Luciano Moreno, del departamento de diseño web de BJS Software.
Os presento esta vez un menú dinámico, original de Martial Boissonneault (http://getElementById.com/), que aunque solo es válido para los navegadores de última generación (Internet Explorer 5x/6x y Nestcape Navigator 6x), crea un efecto muy interesante y vistoso para cualquier página que construyáis.
Además, es muy interesante desde el punto de vista técnico, ya que, usando el acceso a los elementos de un documento html propuestos por el WWW en el modelo DOM, consigue modificar propiedades de estilo de los mismos con un código simple y claro.
El código necesario para la página es el siguiente:
<html>
<head>
<title>Menu
nervioso</title>
<style
type="text/css">
.menulinks
{position:relative;}
#menucont a{color:#006699;
font-weight:bold; text-decoration:none;}
#menucont
a:hover{color:#ff0000; font-weight:bold; text-decoration:underline overline;
text-transform: uppercase;}
</style>
<script
language="JavaScript" type="text/JavaScript">
/**
*
Script creado por Martial Boissonneault © 2001 http://getElementById.com/
* Traducido y adpatado por Luciano
Moreno http://www.htmlweb.net
*
Script valido para Internet Explorer 5x y Nestcape Navigator 6x (navegadores de
quinta generacion)
*/
/**
*var espacioLetras > espacio maximo entre cada letra
*var velocidad > velocidad de la animacion
*var
temporizador > contador de tiempo para activar la funcion
menuNervioso()
*/
espacioLetras=5;
velocidad=100;
temporizador=null;
/**
* funcion
principal para animar el menu
*/
function menuNervioso()
{
/**
* para
aplicar solo a Internet Explorer 5x y Nestcape Navigator
6x
*/
if(document.getElementById)
{
/**
* obtenemos aleatoriamente uno
de los enlaces, para cambiar la separacion de sus
letras
*/
lnks =
Math.floor(Math.random()*lnk.length);
/**
* obtenemos aleatoriamente una
separacion entre las letras
*/
letterSpacing =
Math.floor(Math.random()*espacioLetras);
/**
* aplicamos la separacion
aleatoria al enlace aleatorio
*/
lnk[lnks].style.letterSpacing =
letterSpacing + "px";
/**
* volvemos a llamar a la
funcion cada "velocidad"
milisegundos
*/
temporizador =
setTimeout("menuNervioso()", velocidad);
}
}
/**
*
funcion para detener la animacion cuando ponemos el puntero sobre uno de los
enlaces
*/
function
StopMenu()
{
if(document.getElementById)
{
/**
* borramos el temporizador,
para que no se vuelva a llamar la
funcion
*/
clearTimeout(temporizador);
/**
* volvemos todos los enlaces a
su separacion de letras original
*/
for(i=0;i<lnk.length;i++)
lnk[i].style.letterSpacing = 0 + "px";
}
}
/**
*
funcion para iniciar el menu y la animacion
*/
function iniciaMenu()
{
if(document.getElementById)
{
/**
* accedemos a las etiquetas
"a" de la capa "menucont"
*/
lnk =
document.getElementById("menucont").getElementsByTagName("a");
/**
* asignamos el objeto-capa
"menucont" a una variable, para no tener que repetir su ruta de
acceso
*/
cnt =
document.getElementById("menucont");
/**
* centramos los contenidos de
la capa "menucont", accediendo a su
estilo
*/
cnt.style.textAlign=
"center";
/**
* capturamos el evento
mouseover, llamando con el a la funcion que detiene la
animacion
*/
cnt.onmouseover=StopMenu;
/**
* capturamos el evento
mouseout, volviendo a iniciar la
animacion
*/
cnt.onmouseout=menuNervioso;
/**
* llamamos a la funcion de
animacion del menu
*/
menuNervioso();
}
}
/**
* capturamos el ebento onload
de la pagina, para que inicie la animacion cuando se acabe de
cargar
*/
onload=iniciaMenu;
</script>
</head>
<body>
<div
id="menucont">
<!-- centramos el menu para navegadores antiguos
-->
<center>
<a href="#"
id= "a1"class="menulinks" onClick="return
false">HTMLWeb</a><br>
<a href="#" id= "a2"class="menulinks" onClick="return
false">Manual de HTML</a><br>
<a href="#" id=
"a3"class="menulinks" onClick="return false">Articulos varios sobre
DHTML</a><br>
<a
href="#" id=
"a4"class="menulinks" onClick="return false">Articulos y scripts de
JavaScript</a><br>
<a
href="#" id= "a5"class="menulinks" onClick="return
false">Temas diversos sobre
seguridad</a><br>
<a
href="#" id= "a6"class="menulinks" onClick="return false">Manual de
redes</a><br>
<a
href="#" id=
"a7"class="menulinks" onClick="return false">Articulossobre diseño web</a>
</center>
</div>
</body>
</html>
Consideraciones:
1) Definimos dos estilos para los enlaces contenidos en la capa principal del menú, uno para su estado normal y otro para su estado "mouseover", es decir, para cuando situamos el puntero sobre los mismos. En este caso, pasamos a letras mayúsculas, con subrayado y superrayado, y con color rojo. Para esto no hace falta nada especial en estos navegadores, tan solo definir sus estilos correspondientes.
2) Usamos el método random() del objeto Math para obtener números aleatorios entre 0 y 1, y el método Floor(), también del objeto Math, para redondear a enteros. También usamos, al igual que en otros scripts ya vistos, los métodos setTimeout("funcion",intervalo) para llamar a una función cada x milisegundos, y clearTimeout() para borrar el temporizador creado con el método anterior.
3) Accedemos a la capa mediante el objeto getElementById('capa'), y a los enlaces que contiene mediante getElementsByTagName('tag'), y a partir de aquí accedemos a las propiedades de estilo de los mismos, modificando sus valores.
El resultado de este código podéis verlo pinchando aquí.
Si tenéis alguna duda, escribidnos.
Home - HTMLWebScript - Menús