...

View Full Version : Expandable Menu



garrettb
07-12-2003, 01:04 AM
I am trying to build an expandable menu with images. I have the first menu item working, but cannot figure out how to get the others working. I am using div and span tags. You can view the extremely not finished page at:

http://www.allsteeloffice.com/evolution/prod_sys.html

The first menu item is systems and it works fine, but seating and others need to also be expandable. If anyone can help, I would greatly appreciate it, I am trying to learn Javascript.

garrettb
07-13-2003, 01:08 AM
I am posting the code that I am using to make it easier to see what I am trying to accomplish. Any help or push in the right direction would be greatly appreciated.

Code:
<script language="JavaScript">
<!--
//By George Chiang (www.javascriptkit.com) JavaScript site.
img1=new Image()
img1.src="nav_systems1_on.gif"
img2=new Image()
img2.src="nav_systems1_off.gif"
img3=new Image()
img3.src="nav_seating1_on.gif"
img4=new Image()
img4.src="nav_seating1_off.gif"
ns6_index=0

function change(e){

if(!document.all&&!document.getElementById)
return

if (!document.all&&document.getElementById)
ns6_index=1

var source=document.getElementById&&!document.all? e.target:event.srcElement
if (source.className=="folding"){
var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
if (source2[2+ns6_index].style.display=="none"){
source2[0].src="nav_systems1_off.gif"
source2[2+ns6_index].style.display=''
}
else{
source2[0].src="nav_systems1_on.gif"
source2[2+ns6_index].style.display="none"
}
}
}
document.onclick=change
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">

<div><img src="nav_systems1_on.gif" class="folding"><a href="dfddf"></a>
<span class="look2" style="display:none"><br>
</span>
</div>

<div><img src="nav_seating1_on.gif" class="folding"><a href="dfddf"></a>
<span class="look2" style="display:none"><br>
</span>
</div>

brothercake
07-13-2003, 04:01 AM
Do you know where that is - like, a working demo so we can see what should be happening ..?

Or you could try beetle's expanding menu, if that's what it is - http://www.codingforums.com/showthread.php?s=&threadid=11380

garrettb
07-13-2003, 03:30 PM
Thanks for the reply brothercake. I am actually using a script from:
http://www.javascriptkit.com/script/cut51.shtml and trying to modify it to work with all images. All of the expanding/contracting scripts I can find, only use images to show if it is expanded/contracted and then text for the link. I need to create the menu out of images for consistency, if you go to http://www.allsteeloffice.com/evolution/prod_sys.html the first link called systems is working the way that I need the rest of them to. In the code it only allows to name 2 images and I need to be able to use multiple images. Sorry I can't be more help, but I am just learning javascript.

cheesebagpipe
07-14-2003, 12:06 AM
hi garrettb...

Lots to look at here; that's a pretty funky script imo but, so be it. This might help, it's a modification that'll collapse unused menu levels (nice touch) and take care of the image swap, so long as you maintain your image file-naming convention:


................
img4.src="nav_seating1_on.gif"
ns6_index=0

restore.image = null;
restore.span = null;

function restore() {
if (restore.image) restore.image.src=restore.image.src.replace(/_on/, '_off');
if (restore.span) restore.span.style.display="none"
}

function change(e){

if(!document.all&&!document.getElementById)
return

if (!document.all&&document.getElementById)
ns6_index=1;

var source=document.getElementById&&!document.all? e.target:event.srcElement
if (source.className=="folding"){
var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all;

if (source2[2+ns6_index].style.display=="none"){
restore();
restore.image = source2[0];
restore.span = source2[2+ns6_index];
source2[0].src=source2[0].src.replace(/_off/, '_on');
source2[2+ns6_index].style.display=''
}
else{
source2[0].src=source2[0].src.replace(/_on/, '_off');
source2[2+ns6_index].style.display="none"
}
}
}
document.onclick=change
//-->
................

Delete all lines with 'restore' in them to cancel the automatic collapse. You're going to need to lay this out more carefully, as undisplayed elements shove other content out of the way when displayed, unprofessional looking. This:

<div style="width:170px;"><img src="nav_systems1_off.gif" class="folding" bo..........

...in the menu HTML should illustrate the wisdom of explicitly sizing your layout, particularly when dealing with 'hard' content like images. hth



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum