• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

xploit

menu slide

2 mensagens neste tópico

Viva, estou a tentar descobrir como faço isto so que javascript decididamente nao e o meu forte nao chego la..

Eu tenho um menu slide que saquei da net, e ta a funcionar perfeitamente, so que o que eu gostaria de fazer e que ao dar ONMOUSEOUT o slide com os submenus fecha-se, porque ele so esta a funcionar com o ONMOUSEOVER ou seja eu passo o rato e ele fica sempre ali o menu, so volta a fechar se passar com o rato por cima do menu outra vez...

Jpagina.html

<head>

<style type="text/css">
a {color:#000;}
a:visited {color:#111;}
a:hover {color:#222;}
#container {position:relative; z-index:100;}

#outer {padding:0; text-align:center; margin:0; width:800px; background:url(back.gif); height:26px; position:relative; z-index:500;}
#outer ul {margin:0; float:left; padding:0 0 0 100px; list-style-type:none; height:26px; border-right:1px solid #aaa;}
#outer ul li {float:left;}
#outer ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:10px; text-decoration:none;text-align:center; line-height:22px; display:block; height:30px; padding:0 20px; white-space:nowrap; color:#000; border-left:1px solid #aaa;}
#outer ul li a.down {background: #00FF00 right center;}
#outer ul li a:hover {color:#fff; background:#689;}

#outer ul li#ul_1 a.down:hover {color:#fff; background:#ef8e41 url(down_over.gif) no-repeat right center;}

#outer ul li a:focus {outline:0;}
#outer ul li#li_1.shrink a.down {color:#fff; background:#ef8e41 url(down_over.gif) no-repeat right center;;}
#outer ul li#li_2.shrink a.down {color:#fff; background:#e7b03b url(down_over.gif) no-repeat right center;;}
#outer ul li#li_3.shrink a.down {color:#fff; background:#f78191 url(down_over.gif) no-repeat right center;;}
#outer ul li#li_4.shrink a.down {color:#fff; background:#adb24d url(down_over.gif) no-repeat right center;;}

#submenus {width:150px; background:#6a849f; position:absolute; top:5px; left:0; z-index:0;}
#submenus div {height:0px; position:absolute; top:26px; left:0; width:150px; overflow:hidden;}
#submenus div#ul_1 {background:#ef8e41; opacity:0.80;}
#submenus div#ul_2 {background:#e7b03b;}
#submenus div#ul_3 {background:#f78191;}
#submenus div#ul_4 {background:#adb24d;}
#submenus div ul {padding:0; margin:0; list-style:none; position:absolute; left:0; bottom:0; height:auto; width:150px;}
#submenus div ul li {float:left; width:150px;}
#submenus div ul li a {font-family:verdana, arial, sans-serif; float:left; font-size:10px; color:#fff; text-decoration:none;text-align:left; line-height:20px; display:block; height:auto; width:140px; padding:0 0 0 10px;}
#submenus div ul li a:hover {color:#fff; text-decoration:underline;}

</style>
</head>
<body>
<div id="container">
<div id="outer">
<ul id="menu">
<li id="no1"><a href="#nogo">Home</a></li>
<li id="li_1"><a class="down" href="#nogo">Sales</a></li>
<li id="li_2"><a class="down" href="#nogo">Services</a></li>
<li id="li_3"><a class="down" href="#nogo">Contacts</a></li>
<li id="li_4"><a class="down" href="#nogo">Store Location</a></li>
<li id="no2"><a href="#nogo">Privacy policy</a></li>
</ul>
</div>

<div id="submenus">
<div id="ul_1">
<ul>
	<li><a href="#nogo11">Digital SLR Cameras</a></li>
	<li><a href="#nogo12">Interchangeable Lenses</a></li>
	<li><a href="#nogo13">Flash Guns and Accessories</a></li>
	<li><a href="#nogo14">Professional Tripods</a></li>
	<li><a href="#nogo15">Filters & Lens Hoods</a></li>
</ul>
</div>
<div id="ul_2">
<ul>
	<li><a href="#nogo21">Printing & Framing</a></li>
	<li><a href="#nogo22">Photo Editing</a></li>
	<li><a href="#nogo23">Storage & Backup</a></li>
</ul>
</div>
<div id="ul_3">
<ul>
	<li><a href="#nogo31">Support</a></li>
	<li><a href="#nogo32">Sales</a></li>
	<li><a href="#nogo33">Buying</a></li>
	<li><a href="#nogo34">Photographers</a></li>
	<li><a href="#nogo35">Stockist</a></li>
	<li><a href="#nogo36">General</a></li>
</ul>
</div>
<div id="ul_4">
<ul>
	<li><a href="#nogo41">South West Region</a></li>
	<li><a href="#nogo42">North East Region</a></li>
	<li><a href="#nogo43">Central Region</a></li>
</ul>
</div>
</div>
</div> <!-- end of container -->
<script type="text/javascript">

var getCurrent = document.getElementById('menu').getElementsByTagName("LI");

var getEls = document.getElementById('menu').getElementsByTagName("LI");
var getListElts = document.getElementById('submenus').getElementsByTagName("DIV");
var getAgn = getEls;


for (var i=0; i<getEls.length; i++) {
	getEls[i].onmouseover=function() {
	for (var z=0; z<getAgn.length; z++) {
		if (this.id != getAgn[z].id) {
			getAgn[z].className="";
			}

	}
	if (this.className == "") {
	this.className = 'clicked';
	}
	ulId = this.id.replace("li", "ul");




	eLeft = this.offsetLeft;

	eNext = document.getElementById(ulId).firstChild;
	while (eNext.nodeType!=1) {eNext = eNext.nextSibling;}

	document.getElementById(ulId).style.left = eLeft + "px";

if (this.className=='clicked') {
slideOut ()
this.className="shrink";
}
else {
contractOnce (eNext.offsetHeight,-1,ulId)
this.className="";
}

slideIn ()


	}

}



function expand (cY, fY, subY) {
cY=cY+4;
if (cY <= fY) {
document.getElementById(subY).style.height = cY + "px";
setTimeout ("expand("+cY+","+fY+",'"+subY+"')", 2);
}
slideIn ()

}

function contract (cZ, fZ, subZ) {
cZ=cZ-5;
if (cZ >= fZ) {
document.getElementById(subZ).style.height = cZ + "px";
setTimeout ("contract("+cZ+","+fZ+",'"+subZ+"')", 2);
}
slideOut ()
}


function contractOnce (cW, fW, subW) {
cW=cW-5;
if (cW >= fW) {
document.getElementById(subW).style.height = cW + "px";
setTimeout ("contractOnce("+cW+","+fW+",'"+subW+"')", 2);
}
}


function slideOut () {
	startPos = parseInt(document.getElementById(ulId).offsetHeight);
	if (startPos == 0) {
	expand (0,eNext.offsetHeight+1,ulId)
	}
}

function slideIn () {
for (var t=0; t<getListElts.length; t++) {
	if (ulId != getListElts[t].id && getListElts[t].style.height > 0 + "px"){
	currentHeightt = parseInt(getListElts[t].style.height);
	eNextt = document.getElementById(getListElts[t].id).firstChild;
	while (eNextt.nodeType!=1) {eNextt = eNextt.nextSibling;}

			if (currentHeightt == parseInt(eNextt.offsetHeight)) {
			thisSubt = getListElts[t].id;
			contract (currentHeightt,-1,thisSubt)
			}
		}
	}
}

</script>

</body>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora