Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » problema con menu deplegable

HTML - problema con menu deplegable

Volver
Nuevo Tema
<<>>
 
Vista:

problema con menu deplegable

Publicado por sergio (2 intervenciones) el 02/05/2007 22:56:12
Hola a todos. Tengo hecho un menu desplegabla con el siguiente codigo:

<html>
<head>
<TITLE>
</TITLE>

<style>
A:Hover { color:white; text-decoration:none; }
A { color:royalblue; text-decoration:none; font-size: 10pt; font-family: Verdana, Arial }
</style>

<SCRIPT LANGUAGE="Javascript">

ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))

if (ns4) {
layerRef="document.layers";
styleRef="";
} else {
layerRef="document.all";
styleRef=".style";
}

function afficheCalque(calque)
{
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "visible"');
}

function cacheCalque(calque)
{
eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "hidden"');
}

</SCRIPT>

</head>

<%@ taglib uri="/html" prefix="html" %>
<%@ taglib uri="/logic" prefix="logic" %>

<body>

<table width="55" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF9933">
<tr>
<td align="left">
<div id=div10 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;">
<div id=div11 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;"><html:link href="home.do">Inicio</div></html:link>
<div id=div12 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;"><html:link href="logoff.do">Salir</div></html:link>
</div>
</td>
</tr>
</table>

<table border=0 align="left" cellpadding=0 cellspacing=0>
<tr>

<td align="left">
<div style="background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove;" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">
<center><a href=# onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">CLIENTES</a></center>
</div>
</td>
</tr>
<tr>
<td align="left">
<div id=div100 onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')" style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove; visibility: hidden">
<div id=div13 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="registrarCliente.jsp" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Nuevo Cliente</a>
</div>
<div id=div14 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="verClientes.do" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Ver Clientes</a>
</div>
<div id=div15 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="introducirNif.jsp" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Buscar Clientes</a>
</div>
</div>
</td>

</tr>
</table>
</body>
</html>

Lo que ocurre es que al incluir este menu en mi pagina, ocupa tanto la franja CLIENTES como lo que ocuparía el menú con las opciones del menú cliente de modo que cuando no esta desplegado aparece un espacio en blanco grande. ¿Cómo podría hace para que digamos que el menú sólo ocupara una franja y al desplegarlo el submenú se superpusiera a lo que haya por debajo de la página? Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:problema con menu deplegable

Publicado por Iris (7 intervenciones) el 09/05/2007 16:27:50
en lugar de:
<div id=div100 onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')" style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove; visibility: hidden">

probá:

<div id=div100 onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')" style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove; display">

La primera vez te muestra todo el menú desplegado, si después te posicionás sobre Clientes y luego quitás el mouse, el submenú desaparece.
Estuve tratando de que al principio no te muestre el submenú, pero fracasé. Si lo podés hacer avisame.
Gracias.

PD: Tengo entendido que para que no ocupe espacio se usa el display = 'none' en lugar del visibility:'hidden' que esto lo que hace es no mostrarlo, pero el lugar lo sigue ocupando.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ya está!!!

Publicado por Iris (7 intervenciones) el 09/05/2007 16:39:25
Es así: en vez de visiblity:'hidden' es display ='none' y en vez de visibility: 'visible' es display = 'block'
<html>
<head>
<TITLE>
</TITLE>

<style>
A:Hover { color:white; text-decoration:none; }
A { color:royalblue; text-decoration:none; font-size: 10pt; font-family: Verdana, Arial }
</style>

<SCRIPT LANGUAGE="Javascript">

ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))

if (ns4) {
layerRef="document.layers";
styleRef="";
} else {
layerRef="document.all";
styleRef=".style";
}

function afficheCalque(calque)
{
eval(layerRef + '["' + calque +'"]' + styleRef + '.display = "block"');

/*eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "visible"'); */
}

function cacheCalque(calque)
{
eval(layerRef + '["' + calque +'"]' + styleRef + '.display = "none"');
/*eval(layerRef + '["' + calque +'"]' + styleRef + '.visibility = "hidden"'); */
}

</SCRIPT>

</head>

<%@ taglib uri="/html" prefix="html" %>
<%@ taglib uri="/logic" prefix="logic" %>

<body>

<table width="55" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF9933">
<tr>
<td align="left">
<div id=div10 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;">
<div id=div11 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;"><html:link href="home.do">Inicio</div></html:link>
<div id=div12 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:45; border-width:thin; border-color:white; border-style: groove;"><html:link href="logoff.do">Salir</div></html:link>
</div>
</td>
</tr>
</table>

<table border=0 align="left" cellpadding=0 cellspacing=0>
<tr>

<td align="left">
<div style="background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove;" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">
<center><a href=# onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">CLIENTES</a></center>
</div>
</td>
</tr>
<tr>
<td align="left">
<!--<div id=div100 onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')" style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove; visibility: hidden">-->
<div id=div100 onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')" style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; width:113; border-width:thin; border-color:white; border-style: groove; display: none">
<div id=div13 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="registrarCliente.jsp" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Nuevo Cliente</a>
</div>
<div id=div14 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="verClientes.do" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Ver Clientes</a>
</div>
<div id=div15 style="position:relative; layer-background-color:#FF9933; background-color:#FF9933; border-width:thin; border-color:white; border-style: groove;">
<a href="introducirNif.jsp" onMouseOver="afficheCalque('div100')" onMouseOut="cacheCalque('div100')">Buscar Clientes</a>
</div>
</div>
</td>

</tr>
</table>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

RE:Ya está!!!

Publicado por sergio (2 intervenciones) el 10/05/2007 22:14:40
Muchisimas gracias por la ayuda, ahora ya queda como yo quería. Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar