---
title: "Någon som har ett bra exempel på trädstruktur...?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/18153-någon-som-har-ett-bra-exempel-på-trädstruktur"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "RDL"
published: "2001-08-25T18:39:00.000Z"
updated: "2001-08-27T16:34:00.000Z"
replies: 3
views: 176
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/18153-någon-som-har-ett-bra-exempel-på-trädstruktur"
---

# Någon som har ett bra exempel på trädstruktur...?

## #1 — RDL, 2001-08-25T18:39Z

Har sett på flera sidor bla aspfree.com att de använder sig av en trädmeny.. någon som har ett bra script till detta?

Permalänk: https://www.webforum.nu/p/18153

## #2 — annesophie, 2001-08-27T13:46Z

Hej,

Jag har säkert lagt in denna 5 gånger nu... Allt du behöver fixa är lite bilder så att det ser ut som det verkligen är en trädstruktur.

Om du behöver en trestegs struktur så lade jag in ett exempel (också i jS, DHTML...hmmm...i förra veckan tror jag...

Lycka till!

MvH

/A

\<HTML\>

\<HEAD\>

\<style type="text/css"\>
a
{text-decoration: none;}

.title
{position: absolute;
width: 208px;
height: 20px;
left: 10px;
z-index: 10;
font-family: verdana;
font-size: 12px;}

.submenu
{position: absolute;
left: 25px;
width: 208px;
font-family: verdana;
font-size: 10px;
visibility: hidden;}
\</style\>

\<SCRIPT LANGUAGE="JavaScript"\>
\<!-- 

// ADDITIONAL NOTES
// The input variables to the toggle function are the number of the submenu to open/close,
// starting with 0, and the number of pixels to move the objects below.
// For example toggle(1,60) opens/closes the second submenu and moves the objects below 60 pixels.

var nom = 4; // !!!!!!!!!!!! NUMBER OF MENUS IMPORTANT YOU ARE USING !!!!!!!!!!!!
var usePictures = 1; // use pictures?  1 = yes, 0 = no

var ttls = new Array(); // An array for the title objects
var subs = new Array(); // An array for the submenu objects
var lastn;
var lastmove;

if (document.layers) {
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
for (var i = 1; i \<= nom; i++) {
ttls \= ('title' + i);
subs \= ('submenu' +i);
}
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers\[title\].document.images\[pic\].src = "images/folder.jpg";
}
else if (document.all) {
document.all(pic).src = "images/folder.jpg";
   }
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers\[title\].document.images\[pic\].src = "images/artikel.jpg";
}
else if (document.all) {
document.all(pic).src = "images/artikel.jpg";
   }
}
lastn = (nom + 1);
lastmove = 0;
function lasttoggle(n,move) {
if (n \<= nom) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers\[menu\];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n); // Remove this if you don't use pictures
for (var i = (n+1); i \<= nom; i++) {
if (document.layers) {
document.layers\[ttls\].top -= move;
document.layers\[subs\].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
            }
         }
      }
   }
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers\[menu\];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
if (usePictures) picclose(n);
for (var i = (n+1); i \<= nom; i++) {
if (document.layers) {
document.layers\[ttls\].top -= move;
document.layers\[subs\].top -= move;
}
else if (document.all) {
document.all(ttls).style.pixelTop -= move;
document.all(subs).style.pixelTop -= move;
      }
   }
}
else {
submenu.visibility = visible;
if (usePictures) picopen(n);
if (lastn != n) {
lasttoggle(lastn,lastmove);
}
for (var i = (n+1); i \<= nom; i++) {
if (document.layers) {
document.layers\[ttls\].top += move;
document.layers\[subs\].top += move;
}
if (document.all) {
document.all(ttls).style.pixelTop += move;
document.all(subs).style.pixelTop += move;
      }
   }
}
lastn = n;
lastmove = move;
}

function home()
{
	top.self.location.href="admin.html";
}

//  --\>
\</script\>
\</HEAD\>

\<BODY marginwidth="0" marginheight="0" leftmargin="0" topmargin="2" cellspacing="0" cellpadding="0"\>

\<!--MENU 1--\>
\<div class="title" id="title1" style="top: 35px"\> 
	\<a href="#" target="xxx" onclick="javascript: toggle(1,20); return false"\>\<img name="pic1" src="images/folder.jpg" border="0"\>&nbsp;MENU OPTION 1\</a\>
\</div\>
	\<div class="submenu" id="submenu1" style="top: 55px"\>
		\<img src="images/artikel.jpg"\>\<a href="xxx.html" target="xxx"\>SubMenuOption\<br\>
	\</div\>

\<!--MENU 2--\>
\<div class="title" id="title2" style="top: 55px"\> 
	\<a href="#" target="xxx" onclick="javascript: toggle(2,20); return false"\>\<img name="pic2" src="images/folder.jpg" border="0"\>&nbsp;MENU OPTION 2\</a\>
\</div\>
	\<div class="submenu" id="submenu2" style="top: 75px"\>
		\<img src="images/artikel.jpg"\>&nbsp;\<a href="xxx.html" target="xxx"\>SubMenuOption1\</a\>\<br\>
	\</div\>

\<!--MENU 3--\>
\<div class="title" id="title3" style="top: 75px"\> 
	\<a href="#" target="xxx" onclick="javascript: toggle(3,20); return false"\>\<img name="pic3" src="images/folder.jpg" border="0"\>&nbsp;MENU OPTION 3\</a\>
\</div\>
	\<div class="submenu" id="submenu3" style="top: 95px"\>
		\<img src="images/artikel.jpg"\>&nbsp;\<a href="xxx.html" target="xxx"\>SubMenuOption1\</a\>\<br\>
	\</div\>

\<!--MENU 4--\>
\<div class="title" id="title4" style="top: 95px"\> 
	\<a href="#" target="xxx" onclick="javascript: toggle(4,30); return false"\>\<img name="pic4" src="images/folder.jpg" border="0"\>&nbsp;MENU OPTION 4\</a\>
\</div\>
	\<div class="submenu" id="submenu4" style="top: 115px"\>
		\<img src="images/artikel.jpg"\>&nbsp;\<a href="xxx.html" target="xxx"\>SubMenuOption1\</a\>\<br\>
		\<img src="images/artikel.jpg"\>&nbsp;\<a href="xxx.html" target="xxx"\>SubMenuOption2\</a\>\<br\>
	\</div\>

\</BODY\>

\</HTML\>

Permalänk: https://www.webforum.nu/p/334270

## #3 — RDL, 2001-08-27T16:30Z

Tack annesophie! ;)

Permalänk: https://www.webforum.nu/p/334271

## #4 — annesophie, 2001-08-27T16:34Z

You're welcome!

Permalänk: https://www.webforum.nu/p/334272

---

Tråden på webben: https://www.webforum.nu/amne/javascript/18153-någon-som-har-ett-bra-exempel-på-trädstruktur