drop down con javascript

ch3ssmaster · #1 (**permalink**) 14/07/2011, 19:37

Hola, tengo el siguiente codigo que genera un menu de navegacion:

function Menu(nombre){
this.nombre = nombre;
this.lista = null;
this.menufinal = true;
this.enlace = null;
this.funcion = MiFuncion;
}

function MiFuncion(){
alert(this.nombre);
}

function ConfigurarMenu(){
var m1_1 = new Menu("menu1.1");
m1_1.enlace = "http://google.es";

var m1_2 = new Menu("menu1.2");
m1_2.enlace = "http://eligetuweb.es";

var m2_1 = new Menu("menu2.1");
m2_1.enlace = "http://jaquegranada.blogspot.com";

var m3_1_1 = new Menu("menu3.1.1");
m3_1_1.enlace = "http://entrenajedrez.sportsontheweb.net";

var m3_1_2 = new Menu("menu3.1.2");
m3_1_2.enlace = "http://eligetuweb.es";

var m3_1 = new Menu("menu3.1");
m3_1.menufinal = false;
m3_1.lista = new Array(m3_1_1, m3_1_2);

var m3_2 = new Menu("menu3.2");
m3_2.enlace = "http://eligetuweb.es";

var m1 = new Menu("Menu 1");
m1.menufinal = false;
m1.lista = new Array(m1_1, m1_2)

var m2 = new Menu("Menu 2");
m2.menufinal = false;
m2.lista = new Array(m2_1);

var m3 = new Menu("Menu 3");
m3.menufinal = false;
m3.lista = new Array(m3_1, m3_2);

var m = new Menu(null);
m.menufinal = false;
m.lista = new Array(m1, m2, m3);

return m;
}

function PintarMenu(menu){

var raiz = document.createElement("ul");

var i;
for (i = 0; i < menu.lista.length; i++){
var elemento = document.createElement("li");

if (!menu.lista[i].menufinal){
elemento.innerHTML = menu.lista[i].nombre;
var hijo = PintarMenu(menu.lista[i]);

elemento.appendChild(hijo);

}
else{
var enlace = document.createElement("a");
enlace.innerHTML = menu.lista[i].nombre;
enlace.menu = menu.lista[i];
enlace.setAttribute("href", menu.lista[i].enlace);

elemento.appendChild(enlace);
}
raiz.appendChild(elemento);
}
return raiz;

}

function CrearMenu(){
var menu = ConfigurarMenu();
var raiz = PintarMenu(menu);
$("div#divmenu").append(raiz);
$("div").addClass("divmenu");

$("li").addClass("normal");
$("div#divmenu > ul > li").addClass("negrita");
$("div#divmenu > ul > li").addClass("link");

}

podrian ayudarme a ocultar los elementos (li) por debajo de m1, m2, m3 de manera que se vean al pasar el raton sobre ellos??

Gracias por adelantado

ceSharp · #2 (**permalink**) 15/07/2011, 04:25

hola,

tienes que usar attachEvent o addEventListener (depende del navegador donde vaya a funcionar)
te paso dos links donde tratan estos temas:

http://www.forosdelweb.com/f13/agreg...hevent-510841/

http://ennovati.mx/dom-agregar-un-ev...on-javascript/

saludos.

ceSharp · #3 (**permalink**) 15/07/2011, 04:40

te paso un ejemplo de como mostrar/ocultar un boton dentro de un div, todo creado dinámicamente (es que no me mola nada eso de pegar un par de enlaces y ahí te apañes, jejeje):
-------------------
<script type="text/javascript">
function addObjetoDinamico()
{
var boton=document.createElement('input');
boton.type='button';
boton.value="borrar";
boton.id = 'botoncito';
boton.style.visibility='hidden';
var div=document.createElement('div');
div.style.backgroundColor = 'Cyan';
div.style.width = '100px';
div.attachEvent('onmouseover',function(){document. getElementById(boton.id).style.visibility='visible ';});
div.attachEvent('onmouseout',function(){document.g etElementById(boton.id).style.visibility='hidden'; });
div.appendChild(boton);
document.body.appendChild(div);
}
</script>
-------------------
<body onload="addObjetoDinamico()">
<div>

</div>
</body>
-------------------
aparecerá una zona azul donde si pones el ratón aparece un botón y cuando sales desaparece.

saludos.