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

Sign in to follow this  
xploit

menu slide

Recommended Posts

xploit

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>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.