Jump to content

Sliding Menu


blob84
 Share

Recommended Posts

Hi I have this script:It works for each button, but I would when I press the first or the second ecc... button, the others buttons if opened must close.

<html><head><style>body{font-family:arial;}div {background-color: black;color: white;height: 0px;width: 150px;overflow: hidden;border: 2px solid yellow;}</style><script type="text/javascript">var i=0;var c=0;var intHide;var speed=3;function show_hide_menu(id){if (c==0)	{	c=1;	clearInterval(intHide);	intShow=setInterval("show()",10);	}else	{	c=0;	clearInterval(intShow);	intHide=setInterval("hide()",10);	}id1=id;}function show(){if (i<150)	{	i=i+speed;	document.getElementById(id1).style.height=i;	}}function hide(){if (i>0)	{	i=i-speed;	document.getElementById(id1).style.height=i;	}}</script></head><body><input type="button" value="bottone" onclick="show_hide_menu('div1');" /><div id="div1">ciao a tutti <br /> </div> <br /><input type="button" value="bottone" onclick="show_hide_menu('div2');" /><div id="div2"> ciao mondo</div></div> <br /><input type="button" value="bottone" onclick="show_hide_menu('div3');" /><div id="div3"> ciao mondo</div></div> </body></html>

Link to comment
Share on other sites

Are you asking us to make it so if another one is open that one must close?
I only asked a suggestion, not to make the script for me.If you try the script you know what I'm taliking about, when i said "I press the first or the second ecc... button, the others buttons if opened must close."I try to explain better the script:there are 3 buttons, all buttons use the same function, so when i press any button the function assign new height at the div, and it's seems that is "opened", if i click again on the same button the function assign new height and it seems that is "closed"; but if I click on a button while another div is still "opened", it happens strange thing, beacause the function assign at variable c the value 1 or 0, so if the div is "opened" and I click on another button to "open" another div, the current div it's "closed".I hope it's a little more clear than previous post. :)
Link to comment
Share on other sites

Instead of keeping local variables to keep track of whether it is opened or closed, you need to determine if it is opened or closed based on what the div actually looks like in the DOM. So you could check the height, for example, and if the height is smaller than a certain amount then it's closed, or else it's open. Also, you don't clear the interval once the animation finishes, you just keep calling the function but it doesn't do anything because of the if statement. It would be better to just stop calling the function, so you could add some else statements to your show and hide functions to clear the timeout once it's finished.

Link to comment
Share on other sites

I found the useful property clientHeight, weirdly is not a standard :), but it works on all browser, also IE6 :) , because is a microsoft property. :) I create a loop who check the height of the div, and if there is a div with more than 0 height it will be closed, clicking on any button.It's good but I would that if I click on another button the new div should be opened.I click on the same button, the div close OK it works!when a div is opened I click on another button, the div close OK it works!when a div is opened I click on another button, the div close, the new div should open, doesn't work!How could I do?

<html><head><style>body{font-family:arial;}div {background-color: black;color: white;height: 0px;width: 150px;overflow: hidden;border: 2px solid yellow;}</style><script type="text/javascript">var i=0;var c=0;var intHide;var speed=3;function show_hide_menu(id){//j = document.getElementById(id).clientHeight;if (c==0)	{	c=1;	clearInterval(intHide);	intShow=setInterval("show()",10);	}else {	c=0;	 var divNum = document.getElementsByClassName("subMenu").length; 	 var takeNum = parseInt(id.charAt(7)); 	 [b]	 for(x=takeNum;x<=divNum;x++) {	   //alert("subMenu"+x);	   //inizia di nuovo a contare da zero	   var x = 0;   	   while (x<=divNum) {	   h = document.getElementById("subMenu" + x).clientHeight; //restituisce l'altezza del tag	   currentDiv = document.getElementById("subMenu" + x);		 if(h>0) { 		  clearInterval(intShow);	  intHide=setInterval("hide()",10);[/b]	   } 	   x++			   				   }		} }id1=id;}function show(){if (i<150)	{	i=i+speed;	document.getElementById(id1).style.height=i;	}}function hide(){if (i>0)	{	i=i-speed;	document.getElementById(id1).style.height=i;	}}function findD(id) {    }</script></head><body><input type="button" value="bottone" onclick="show_hide_menu('subMenu0');" /><div class="subMenu" id="subMenu0">ciao a tutti <br /> </div> <br /><input type="button" value="bottone" onclick="show_hide_menu('subMenu1');" /><div class="subMenu" id="subMenu1"> ciao mondo</div></div> <br /><input type="button" value="bottone" onclick="show_hide_menu('subMenu2');" /><div class="subMenu" id="subMenu2"> ciao mondo</div></div> </body></html>

Edited by blob84
Link to comment
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
 Share

×
×
  • Create New...