Søg
Avatar billede duvander Juniormester
11. marts 2004 - 11:59 Der er 24 kommentarer og
1 løsning

Mellemrum og billede i tree menu

Hvordan får jeg større mellemrum mellem hvert link i underpunkterne? og hvordan får jeg et billede før hovedpuntet, der skifter når underpunkterne er fremme?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simpel menu</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menupunkt{font-family:tahoma,verdana,arial,sans-serif;cursor:pointer;color:#9d52be;background:#fff;font-weight:800;font-style:italics;font-size:10px;width:250px;}
.menu{display:none;padding-left:5px;}
.menu a{text-decoration:none;}
.menu a:link{color:black;}
.menu a:visited{color:black;}
.menu a:hover{color:red}
.menu a:active{color:red}

</style>
<script language="javascript" type="text/javascript">
function showMenu(d){
  var id = d.id.substring(5);
  divs = document.getElementsByTagName('DIV');
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id)divs[i].style.display='none';
  }
  st = document.getElementById('menu'+id).style;
  st.display = (st.display!='block')?'block':'none';
}
</script>
</head>
<body>
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">Punkt 1
  <div id="menu1" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
Avatar billede roenving Novice
11. marts 2004 - 13:12 #1
1. .menu a{text-decoration:none;line-height:1.2em;}

2. Ved at sætte et billede ind med id på, som svarer til menupunktet:

  st.display = (st.display!='block')?'block':'none';
  document.getElementById(id+'pic').src = (st.display=='block')?"picOpen.gif":"picClosed.gif";
}
</script>
</head>
<body>
<img src="picClosed.gif" id="omenu1pic">
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">Punkt 1
Avatar billede duvander Juniormester
11. marts 2004 - 13:22 #2
prøver det lige. Jeg har også problemmer med at få hovedpunkterne til at skifte farve når musen er over den!
Avatar billede roenving Novice
11. marts 2004 - 13:33 #3
<div id="omenu1" class="menupunkt" onclick="showMenu(this);" onmouseover="this.style.color='green'" onmouseout="this.style.color='#9d52be'">Punkt 1
Avatar billede duvander Juniormester
11. marts 2004 - 13:51 #4
2. kan ikke få den til at skifte til andet billede når punktet er aktivt!?
Avatar billede roenving Novice
11. marts 2004 - 13:58 #5
Skifter den da ikke, når du klikker på den ?-)
Avatar billede duvander Juniormester
11. marts 2004 - 14:10 #6
nej
Avatar billede duvander Juniormester
11. marts 2004 - 14:33 #7
Gider du prøve at sætte den ind i øverstes kode, så kan jeg se om jeg har indsat koden korrekt? (billed åben hedder grafikon.gof og lukket grafikoff.gif)
Avatar billede duvander Juniormester
11. marts 2004 - 14:35 #8
ups! den hedder grafikon.gif. Og billedet skal være lige før punkt1
Avatar billede roenving Novice
11. marts 2004 - 14:36 #9
<script language="javascript" type="text/javascript">
function showMenu(d){
  var id = d.id.substring(5);
  divs = document.getElementsByTagName('DIV');
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id)divs[i].style.display='none';
  }
  st = document.getElementById('menu'+id).style;
  st.display = (st.display!='block')?'block':'none';
  document.getElementById(id+'pic').src = (st.display=='block')?"grafikon.gif":"grafikoff.gif";
}
</script>
</head>
<body>
<img src="grafikoff.gif" id="omenu1pic">
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">Punkt 1
  <div id="menu1" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
Avatar billede roenving Novice
11. marts 2004 - 14:37 #10
-- og så vil det vel være rart om click på billedet også åbnede og lukkede:

<body>
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img src="grafikoff.gif" id="omenu1pic">Punkt 1
Avatar billede duvander Juniormester
11. marts 2004 - 15:15 #11
Øv jeg har gjort det rigigt! hvad er det der får den til at skulle skifte billede når der klikkes på punk1?
Avatar billede roenving Novice
11. marts 2004 - 15:20 #12
Linjen her checker om undermenuen bliver vist og sætter så billedet efter det:

  document.getElementById(id+'pic').src = (st.display=='block')?"grafikon.gif":"grafikoff.gif";
Avatar billede duvander Juniormester
11. marts 2004 - 16:21 #13
:( virker stadig ikke!

Lige til den med farveskift på hovedpunkterne!
<div id="omenu1" class="menupunkt" onclick="showMenu(this);" onmouseover="this.style.color='green'" onmouseout="this.style.color='#9d52be'">
punkt1 skifter fint farve, men skifter også farve når man holder musen over et underpunkt! det var ik meningen!
Avatar billede roenving Novice
11. marts 2004 - 16:23 #14
<div id="menu1" class="menu" onclick="event.cancelBubble=true" onmouseover="event.cancelBubble=true">
Avatar billede duvander Juniormester
11. marts 2004 - 16:31 #15
den sidder lige i skabet.
Men det med billede det mærkligt, kan du få det til at virke?
Avatar billede roenving Novice
11. marts 2004 - 16:39 #16
-- jeg havde ikke fået kigget ordentligt efter, så det skal laves sådan:

document.getElementById(d.id+'pic').src = ...
Avatar billede roenving Novice
11. marts 2004 - 16:44 #17
function showMenu(d){
  var id = d.id.substring(5);
  divs = document.getElementsByTagName('DIV');
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id){
      divs[i].style.display='none';
      document.getElementById('o'+divs[i].id+'pic').src = "grafikoff.gif";
    }
  }
  st = document.getElementById('menu'+id).style;
  st.display = (st.display!='block')?'block':'none';
  document.getElementById(d.id+'pic').src = (st.display=='block')?"grafikon.gif":"grafikoff.gif";
}

-- så skulle det hele være med !-)
Avatar billede duvander Juniormester
12. marts 2004 - 11:14 #18
Ok! men nu siger den [der opstod fejl på siden]:(
Avatar billede roenving Novice
13. marts 2004 - 18:36 #19
-- den kører uden problemer hos mig ?-)
Avatar billede duvander Juniormester
15. marts 2004 - 17:54 #20
Endelig fandt jeg fejlen! Det er fordi jeg har hele menuen i en tabel. derfor har jeg ændret denne her->  divs = document.getElementsByTagName('DIV'); til ->  divs = document.getElementsByTagName('TD'); så viker det med billed skift, men så opstår et nyt problem, og det er. underpunkteren lukker ik sammen når man vælger et nyt punkt. kort sagt man kan folde hele menuen ud! Hvordan løses det?
Avatar billede duvander Juniormester
15. marts 2004 - 17:58 #21
smider lige en opdateret kode med!

<script language="javascript" type="text/javascript">
function showMenu(d){
  var id = d.id.substring(5);
  divs = document.getElementsByTagName('TD');
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id){
      divs[i].style.display='none';
      document.getElementById('o'+divs[i].id+'pic').src = "img/piloff.gif.gif";
    }
  }
  st = document.getElementById('menu'+id).style;
  st.display = (st.display!='block')?'block':'none';
  document.getElementById(d.id+'pic').src = (st.display=='block')?"img/pilon.gif":"img/piloff.gif";
}
</script>


<body>
<td width="119" align="left" valign="top">
<div id="omenu1" class="menupunkt" onclick="showMenu(this);" onmouseover="this.style.color='green'" onmouseout="this.style.color='#9d52be'">
<img src="img/piloff.gif" id="omenu1pic"> Punkt 1
<div id="menu1" class="menu" onclick="event.cancelBubble=true" onmouseover="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
  </div>
punkt 1,2,3,4,5,6,7,8 her!
</td>
Avatar billede duvander Juniormester
23. marts 2004 - 10:23 #22
Syntes du har fortjent point nu! men det med den lukker må du meget gerne hjælpe til med på http://www.eksperten.dk/spm/480758. Lav lige et svar Roenving!
Avatar billede roenving Novice
24. marts 2004 - 02:39 #23
Velbekomme '-)
Avatar billede roenving Novice
24. marts 2004 - 02:39 #24
;O)
Avatar billede roenving Novice
24. marts 2004 - 16:32 #25
-- og tak for points ;~}
Avatar billede 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.

Loading billede Opret Preview
Kategori
Programmeringssprog kurser
Kurser inden for grundlæggende programmering
Se alle Programmeringssprog kurser

Flere spørgsmål fra Andet programmering kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bat file. Af johnnylassen i Andet programmering 4 23/04/202616:10 24/04/202609:43
Hjælp til Api.asmx Af lurup i Andet programmering 1 17/03/202609:27 17/03/202614:12
burgermenu til hjemmeside - hjælp! Af SabrinaL i Andet programmering 2 12/11/202514:10 02/12/202520:42
Hjælp til programmering af website Af hamdenlange i Andet programmering 16 17/08/202522:26 19/08/202515:53
Kan man registrere hvis folk lukker en side ned Af KurtG i Andet programmering 8 24/07/202513:06 28/07/202517:03
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 10:19 Kan jeg beholde Publisher på min maskine efter at MS stopper med support Af KurtG i Office & Kontorpakker
02/0814:53 TV4ever 3.0 Af valby i Diverse
01/0816:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
01/0809:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
White papers
Flere white papers »