CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jonasst Nybegynder

18. maj 2007 - 10:53 Der er 13 kommentarer

Hjælp til start på træ menu

Hej eksperter
Håber der er nogen som gider tage mig i hånden og hjælpe mig i gang med at lave en træ menu. Den skal bare være helt enkel med grene og undergrene og ingen grafiske ikoner. Har snuset rundt på nettet og prøvet et par forskellig tutorials men kan ikke få nogen af dem til at virke.
Så nu kaster jeg midlertidigt håndklædet i ringen og håber på hjælp:)

Synes godt om

w13 Novice

18. maj 2007 - 12:39 #1

Har du en side der bruger en træ-menu, som du lige kan droppe et link til. Som jeg ser det, kan de fungere på flere måder, så ville gerne lige se, hvad præcis du ønsker. =)

Synes godt om

olebole Juniormester

18. maj 2007 - 12:56 #2

<ole>

Prøv at vise en af dem, du ikke kan få til at virke - og vise, hvad du har forsøgt ... så har vi et sted at starte. Kan du ikke få en færdig menu til at virke, er det langtfra realistisk, du selv kan skrive en fra bunden - blot med en smule hjælp. Det er ikke helt så let ;o)

/mvh
</bole>

Synes godt om

jonasst Nybegynder

18. maj 2007 - 14:47 #3

ok lad os gøre det på den måde. Her er et hvor jeg har fprsøgt at følge vejledningen men kune fået en tom side ud af det

1. Specify the CSS styles to be used with the tree nodes in your document's head:

<STYLE type="text/css"> A.treenode:link { color: black; text-decoration: none; font-weight: bold }
A.treenode:visited { color: black; text-decoration: none; font-weight: bold }
A.treemarker:link { color: red; text-decoration: none; font-weight: bold }
A.treemarker:visited { color: red; text-decoration: none; font-weight: bold }
BLOCKQUOTE.treenode {margin-top: 0; margin-bottom: 0; margin-right: 0 }
</STYLE>

2. Reference the tree.js file in your document's head:

<SCRIPT language="JavaScript" src="tree.js">
</SCRIPT>

3. Create your Tree object and Node objects as described in the previous page. Add your Node objects to the Tree object and each other using the addNode() method. Modify this example to define and add your own tree nodes.

<SCRIPT language="JavaScript">
var tree = new Tree("tree", "t1")
n0 = new Node("Web Technologies","java script:void(0)","",tree)
n1 = new Node("Client-Side Technologies","java script:void(0)","",tree)
n2 = new Node("Server-Side Technologies","java script:void(0)","",tree)
.
.
.
n26 = new Node("PHP: Hypertext Preprocessor","http://www.builder.com/Programming/PHPIntro/?tag=st.bl.3882.dir1.PHPIntro","external",tree)
tree.addNode(n0)
n0.addNode(n1)
n0.addNode(n2)
.
.
.
n24.addNode(n241)
n24.addNode(n242)
</SCRIPT>

4. Set your document's onload event handler to window.scroll(0,yoffset):

<BODY onload="window.scroll(0,yoffset)">

5. Use the following script in your document's body to display the tree:

<SCRIPT language="JavaScript">
tree.loadState()
tree.display()
</SCRIPT>

Synes godt om

jonasst Nybegynder

18. maj 2007 - 14:47 #4

taget fra http://builder.com.com/5100-31-5072101.html

Synes godt om

olebole Juniormester

21. maj 2007 - 12:49 #5

Det er tussegammel kode - måske derfor(?) =)

Synes godt om

jonasst Nybegynder

22. maj 2007 - 15:14 #6

Sikkert kender du en nyere jeg kan bruge?

Synes godt om

olebole Juniormester

22. maj 2007 - 15:53 #7

Ikke umiddelbart nogen til gratis download :o|

Synes godt om

jonasst Nybegynder

22. maj 2007 - 20:21 #8

Nu får du jo også point for det :p
ellers stopper den ligesom her kan man sige. Har fundet et script i en Libris bog som jeg prøver af og poster her i morgen

Synes godt om

jonasst Nybegynder

24. maj 2007 - 12:35 #9

Har fundet et script i bogen 44 Javascripts klar til brug:

var menuStatus = new Array();

function openMenu(menuID,object) {
rowID=object.rowIndex+1;
obj=object.parentNode;
if (!menuStatus[menuID] || null) {
obj.rows[object.rowIndex].cells[0].innerHTML = obj.rows[object.rowIndex].cells[0].innerHTML.replace(/c.gif/,'o.gif');
obj.insertRow(rowID);
obj.rows[rowID].insertCell(0);
obj.rows[rowID].cells[0].innerHTML=document.getElementById(menuID).innerHTML;
obj.rows[rowID].cells[0].className='submenu';
menuStatus[menuID]=true }
else {
obj.rows[object.rowIndex].cells[0].innerHTML = obj.rows[object.rowIndex].cells[0].innerHTML.replace(/o.gif/,'c.gif');
obj.deleteRow(rowID);
menuStatus[menuID]=false }
}

function highlight(object){
object.className='menuhover';
}

function dontHighlight(object){
object.className='menu';
}

<HTML>
<HEAD>
<TITLE> Hierarkisk menu </TITLE>

<script src="menu.js"></script>

<style type="text/css">
#dynTable {
position:absolute;
top:20px; /* Menuens placering fra top */
left:20px; /* Menuens placering fra venstre */
border:1px black solid; /* Menuens kant */
cursor:pointer;cursor:hand; /* Musepilens form over menuen */
width:140px; /* Menuens bredde */
}
.menu {
height:22px; /* Menuteksts højde */
color:#FFFF99; /* Menuteksts farve */
background-color:#00CCFF; /* Menuteksts baggrundsfarve */
font-family:verdana; /* Menuteksts skrifttype */
font-size:14px; /* Menuteksts størrelse */
font-weight:bold; /* Menuteksts form */
}
.menuhover {
height:22px; /* Menuteksts højde */
color:white; /* Menuteksts farve */
background-color:gray; /* Menuteksts baggrundsfarve */
font-family:verdana; /* Menuteksts skrifttype */
font-size:14px; /* Menuteksts størrelse */
font-weight:bold; /* Menuteksts form */
}
.menulink {
color:#FFFF99; /* Menuteksts farve */
text-decoration:none; /* Ingen understregning af links*/
}
.submenu {
width:100%; /* Submenuteksts bredde */
color:black; /* Submenuteksts farve */
background-color:#CCFFFF; /* Submenuteksts baggrundsfarve */
font-family:verdana; /* Submenuteksts skrifttype */
font-size:12px; /* Submenuteksts størrelse */
text-decoration:none; /* Ingen understregning af links*/
}
A.submenu:hover{
font-weight:bold; /* Den aktive submenuteksts tekstform*/
color:white; /* Den aktive submenuteksts farve*/
background-color:gray; /* Den aktive submenuteksts baggrundsfarve*/
}
</style>
</HEAD>
<BODY>
<TABLE id=dynTable border=0 cellpadding=0 cellspacing=0>
<TR onClick="openMenu('menu1',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 1</TD></TR>
<TR onClick="openMenu('menu2',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 2</TD></TR>
<TR onClick="openMenu('menu3',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 3</TD></TR>
<TR>
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif" style="visibility:hidden"> <A HREF="#" class=menulink target=main>Menupunkt 4</A></TD></TR>
<TR onClick="openMenu('menu5',this)">
<TD class=menu onMouseOver="highlight(this)" onMouseOut="dontHighlight(this)">
<IMG SRC="c.gif"> Menupunkt 5</TD></TR>
</TABLE>

<div id=menu1 style="visibility:hidden">
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
<div id=menu2 style="visibility:hidden">
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
<div id=menu3 style="visibility:hidden">
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
<div id=menu5 style="visibility:hidden">
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om CSS</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om JavaScript</a><br>
<a href="http://www.dynamiskhtml.dk" class=submenu target=main> Om DHTML</a></div>
</BODY>
</HTML>

Det virker egentlig helt fint til mit behov. Mit spørgsmål er nu bare: hvordan forhindre jeg at menuen klapper sammen hvergang brugeren trykker på et hyperlink??

Synes godt om

olebole Juniormester

24. maj 2007 - 14:42 #10

Ked af at sige det, men det er også en (dramatisk) slem gang slam :o|

Synes godt om

jonasst Nybegynder

24. maj 2007 - 16:37 #11

Ja det kan du jo nemt sige - men det er ligsom ikke til nogen hjælp. Kan vi være lidt konstruktive istedet?

Synes godt om

w13 Novice

15. november 2007 - 19:16 #12

Lukketid?

Synes godt om

w13 Novice

07. august 2008 - 10:31 #13

Lukkes?

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS