Test Index   ·   Table 1   ·   Table 2   ·   Table 3   ·   Table 4   ·   Table 5   ·   Table Firefox   ·   table css   ·   Layered Tables   ·   Resort Table   ·   Background Image in Table   ·   Selection Guides   ·   Folding Menu Tree   ·   Menu Buttons   ·   Hidden Site Map   ·   Anchors   ·   Double Border Detail





See Version 2
FROM
JAVASCRIPT KIT
with left border frame
opening in middle frame (page body)
top level (menu 1, Menu 2, Menu 3 are static and do not link)


See Version 3
FROM
DYNAMIC DRIVE
slightly different code
(my favorite version!)
with left border frame
opening in middle frame (page body)
top level (menu 1, Menu 2, Menu 3 are static and do not link)
3 levels
same images
Folding menu tree- Javascript Kit version

The code comes in two main pieces (head section & body section) and a third piece is an add on if more menu items are needed.  I will show only the first two.  If third is used, just make the same modifications to it as shown.
 
Capture the images used in menu
Right click and choose Save As on each of these links to download the actual stored gif image file.  Place the image in a file where you can find it later.  
fold    open     list
You can also just click the link to see the image file.

Capture the code
Place both the head and body codes into one document in an editor program (Notepad, etc).

Modify the code
In front of every image reference in the script, you must place ^GEMDIR/
(Use your search/find function to find the three images in the code)

Here is the modified head & body code:
To capture the code, press Select All then COPY the contents.
Select All
I have made notes in code below and it will effect functionality!
Use the Select All choice above!
<style>
<!--
a:hover{color:red}
a{text-decoration:none}
.look{font:bold 16pt Garamond,Arial;}
.look2{font:bold 12pt Garamond,Arial;}
.folding{cursor:hand}
a:hover{color:red}
//-->
</style>

<script language="JavaScript">
<!--
//By George Chiang (www.javascriptkit.com) JavaScript site.
img1=new Image()
img1.src="^GEMDIR/fold.gif"
img2=new Image()
img2.src="^GEMDIR/open.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="^GEMDIR/open.gif"
source2[2+ns6_index].style.display=''
}
else{
source2[0].src="^GEMDIR/fold.gif"
source2[2+ns6_index].style.display="none"
}
}
}
document.onclick=change
//-->
</script>

<div class="look"><img src="^GEMDIR/fold.gif" class="folding"><a href="dfddf">Menu 1</a>
<ul class="look2" style="list-style-image:url(^GEMDIR/list.gif);display:none">
    <li><a href="fdddf">Link 1a</a></li>
    <li><a href="fdddf">Link 1b</a></li>
    <li><a href="fdddf">Link 1c</a></li>
</ul>
</div><br>

<div class="look"><img src="^GEMDIR/fold.gif" class="folding"><a href="dfddf">Menu 2</a>
<ul class="look2" style="list-style-image:url(^GEMDIR/list.gif);display:none">
    <li><a href="fdddf">Link 2a</a></li>
    <li><a href="fdddf">Link 2b</a></li>
    <li><a href="fdddf">Link 2c</a></li>
</ul>
</div><br>

<div class="look"><img src="^GEMDIR/fold.gif" class="folding"><a href="dfddf">Menu 3</a>
<ul class="look2" style="list-style-image:url(^GEMDIR/list.gif);display:none">
    <li><a href="fdddf">Link 3a</a></li>
    <li><a href="fdddf">Link 3b</a></li>
    <li><a href="fdddf">Link 3c</a></li>
</ul>
</div>

Modify the link information
Change each dfddf to the URL address of your first menu (ex: http://www.page.com)
Change each menu name Menu 3 to a real menu name  (ex: News Menu)

Change each fdddf to the URL address needed (ex: http://www.cnn.com)
Change each link name Link 1a to a menu name (ex: CNN)

Insert code into a Webgem (or Insert HTML)
Paste the modified code into one webgem

Make sure you load the image files into the webgem
Disregard CSB instruction to enter ^WEBCOMPONENTDIR, CSB still uses ^GEMDIR
 web component box - add a file to go with  your inserted HTML code (webgem)

Publish!

Notes about this page:
Sample menu - links are all going to same test fdddf page!
Menu is placed in 1st column (with white background) of 2 column table.  
Without further modification, links open in same window.
FRAME NOTES:
This menu works well published with and without frames.
Since I used a top frame, the link opens under the top frame.  (try Link 1 under Menu 1 for CNN or Link 2 for my test "fdddf" page with no top frame of its own)  
If using frames, code must be further adjusted so links open in new window,  or middle frame when the left border is used.  See the 2nd version of this menu using left border and links opening in the middle frame (page body)
FRAME TARGET OPTIONS: Target= definitions - modified information from the Knowledge Base:
Should be typed like:       target="TRLX_Middle"

"_top" - The linked page will open in the entire existing browser window.

"_blank" - The linked page will open in a new browser window.

"_self" - The linked page will open in the same page area (frame) as the link.

"_parent" - The linked page will open in the parent frameset. If there is no parent frameset the link will open in the whole browser window. This works only for pages with nested frames.

"TRLX_Middle" - The target page will open in the Page Body, or middle, of the link's page.

"_search" (IE5+) - If your user is browsing with Internet Explorer 5 or later, the destination page will open in the Search pane on the left side of the Internet Explorer window.

"_media" (IE6+) - If your user is browsing with Internet Explorer 6 or later, the destination page will open in the Media pane on the left side of the Internet Explorer window.