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

Menu 2

Menu 3

See Version 2

of this Menu

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

of Menu

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

(from http://www.javascriptkit.com/script/cut51.shtml)

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
<style>  </style> <script language="JavaScript">  </script> <div class="look"><img src="HTMLobj-923/fold.gif" class="folding"><a href="http://www.lambertusa.com/test-csb/id30.htm">News Menu</a> <ul class="look2" style="list-style-image:url(HTMLobj-923/list.gif);display:none"> <li><a href="http://www.cnn.com">CNN</a></li> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 1b</a></li> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 1c</a></li> </ul> </div><br> <div class="look"><img src="HTMLobj-923/fold.gif" class="folding"><a href="http://www.lambertusa.com/test-csb/id30.htm">Menu 2</a> <ul class="look2" style="list-style-image:url(HTMLobj-923/list.gif);display:none"> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 2a</a></li> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 2b</a></li> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 2c</a></li> </ul> </div><br> <div class="look"><img src="HTMLobj-923/fold.gif" class="folding"><a href="http://www.lambertusa.com/test-csb/id30.htm">Menu 3</a> <ul class="look2" style="list-style-image:url(HTMLobj-923/list.gif);display:none"> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 3a</a></li> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 3b</a></li> <li><a href="http://www.lambertusa.com/test-csb/id30.htm">Link 3c</a></li> </ul> </div>

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>

<!--

//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>

</ul>

</div><br>

</ul>

</div><br>

</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

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.