menu css con js, problema

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

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

celix · #2 (**permalink**) 25/08/2005, 20:08

ayuda porfavor! que no se mucho de js. que alguien me de un empujoncito porfavor.

gracias!

jhonyweb · #3 (**permalink**) 26/08/2005, 06:30

el problema de esto esque activa onmouseout cada vez que cambia de opcion de la lista entonces el codigo jscript se complica, alguien sabe como evitar que al pasar de opcion en opcion de la lista no se active el evento onmouseout??????

celix · #4 (**permalink**) 28/08/2005, 09:46

alguien que tanga alguna idea ??