menu drop-down ,problema

celix · #1 (**permalink**) 23/08/2005, 14:53

hola, tengo un problema. me copie un menu css de una pagina, lo adapte a mis medidad y todo bien, pero el problema es uno estetico, y no sabria como solucionarlo.

cuando pasas por las diferentes opciones, aparece un menu abajo con subopciones y si cambias de opcion tambien cambian las "subopciones". lo queno me gusta es que cuando pasaste por un casillero y quitas el maus de ahi, las subopciones siguen en la pantalla y yo quisiera que desparasescan.

les pongo el codigo para que entiendan mejor:

Código HTML:

<SCRIPT type=text/javascript>
<!--
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</SCRIPT>

<STYLE type=text/css>BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: white; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 80% verdana, arial, sans-serif; PADDING-TOP: 0px
}
DL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DT {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
DD {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu {
	Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px
}
#menu DL {
	FLOAT: left; WIDTH: 12%
}
#menu DT {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; FONT-WEIGHT: bold; BACKGROUND: #54A9F9; MARGIN: 1px; BORDER-LEFT: gray 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid; TEXT-ALIGN: center
}
#menu DD {
	BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; DISPLAY: none; BORDER-LEFT: gray 1px solid; BORDER-BOTTOM: gray 1px solid
}
#menu LI {
	BACKGROUND: #fff; TEXT-ALIGN: center
}
#menu LI A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu DT A {
	BORDER-RIGHT: 0px; BORDER-TOP: 0px; DISPLAY: block; BORDER-LEFT: 0px; COLOR: #000; BORDER-BOTTOM: 0px; HEIGHT: 100%; TEXT-DECORATION: none
}
#menu LI A:hover {
	BACKGROUND: #92CAFF;
}
#menu DT A:hover {
	BACKGROUND: #eee;
}
#site {
	BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; Z-INDEX: 1; LEFT: 10px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; COLOR: #000; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 70px; BACKGROUND-COLOR: #ddd
}

</STYLE>

<BODY>
<DIV id=menu>

<DL>
<DT onmouseover="javascript:montre('smenu1');">Colonia
	<DD id=smenu1>
	<UL>
	<LI><a href="" target="_parent">submenu1</a> 
	<LI><a href="" target="_parent">submenu2</a> 
	<LI><a href="" target="_parent">submenu3</a> 
	<LI><a href="" target="_parent">submenu4</a> 
	</LI>
	</UL>
	</DD>
</DL>

me dejo entender? como haria? a lo mejor una funcion onmouseover, pero no sbaria que ponerle. ayuda porfavor, gracias

baccxus · #2 (**permalink**) 23/08/2005, 15:35

Te hace flata la opción de quitar el menú en "onmouseout", deberías pasarte por el foro de javascript allá te brindarán una mejora ayuda.

Saludos,

celix · #3 (**permalink**) 23/08/2005, 16:07

ya lo puse, nada por el momento, creo que no es tan dificil, pero de js no se mucho.

baccxus · #4 (**permalink**) 23/08/2005, 16:48

si quieres te paso uno que uso mucho, se divide en dos partes, una que es la programación del menú y otra que es el contenido del menu y la formulación de colores.

Si algo me avisas.

Saludos

celix · #5 (**permalink**) 23/08/2005, 17:27

perfecto baccxus, lo que quiciera ver es como tendria que hacer la funcion de onmouseout. mi mail es [email protected]
gracias!

baccxus · #6 (**permalink**) 23/08/2005, 17:45

Esta es la programación del menú:
http://usuarios.lycos.es/baccxus/mm_menu.js
Este es el diseño del menu (colores y textos internos):
http://usuarios.lycos.es/baccxus/mm_menu_aplicate.js
y así es la forma de aplicarlo:

Código HTML:

<a href="#" onmouseout="MM_startTimeout();"onmouseover="MM_showMenu(window.mm_menu_0219130431_7,125,240,null,'masthead');">C&aacute;maras</a>

Saludos

PD: Solo deberas cambiarlo para lo que necesitas.
PD #2: En la forma de aplicarlo, estos dos valores, son la posición donde van los menus (H, V): 125,240, ya tu lo cambiarías

celix · #7 (**permalink**) 23/08/2005, 18:07

baccxus me mataste! jaja. tanto no se de js. me estoy confundiendo mucho. seria mucho pedir que veas mi codigo y ver como se haria? mil gracias!

kemie · #8 (**permalink**) 24/08/2005, 02:23

puedes copiar este, que es bastante facil:
http://www.htmldog.com/articles/suckerfish/dropdowns/