Folding menu

Main >> Content >> Tutorials >> HTML >> Folding menu

I have had alot of questions on how to make this menu and what the code was. To be hones, I didn't know, but I have searched many websites to get to know this, so here's finally the tutorial on how to make a so calles Folding Menu. Here's how the menu looks like:

• MENU EXAMPLE
• PAGE


• PAGE


• PAGE

Step 1: To begin with, copy the code under and paste it on the page you want to have the menu. This is the code you need for the menu to work.
<script language="JavaScript1.2"> <!-- //Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02) //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com //This credit MUST stay intact for use var head="display:''" img1=new Image() img1.src="fold.gif" img2=new Image() img2.src="open.gif" var ns6=(document.getElementById&&!document.all||window.opera) var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1 function checkcontained(e){ var iscontained=0 cur=ns6? e.target : event.srcElement i=0 if (cur.id=="foldheader") iscontained=1 else while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){ if (cur.id=="foldheader"||cur.id=="foldinglist"){ iscontained=(cur.id=="foldheader")? 1 : 0 break } cur=ns6? cur.parentNode : cur.parentElement } if (iscontained){ var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0] if (foldercontent.style.display=="none"){ foldercontent.style.display="" cur.style.listStyleImage="url(open.gif)" } else{ foldercontent.style.display="none" cur.style.listStyleImage="url(fold.gif)" } } } if (ie4||ns6) document.onclick=checkcontained //--> </SCRIPT>

Step 2: Then copy this code and paste it exactly where you want to have the menu. This is the code that gives you the menu.
<FONT style="FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR:#000000 ; FONT-FAMILY:terminal; LETTER-SPACING: 1px"> <ul> <li id="foldheader">MENU</li> <ul id="foldinglist" style="display:none" style="&{head};"> <li id="foldheader"><a href="URL">PAGE</a></li><BR> <li id="foldheader"><a href="URL">PAGE</a></li><BR> <li id="foldheader"><a href="URL">PAGE</a> </li></ul></ul></FONT>

Step 3: Where it says MENU, you can write the name of the menu. Where it says URL paste the URL-adress of the pages you'd like to have in the menu, and where it says PAGE type in the name of the pages.

Step 4: If you want more pages, just copy the code under and paste it under the other ones:
<li id="foldheader"><a href="URL">PAGE</a></li><BR>

Step 5: There, your new menu should now be finished, my menu is on top of this page.