Switch menu_keep menu 'expand' until being clicked on itself

**mtran** · 11-29-2006, 12:48 AM

Switch Menu
http://www.dynamicdrive.com/dynamici...switchmenu.htm

With this one, clicking the 2nd menu item will make the 2nd menu exand and the 1st menu collapse.

How to keep the 1st menu still 'expand' until being clicked on itself. Just like the tree/folder menu.
Thanks.

**Ges** · 11-30-2006, 07:57 AM

Hi mtran ,

This code will stay unfolded if required. The problem is that it does not persist over pages - the one from DD uses cookies to remember the state of the menu from the last visit. If I get the time I will 'merge' both scripts so that this one does;

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Fold out menu</title>
</head>

<body>

<style type="text/css">
<!--
DIV.clTop{
cursor:pointer;
position:absolute; 
width:140;
height:1;
background-color:#ECECFF;
color:#000000;
border:1px solid #000000;
padding:2px;
text-align:center;
font-weight:bold;

}
DIV.clSub{position:absolute;left:10; width:140}
#divCont{position:relative; left:0; top:0; height:400; width:140;}
A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px;text-decoration:none; font-weight:bold; color:black}
A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:#FF0000}
#divMain{position:absolute}
//-->
</style>
<script language="JavaScript">


/*
Change this if you want all the submenus to get unfold: 0 = hide last one; 1 = show all
*/
var stayFolded=1

/*
Browsercheck
*/
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)  

/*
Making cross-browser objects
*/
function makeMenu(obj,nest)
{
	nest=(!nest) ? '':'document.'+nest+'.'										
	this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')					
   	this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');		
	this.height=n?this.ref.height:eval(obj+'.offsetHeight')
	this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;							
	this.hideIt=b_hideIt;	this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt											
	return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
/*
Initiating the page. Just add to the arrays here to get more menu items
and add divs in the page
*/
function init()
{
	oTop=new Array()
	oTop[0]=new makeMenu('divTop1','divCont')
	oTop[1]=new makeMenu('divTop2','divCont')
	oTop[2]=new makeMenu('divTop3','divCont')
	oTop[3]=new makeMenu('divTop4','divCont')


	oSub=new Array()
	oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')
	oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')
	oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')
	oSub[3]=new makeMenu('divSub4','divCont.document.divTop3')


	for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
	for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
/*
This is the function that changes the sub menus to folded or unfolded state.
*/

function menu(num)
{
	if(browser)
	{
		if(!stayFolded)
		{
			for(i=0;i<oSub.length;i++)
			{
				if(i!=num) oSub[i].hideIt()
			}
			for(i=1;i<oTop.length;i++)
			{
				oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
			}
		}
		oSub[num].vis()?oSub[num].showIt():oSub[num].hideIt()
		for(i=1;i<oTop.length;i++)
		{ 
			if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height) 
			else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
		}
	}
}
//Initiating the menus onload, if it's a 4.x+ browser.
if(browser) onload=init;
</script>
</head>

<body bgcolor="white">

<div id="divCont">
	<div id="divTop1" class="clTop">
	<a href="#" onclick="menu(0); return false" class="clMain">Site Menu</a>
		<div id="divSub1" class="clSub"><br><br>
			- <a href="new.htm">What's New</a><br>
			- <a href="hot.htm">What's hot</a><br>
			- <a href="revised.htm">Revised Scripts</a><br>
			- <a href="morezone/">More Zone</a>
			
		</div><br>
	</div>
	<div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain">FAQ/Help</a>
		<div id="divSub2" class="clSub"><br><br>
			- <a href="notice.htm">Usage Terms</a><br>
		- <a href="faqs.htm">DHTML FAQs</a><br>
		- <a href="help.htm">Scripts FAQs</a>
		</div><br>
	</div>
	<div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain">Help Forum</a>
		<div id="divSub3" class="clSub"><br><br>
				- <a href="http://www.codingforums.com">Coding Forums</a><br>

		</div><br>
	</div>
	<div id="divTop4" class="clTop"><a href="#" onclick="menu(3); return false" class="clMain">Cool Links</a>
		<div id="divSub4" class="clSub"><br><br>
			- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
		- <a href="http://www.freewarejava.com">Freewarejava</a><br>
		- <a href="http://www.cooltext.com">Cool Text</a><br>
		- <a href="http://www.google.com">Google.com</a>
		</div><br>
	</div>
	

</div>


</body>
</html>

Hope this helps for now.

However, have you checked out?

http://www.dynamicdrive.com/dynamici...witchmenu2.htm

Have'nt tried it myself but you might want to.
Regards,
Ges.

Thread: Switch menu_keep menu 'expand' until being clicked on itself

Thread Tools

Search Thread

Switch menu_keep menu 'expand' until being clicked on itself

Bookmarks

Bookmarks

Posting Permissions