Ayuda please con mi menu desplegable, gracias

vicluber · #1 (**permalink**) 03/08/2009, 22:27

Hola que tal, buenas noches...
Estoy haciendo un trabajo practico, y quiero hacerle un "menu desplegable" mostrando y ocultando un el <ul> o de cualquier otro forma, acepto sugerencias. Tambien podria mostrar y ocultar un <div> pero deberia ser lo mismo que con <ul>, o me equivoco? Desde ya, gracias

Hasta ahora tengo esto..

Como archivo javascript esto:

function mostrar(bb) {
b=document.getElementById(bb).style.display;
if(b=="block"){
b=document.getElementById(bb).style.display="none" ;
}
else{ b=document.getElementById(bb).style.display="block ";}

}

Esto en el css:

ul { position:absolute;
margin-left:80px;
float:inherit;
background-color:#000000;
width:78px;
height:30px;
border-color:#00FF00;
border-style:double;
font-family: Arial,Helvetica,sans-serif;
border-width: 1px;
display:block;

}

Y asi en el index.html:

<table cellpadding="15px" cellspacing="0" width="100%" class="jo">
<td><a href="Index.html">Inicio</a></td>
<td><button onClick="mostrar('victor')">Imagenes</button></td>
<td><a href="Versiones.html">Versiones</a></td>
<td><a href="Trucos.html">Trucos</a></td>
<td><a href="Noticias.html">Noticias</a></td>
</table>

<ul id="victor">
<li><a href="#">Imagen 1</a></li>
<li><a href="#">Imagen 2</a></li>
<li><a href="#">Imagen 3</a></li>
</ul>

Perdonen se esta muuuuy mal hecho, es que no tengo mucha idea de js todavia

Adler · #2 (**permalink**) 04/08/2009, 04:49

Hola

Prueba así

Código javascript:

Ver originalfunction mostrar(bb) {
b = document.getElementById(bb);
b.style.display = (b.style.display == "none") ? "block" : "none";
}

en el CSS

display:none;

Suerte

vicluber · #3 (**permalink**) 04/08/2009, 10:19

Gracias Adler, aunque casi no entiendo el codigo que me recomendaste, lo probe pero nada, no reacciona de ninguna forma.... el IE 8 abajo a la izq dice "error en la pagina" cuando hago clic sobre el "button"

Adler · #4 (**permalink**) 04/08/2009, 12:36

Hola

¿Es este el código que tienes en tu página?

Cita:

<html>
<head>
<script type="text/javascript">
function mostrar(bb) {
b = document.getElementById(bb);
b.style.display = (b.style.display == "none") ? "block" : "none";
}
</script>

<style type="text/css">
ul { position:absolute;
margin-left:80px;
float:inherit;
background-color:#000000;
width:78px;
height:30px;
border-color:#00FF00;
border-style:double;
font-family: Arial,Helvetica,sans-serif;
border-width: 1px;
display:none;
}
</style>
</head>

<body>

<table cellpadding="15px" cellspacing="0" width="100%" class="jo">
<td><a href="Index.html">Inicio</a></td>
<td><button onClick="mostrar('victor')">Imagenes</button></td>
<td><a href="Versiones.html">Versiones</a></td>
<td><a href="Trucos.html">Trucos</a></td>
<td><a href="Noticias.html">Noticias</a></td>
</table>

<ul id="victor">
<li><a href="#">Imagen 1</a></li>
<li><a href="#">Imagen 2</a></li>
<li><a href="#">Imagen 3</a></li>
</ul>
</body>
</html>

En cuanto a que no entiendes la función, veamos. Supongo que la parte que no entiendes es esta b.style.display = (b.style.display == "none") ? "block" : "none";

Esto, (b.style.display == "none") ?, es una condicional. Dice que si b.style.display es igual a none, entonces el primer b.style.display es igual a block, sino, es igual a none

Espero haber sido lo suficientemente didáctico

Suerte

vicluber · #5 (**permalink**) 04/08/2009, 23:34

Gracias, creo que quedo claro como el agua.... vendria a ser un "if else" abreviado?

No, eso no es todo lo que tengo en mi pagina.... Supuse que me preguntabas por que si era asi, tenia que andar, asi que pegue ese mismo codigo que me diste en un html nuevo y efectivamente anduvo de mil maravillas.
El problema estaba en el codigo que hace referencia a mi archivo javascript, por que puse el codigo javascript en el mismo "index" y funciono...

En vez de poner esto...:<script language="javascript" type="text/javascript" src="javascript.js"></script>

Puse esto: <link media="screen" href="javascript.js" type="text/javascript" rel="stylesheet"/>

JAJA, muuuuuuuy mal hecho...

Gracias Adler, problema resuelto, era una boludes, pero necesitaba que alguien que sepa mas que yo me aconsejara un codigo que funcione, si no yo iba a descofiar siempre de mi codigo .java. Tengo un parcial en una semana y tengo que sentarme a estudiar (mucho por lo visto). Hasta la proxima.
De nuevo, gracias

zerokilled · #6 (**permalink**) 04/08/2009, 23:44

un archivo .js no se carga de esa manera en HTML. tienes que usar la etiqueta SCRIPT con atributo SRC. cualquier contenido dentro de las etiquetas es ignorado.

Código:

<script src="javascript.js" type="text/javascript"></script>