Folding menu

Main >> 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.

Copyright (C) 2007-2008 vejc-design.com. All rights reserved.
WP | ONE | GA | PB | CC

Advertising

Want to be here?

Top Affiliates

Jessica	Jabed
Fatima	Vicky
Gunnstein	Kristin
Anna	Jack
Lise	Tori

MORE?

the owner

Vibeke. 20 years old. February 23. Norway. Asker. green eyes. brown hair. soccer player.
Loves: Jan Christopher. kebab. friends. Dolly+Ferdinand. Kumsen. money. pizza. snowboard. my green car. surprises. candy. coca cola. LOST. Prison Break. Ugly Betty. sun. Nickelback.
Hates: arrogant/fake people. school. toes. rain. stealers/copiers. homework. teachers.

MORE?

Calendar

October 2008

M	T	W	T	F	S	S
« Sep
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

Domain

Owner: Vibeke
Host: one
Site name: vejc-design.com
Online since: 4. October '07
Hits:
Online: Online
Last updated: 7. October '08

MORE?

Layout

Layout up since October 1. It was made by Vibeke in Paint Shop Pro 9. Featuring Vibeke & Jan Christopher. Fonts used: Ambrosia. Texture from here.

link me

MORE?

Updates

October 7

1 coded layout

Changed "the owner" section

October 6

Layout challenge #5

11 PNGs

October 5

1 tutorial

7 textures

Ad challenge starts

9 PNGs

October 2

8 PNGs

Ads

Ad challenge

This list does not show the top referers, it only shows the last hits I have received. I will keep it a secret who wins untill October 26. Good luck everyone:)