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

snooby Nybegynder

10. maj 2007 - 22:11 Der er 15 kommentarer og
1 løsning

Hjælp til menu

Er der en som kan hjælpe mig med min menu her.
har lavet koderne man der er en del af den som ikke virker.
den med at under links skal komme frem og gå væk når man klikker på et andet link

----------------------------------------------------------

Min menu skal virke sådan:

Hoved link 1
- under link 1
- under link 2

Hoved link 2
- under link 3
- under link 4

----------------------------------------------------

Når man trykker på hoved link 1 sker:
Man linker til en side som hedder hoved link 1
og på samme tid ser man
- under link 1
- under link 2

Vis man trykker på hoved link 2 sker:
Man linker til hoved link 2
og på samme tid skifter man fra at kunne se
- under link 1
- under link 2
til at man kan se
- under link 3
- under link 4

-----------------------------------------------------------------

Forklaret på en anden måde:

Når man trykker på Hoved link 1 ser menuen sådan ud og man linker til siden "Hoved link 1":

Hoved link 1

- underlink 1
- underlink 2

Hoved link 2

Når man trykker på Hoved link 2 skal menuen se sådan ud og man linker til siden "hoved link 2":

Hoved link 1

Hoved link 2

- under link 3
- under link 4

-----------------------------------------------------------------

her er mine koder:

<script language="javascript" type="text/javascript">
var selectedMenu

function updateMenu(BottonIndex)
{

var b = {1:"none",2:"none",3:"none",4:"none",5:"none",6:"none"}

if (selectedMenu != BottonIndex) {
selectedMenu = BottonIndex;
b[BottonIndex] = "inline";
}
else {
selectedMenu = 0;
}

document.getElementById("Forside").style.display = b[1];
document.getElementById("Lejligheden").style.display = b[2];
document.getElementById("Info").style.display = b[3];
document.getElementById("Links").style.display = b[4];

document.getElementById("ForsidePic").style.cursor = "hand";
document.getElementById("LejlighedenPic").style.cursor = "hand";
document.getElementById("InfoPic").style.cursor = "hand";
document.getElementById("LinksPic").style.cursor = "hand";

}

</script>

<body onload="updateMenu(0)">

<a onclick=updateMenu(1) href="#" id=ForsidePic>Forside</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px;" align=center id=Brivia>
<center>
<A href="#"><font size="1" face="Verdana" color=Black> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color=Black> 2 </font></A><br></center></DIV>

<a onclick=updateMenu(2) href="#" id=Lejlighed>Lejligheden</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px;" align=center id=Brivia>
<center>
<A href="#"><font size="1" face="Verdana" color=Black> Grundplan </font></A><br>
<A href="#"><font size="1" face="Verdana" color=Black> Faceliteter </font></A><br>
<A href="#"><font size="1" face="Verdana" color=Black> Pris </font></A><br></center></DIV>

<a onclick=updateMenu(3) href="#" id=InfoPic>Info</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px;" align=center id=Brivia>
<center>
<A href="#"><font size="1" face="Verdana" color=Black> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color=Black> 2 </font></A><br></center></DIV>

<a onclick=updateMenu(4) href="#" id=Linkspic>Links</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px;" align=center id=Brivia>
<center>
<A href="#"><font size="1" face="Verdana" color=Black> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color=Black> 2 </font></A><br></center></DIV>

Synes godt om

snooby Nybegynder

10. maj 2007 - 23:19 #1

hjælp ?

Synes godt om

roenving Novice

10. maj 2007 - 23:25 #2

Måske kan du få inspiration fra denne: http://www.eksperten.dk/spm/485556#rid4489881 ?-)

Synes godt om

snooby Nybegynder

10. maj 2007 - 23:42 #3

det ser kompliceret ud :S må kunne gøres simpler noget i retningen af mit..

Synes godt om

roenving Novice

11. maj 2007 - 00:01 #4

Ja, der er jo også expand/contract-tingen med, men det var lige det link jeg kunne finde ...

Synes godt om

snooby Nybegynder

11. maj 2007 - 08:30 #5

ja men hvordan får jeg dte til at virke ?

Synes godt om

crazysnap Seniormester

11. maj 2007 - 12:14 #6

Hej snooby,

Jeg har lige hurtigt ændret i dit javascript og html-script så den udfører den handling du snakker om. Du manglede forresten også en del "" omkring dine forskellige attributer på html-elementerne, men det kan du se af scriptet nedenfor. :)

Jeg håber det var noget dette du søger, ellers må du jo skrive tilbage med evt. ændringer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/TR/html401">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
var selectedMenu = null;

function updateMenu(hMenu)
{
//Close previous menu
if (selectedMenu != null)
selectedMenu.style.display = "none";

selectedMenu = document.getElementById(hMenu.id + "1");

selectedMenu.style.display = "block";
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a onclick="updateMenu(this)" href="#" id="ForsidePic">Forside</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px; display: none;" align="center" id="ForsidePic1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> 2 </font></A><br>
</center>
</DIV>
</td>
</tr>
<tr>
<td>
<a onclick="updateMenu(this)" href="#" id="Lejlighed">Lejligheden</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px; display: none;" align="center" id="Lejlighed1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> Grundplan </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> Faceliteter </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> Pris </font></A><br>
</center>
</DIV>
</td>
</tr>
<tr>
<td>
<a onclick="updateMenu(this)" href="#" id="InfoPic">Info</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px; display: none;" align="center" id="InfoPic1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> 2 </font></A><br>
</center>
</DIV>
</td>
</tr>
<tr>
<td>
<a onclick="updateMenu(this)" href="#" id="Linkspic">Links</a>
<DIV style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px; display: none;" align="center" id="Linkspic1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> 2 </font></A><br>
</center>
</DIV>
</td>
</tr>
</table>
</body>
</html>

Mvh.

- Snap :)

Synes godt om

snooby Nybegynder

11. maj 2007 - 19:49 #7

ja - men med lidt mindre space under "under links" sådan hoved links kommer lidt tættere på på man åbner et hoved link. og så prøv lige at gå ind på www.recort.dk
og tryk på info... når man trykker på ino kommer den godt nok til info siden men den lader ikke undermenuen stå fremme det er dte der er meningen den skal gøre når man trykker på fx info

Synes godt om

crazysnap Seniormester

12. maj 2007 - 13:04 #8

Hej snooby, :)

Så er vi da nået så vidt. Hvad angår det mellemrum mellem undermenu og underliggende hovedmenu er det jo bare rent html (så godt det var der, men troede det var meningen da det direkte stod i stylen). Hvis du udskifter hver div style i undermenuen fra:

style="MARGIN-TOP: 2px; MARGIN-BOTTOM: 8px; HEIGHT: 60px; display: none;"

til:

style="MARGIN-TOP: 2px; display: none;"

burde det problem løse sig. Altså du fjerner den angivede height samt marginen i bunden af div-tag'ene. Så skulle div-tag'en gerne "fitte" sig tæt til undermenu-elementerne.

Hvad dit andet problem angår (har prøvet at trykke på info) ser det ikke ud som om der er nogen undermenuer defineret for "info"-hovedmenuen på www.recort.dk? Også er det jo klart der ikke popper nogen undermenu frem når der klikkes på den.
Jeg kan dog godt se problemet med at undermenuen ikke bliver fremme hvis du redirecter til en andsen side når der klikkes på hovedmenuen, men jeg havde sådan set også antaget at denne menu lå i sin egen frame og når der så klikkes på et punkt loades en side i en anden frame. Hvis du ikke bruger frames skal javascriptet ihvertfald udvides med enten querystrings eller cookies så den husker hvilket et hovedmenupunkt der er blevet klikket på når der redirectes til en ny side der også indeholder menuen. Jeg vil dog klart anbefale at bruge frames i stedet. :)

Mvh.

- Snap

Synes godt om

snooby Nybegynder

12. maj 2007 - 14:41 #9

jeg bruger ikke freams... ;) kan bedre li det som jeg gør nu..

ja der er ikke udner benuer.. fjernede dem, da jeg blev træt af at se på det ikek virkede :P

men okay viste godt at det ville virke vis man bruger freams.. :) men man kan vel lægge noget ind sådan at den ved at den skal holde menuen åben fra første gang man kommer ind på en ny side...

Synes godt om

snooby Nybegynder

12. maj 2007 - 14:45 #10

vis jeg skal være helt ærlig er jeg heller ikke så meget for tables :P men det kan jeg nok godt finde ud af at lave om... er bare ikke så god til java script at jeg selv kan lave mine scripts :)

Synes godt om

crazysnap Seniormester

12. maj 2007 - 17:16 #11

Ok. :)

Jeg er selv storforbruger at tables da det er en konsistent måde at opbygge sine sider på, du ved altid hvor du har dine ting henne. :)

Men jeg har udvidet scriptet ved brug af cookies så den bibeholder sin åbning når man linker til andre sider, det har dog gjort scriptet en del længere. Det eneste du skal gøre at kopiere det nye javascript ind og tilføje onload="initMenu();" til din body-tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/TR/html401">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
var selectedMenu = null;

function initMenu()
{
var cook = getCookie("mnu");

if(cook == null)
return;

updateMenu(document.getElementById(cook));
}

function updateMenu(hMenu)
{
//Close previous menu
if (selectedMenu != null)
selectedMenu.style.display = "none";

selectedMenu = document.getElementById(hMenu.id + "1");

selectedMenu.style.display = "block";

createCookie("mnu", hMenu.id, -1);
}

function createCookie(name, value, days)
{
if (days)
{
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else
var expires = "";

if(days != -1)
document.cookie = name+"="+value+expires;
else
document.cookie = name+"="+value;
}

function getCookie( name )
{
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )
{
return null;
}

if ( start == -1 )
return null;

var end = document.cookie.indexOf( ";", len );
if ( end == -1 )
end = document.cookie.length;

return unescape( document.cookie.substring( len, end ) );
}
</script>
</head>
<body onload="initMenu();">
<table>
<tr>
<td>
<a onclick="updateMenu(this);" href="#" id="ForsidePic">Forside</a>
<DIV style="MARGIN-TOP: 2px; display: none;" align="center" id="ForsidePic1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> 2 </font></A>
</center>
</DIV>
</td>
</tr>
<tr>
<td>
<a onclick="updateMenu(this);" href="#" id="Lejlighed">Lejligheden</a>
<DIV style="MARGIN-TOP: 2px; display: none;" align="center" id="Lejlighed1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> Grundplan </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> Faceliteter </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> Pris </font></A><br>
</center>
</DIV>
</td>
</tr>
<tr>
<td>
<a onclick="updateMenu(this);" href="#" id="InfoPic">Info</a>
<DIV style="MARGIN-TOP: 2px; display: none;" align="center" id="InfoPic1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> 2 </font></A><br>
</center>
</DIV>
</td>
</tr>
<tr>
<td>
<a onclick="updateMenu(this);" href="#" id="Linkspic">Links</a>
<DIV style="MARGIN-TOP: 2px; display: none;" align="center" id="Linkspic1">
<center>
<A href="#"><font size="1" face="Verdana" color="Black"> 1 </font></A><br>
<A href="#"><font size="1" face="Verdana" color="Black"> 2 </font></A><br>
</center>
</DIV>
</td>
</tr>
</table>
</body>
</html>

Håber vi er ved at være der nu.

Mvh.

- Snap :)

Synes godt om

snooby Nybegynder

13. maj 2007 - 00:08 #12

jeg siger mange tak... for en god ordens skyld... poster du ikke lige et svar ?

og jeg komemr og sagsøger dig vis det ikek virker bagefter :P

Synes godt om

crazysnap Seniormester

13. maj 2007 - 00:40 #13

Hej snooby,

Hehe, ligefrem er blive truet for at lægge et svar har jeg ikke prøvet før, men du kan jo vente med at acceptere indtil du er tilfreds ;). Jeg er jo herinde for at hjælpe så mange jeg kan, så der burde ikke være nogen bekymring for at jeg ikke gad hjælpe dig mere efter jeg har fået pointene. :)

Men et svar kommer der da! :)

Mvh.

- Snap :)

Synes godt om

snooby Nybegynder

14. maj 2007 - 08:47 #14

hhe helt iorden ;) smider dte ind nu

Synes godt om

snooby Nybegynder

14. maj 2007 - 09:11 #15

det virker fint nu :)

Synes godt om

crazysnap Seniormester

14. maj 2007 - 09:19 #16

Det var godt at høre! :)

Og tak for pointene..

Mvh.

- Snap :)

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