Søg
Avatar billede duvander Juniormester
27. februar 2004 - 23:55 Der er 12 kommentarer og
1 løsning

Menu med submenu

Jeg skal lave en menu med underpunkter som denne: http://www.medions.dk/bransholm/
dog ikke helt magen til for hvis man klikker på "Hosting" og submenuerne kommer frem, skal de gå væk hvis man vælger at klikke på f.eks bestilling.
Aner ikke hvilket sprog jeg gør det lettest i?
Siden har ikke connection igennem database.
Avatar billede roenving Novice
28. februar 2004 - 00:40 #1
F.eks. sådan:

<!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:#ddd;font-weight:800;font-style:italics;font-size:10px;}
.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">
    <a href="#">Underpunkt 1</a><br>
    <a href="#">Underpunkt 2</a><br>
    <a href="#">Underpunkt 3</a><br>
    <a href="#">Underpunkt 4</a>
  </div>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">Punkt 2
  <div id="menu2" class="menu">
    <a href="#">Underpunkt 1</a><br>
    <a href="#">Underpunkt 2</a><br>
    <a href="#">Underpunkt 3</a><br>
    <a href="#">Underpunkt 4</a>
  </div>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">Punkt 3
  <div id="menu3" class="menu">
    <a href="#">Underpunkt 1</a><br>
    <a href="#">Underpunkt 2</a><br>
    <a href="#">Underpunkt 3</a><br>
    <a href="#">Underpunkt 4</a>
  </div>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);">Punkt 4
  <div id="menu4" class="menu">
    <a href="#">Underpunkt 1</a><br>
    <a href="#">Underpunkt 2</a><br>
    <a href="#">Underpunkt 3</a><br>
    <a href="#">Underpunkt 4</a>
  </div>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">Punkt 5
  <div id="menu5" class="menu">
    <a href="#">Underpunkt 1</a><br>
    <a href="#">Underpunkt 2</a><br>
    <a href="#">Underpunkt 3</a><br>
    <a href="#">Underpunkt 4</a>
  </div>
</div>
</body>
</html>
Avatar billede duvander Juniormester
28. februar 2004 - 00:57 #2
Ja lige ved og næsten...når man klikker på et underpunkt skal den ikke folde sammen.

lige et andet spørgsmål, kan man ændre bredden og farven på den grå bagrund eller helt undvære den?
Avatar billede roenving Novice
28. februar 2004 - 01:05 #3
Den grå baggrund, var kun på, for at du kunne se menuerne, her er den fjernet, og menuerne ændrer sig ikke ...

-- jeg har kun lavet det, så ie og ns6+ er understøttet, så jeg ved ikke med de andre browsere !-)

<!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>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">Punkt 2
  <div id="menu2" 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>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">Punkt 3
  <div id="menu3" 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>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);">Punkt 4
  <div id="menu4" 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>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">Punkt 5
  <div id="menu5" 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>
</div>
</body>
</html>
Avatar billede duvander Juniormester
08. marts 2004 - 15:07 #4
Ja nu begynder det at ligne noget jeg har brug for. Jeg skal bruge en prikket linie der viser hvilket underlink man har valgt. kan det kodes?
Avatar billede roenving Novice
08. marts 2004 - 15:30 #5
st.display = (st.display!='block')?'block':'none';
  d.style.borderBottom = (st.display!='block')?"1px dotted black":"1px solid white";//farven kan jo sagtens ændres til baggrundsfarven
}
</script>
Avatar billede duvander Juniormester
09. marts 2004 - 23:09 #6
fin kode, men ikke det jeg skal bruge. Sorry fik ikke gjort mig klart hvad det er jeg mener!
Jeg vil have en prikket linie der går ned fra punkt 1. og ud til Underpunkterne 1,2,3,4.
Avatar billede duvander Juniormester
10. marts 2004 - 12:00 #7
Hvordan får jeg et lille billede før punkt 1,2,3,4,5, der skifter til et andet billede et menupunkt er aktivt?
og ligeledes med underpunkterne?
Avatar billede Slettet bruger
01. april 2004 - 22:56 #8
roenving> du har haft en lignende menu med + og minus, kan man lave under/undermenuer på den ?
Avatar billede roenving Novice
01. april 2004 - 23:03 #9
Nej, jeg har med vilje ikke arbejdet videre med den, andet end tilføjet billed-tingen, for så kan man ligeså godt bruge nogle af de andre, man kan finde ...

Jeg er lidt doven, når det kommer til den ende, jeg gider hverken gå over på den anden side af åen, endsige opfinde en dyb tallerken til vandet !-)
Avatar billede Slettet bruger
01. april 2004 - 23:11 #10
tak, det faldt mig lige ind at spørge .
Avatar billede duvander Juniormester
18. september 2005 - 08:53 #11
lukker og slukker
Avatar billede roenving Novice
18. september 2005 - 13:53 #12
Okay ?-)
Avatar billede tenniscamp Nybegynder
13. januar 2010 - 21:33 #13
roenving.

Jeg har forsøgt mig med din kode her.. og den virker egentlig rigtig godt, men den forbliver ikke "foldet ud", når jeg klikker på et overmenupunkt ryger jeg til en ny side - det er meningen, men så er menuen ikke foldet ud.. er det fordi den reloader hele siden.. eller er der noget jeg kan gøre for at ændre dette?

her er koden til menuen..

----- KODEN -------
<!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);">
  <a href="Tennis%20Camp%20arrangementer.php">Hvor arrangerer vi</a>
  <div id="menu1" class="menu" onclick="event.cancelBubble=true">
   
  </div>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">
  <a href="Tennis%20Camp%20generelt.php" >Info til klubben</a>
  <div id="menu2" class="menu" onclick="event.cancelBubble=true">
  </div>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">
  <a href="TennisCamp_deltager_info.php">Info til deltagere</a>
  <div id="menu3" class="menu" onclick="event.cancelBubble=true">
   
  </div>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);"><a href="TennisCamp_sundhed.php">Kost
  &amp; Motion</a>
  <div id="menu4" class="menu" onclick="event.cancelBubble=true"> <a href="TennisCamp_gode_links.php" onclick="return false;">Gode
    links</a><br>
    <a href="TennisCamp_debat.php" onclick="return false;">Debat</a><br>
    <a href="TennisCamp_konkurrence.php" onclick="return false;">Konkurrence</a><br>
   
  </div>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">
  <a href="Tennis%20Camp%20om%20os.php">Om os</a>
  <div id="menu5" 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>
</div>
</body>
</html>
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
59 min siden Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
59 min siden Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
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
White papers
Flere white papers »