Desarrollo y diseño

Menu desplegable Javascript

Zuki
Zuki #1 May '07

Buenas estoy desarrollando una pagina web en la cual uno de los menus se despliega o hace aparecer una nueva capa con un contenido, pero no se como hacerlo he realizado lo siguiente:
<head>
<script language="javascript">
function models(){
document.write('<div class="desplegable">Serie 1<br>Serie 3<br>Serie 5<br>Serie 6<br>Serie 7<br>Serie M<br>X3<br>X5</div>');
}

</script>
</head>


<div class="models" onClick="models();">Models</div>
</body>


Lo que me realiza es un linc a una pagina nueva con cada uno de los elementos puestos en el document.write, yo lo que quiero es ke aparezcaal hacer click o al pasar el raton por encima.

Gracias de antemano

Saludos

W
willy__chaos #2 May '07

No se casi nada de js pero no seria en vez de onclic -> onmouseover ?? Pregunto

Edit:

Pensaba que te referias a una opcion u otra, no a las dos xD tonces no tengo ni zorra.

Zuki
Zuki #3 May '07

Si lees veraas qeu e puesto que cuando haga click o cuando pase por encima el raton ma da igual cualsequiera de las funciones.

yo lo ke keiro es ek se me muestre la capa en el mismo ducumento donde estoy

dirtypablo
dirtypablo #4 May '07

Prueba con este script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desplegable en Javascript</title>
<script>
function muestra(myid,myboton)
{
if(document.getElementById(myid).style.display=='')
{
document.getElementById(myid).style.display = "none";
document.getElementById(myboton).value = "+";
}
else
{
document.getElementById(myid).style.display = "";
document.getElementById(myboton).value = "-";
}
}
</script>
<style type="text/css">
<!--
body {
font-family: verdana;
font-size: 12px;
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
margin: 10px;
}
.btn {
font: 8px arial;
color: #000000;
text-decoration: none;
font-size-adjust:8px;
background: #FFFFFF;
padding:0px;
width: 14px;
height: 14px;
border: 1px solid #000000;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
.ul, li {
list-style: none;
margin:2px;
padding:2px;
font-family: verdana;
font-size:10px;
color:#00000;
}
-->
</style>
</head>

</table>

<li>


<li>sub 1.1</li>
<li>sub 2.2</li>
<li>sub 3.3 </li>
</ul>
</li>
<li>

opcion 2

<li>sub 2.1</li>
<li>sub 2.2</li>
<li>sub 2.3 </li>
</ul>
</li>
<li>

opcion 3

<li>sub 3.1</li>
<li>sub 3.2</li>
<li>sub 3.3 </li>
</ul>
</li>
</ul>
</body>
</html>

M4Kr0v
M4Kr0v #5 May '07

Dreamweaver, aunque soy partidario de meter el codigo a pelo, no obstante, el dreamweaver es lo mejor, lo puedes hacer sin ningun problema, luego pillas y copias el script de JS y listo, no tiene mayor complicacion.

Zuki
Zuki #6 May '07

Ya emcomtre la forma de hacerlo, yo lo hago todo a traves de codigo pero utilizo dreamweaver como programa de edicion html. Me gusta mas el codigo ya que se pueden hacer mas cosas y es mas preciso. bueno a lo que iba os dejo el codigo por si a alguien le interesa.

<script language="javascript">
function most(a){

switch(a)
{
case 1 :
{
document.all('quisom').style.visibility='visible';
document.all('model').style.visibility='hidden';
break;
}
case 2 :
{
document.all('model').style.visibility='visible';
document.all('quisom').style.visibility='hidden';
break;
}
default :
{
document.all('quisom').style.visibility='hidden';
document.all('model').style.visibility='hidden';
break;
}
}
}
</script>
//fin del head

//principio del body

<div class="qui" onMouseOver="most(1)">Qui som?</div>

Zuki
Zuki #7 May '07

<div id="quisom">
<a href="empresa.html">L'Empresa</a><br>
<a href="historia.html">Historia</a>
</div>

Lo que hago en este script es que cuando pase p'or encima del elemento quisom cambiara la propiedad de la capa que hace de menu y la pondra visible. Si el raton se sale de la capa tanto la del menu como la del boton se escondera.

Os dejo la web donde lo encontre poor si no me he explicado bien gracias por todo.

http://www.gamarod.com.ar/javascript/las_capas_rutina_javascript.asp

Aqui se explica como hacerlo con un if yo lo he echo con un switch que queda mas limpio para lo que yo quiero hacer.

B
[Borrado] #8 May '07

#6 ¿Document.all? NO, gracias. Eso no te funcionara en otros navegadores aparte del Exploiter.

No se como lo quieres exactamente, pero yo lo haria exclusivamente con CSS, aqui tienes una buena pila de ejemplos:

http://www.cssplay.co.uk/menus/

Salu2

Usuarios habituales