Søg
Avatar billede flashback83 Nybegynder
07. maj 2003 - 17:44 Der er 12 kommentarer og
1 løsning

dropdown menu

Jeg har fundet følgende kode her på eksperten, men hvordan får jeg tabellerne til at blive stående, så man kan tilføje links til menuerne?

<html>

<head>
  <title></title>

  <style type="text/css">
    .menupunkt {
        width : 100px ;
    text-align : center ;
    border : 1px solid black ;
    }

    .menu {
      position : absolute ;
      z-index : 2 ;
      display : none ;
      width : 100px ;
      padding : 8px ;
      border : 1px solid black ;
      background : white ;
    }

    .menupunkt a {
        display : block ;
    width : 100% ;
    line-height : 17px ;
    }
  </style>

  <script type="text/javascript">
    function mover( obj ) {
      elm = document.getElementById( obj ) ;

      menu = document.getElementById( obj + "menu" ) ;

      menu.style.display = "block" ;
    }

    function mout( obj ) {
      elm = document.getElementById( obj ) ;

      menu = document.getElementById( obj + "menu" ) ;

      menu.style.display = "none" ;
    }
  </script>

</head>

<body>

<table>
  <tr>
    <td class="menupunkt"><a href="" id="punkt1" onMouseOver="mover( 'punkt1' )"  onMouseOut="mout( 'punkt1' )">Link</a></td>
    <td class="menupunkt"><a href="" id="punkt2" onmouseOver="mover( 'punkt2' )"  onMouseOut="mout( 'punkt2' )">Link</a></td>
    <td class="menupunkt"><a href="" id="punkt3" onmouseOver="mover( 'punkt3' )"  onMouseOut="mout( 'punkt3' )">Link</a></td>
  </tr>
</table>

<div id="punkt1menu" class="menu" style="left : 10px ;" onMouseOver="mover( 'punkt1' )"  onMouseOut="mout( 'punkt1' )">Menu 1 her<br><br><br></div>
<div id="punkt2menu" class="menu" style="left : 110px ;" onmouseOver="mover( 'punkt2' )"  onMouseOut="mout( 'punkt2' )">Menu 2 her<br><br><br></div>
<div id="punkt3menu" class="menu" style="left : 220px ;" onmouseOver="mover( 'punkt3' )"  onMouseOut="mout( 'punkt3' )">Menu 3 her<br><br><br></div>

</body>

</html>
Avatar billede roenving Novice
07. maj 2003 - 18:12 #1
Lidt snyd, men ...

    <td class="menupunkt"><a href="" id="punkt1" onMouseOver="mover( 'punkt1' )"  onMouseOut="setTimeout(\"mout( 'punkt1' )\",3000)">Link</a></td>

Jeg kunne dog ikke få den til at eksekvere mout overhovedet, så løsnin´gen er nok at fjerne mout fra overskrift-punkterne (dem i første gruppe).

hth
jes
Avatar billede flashback83 Nybegynder
07. maj 2003 - 18:32 #2
Det fungerer med dit forslag, men så "samler" den jo kasser op, hvis man går fra et link til de andet uden a gå over undermenuen... Har du et forslag til hvordan man kan afhjælpe det?
Du har jo sådan set svaret på det jeg spurgte om, så du må vel hellere få pointene.
Avatar billede flashback83 Nybegynder
07. maj 2003 - 18:35 #3
Hmm, den eksekverer ikke mout nu, så det ser ud til at der er en fejl et eller andet sted i det du sendte mig - Den eksekverede før...

<td class="menupunkt"><a href="" id="punkt1" onMouseOver="mover( 'punkt1' )"  onMouseOut="setTimeout(\"mout( 'punkt1' )\",3000)">Link</a></td>
Avatar billede roenving Novice
07. maj 2003 - 18:41 #4
Ja, da jeg prøvede fik jeg (før mit lille hack) nogle gange en fejl hvis jeg gentagne gange farede op og ned fra et link til stedet hvor menu-boxen var, men fejlen kom fra en anden linje end den som var igang med eksekvering ?-|
Avatar billede flashback83 Nybegynder
07. maj 2003 - 18:44 #5
Hvis jeg positionerer undermenuerne, så man kan gå ned på den uden at gå udenfor linket kan man jo komme udenom det på den måde, men det virker som en lidt flad måde at gøre det på... Det stiller i hverfald krav til designet
Avatar billede flashback83 Nybegynder
07. maj 2003 - 18:47 #6
Den kommer med en fejl når jeg opdaterer siden: Linie 55, tegnet er ugyldigt!
Det her er linie 55 - kan du se hvad fejlen er?
<td class="menupunkt"><a href="" id="punkt1" onMouseOver="mover( 'punkt1' )"  onMouseOut="setTimeout(\"mout( 'punkt1' )\",3000)">Link</a></td>
Avatar billede roenving Novice
07. maj 2003 - 18:50 #7
Jeg sad og tænkte på noget, som ligner, nemlig at lægge noget udenom, som lige var den anelse større, som kunne være holder af mouse-over/-out-koden ...

-- men hvis vi snakker layout, bliver det helt umuligt

Forøvrigt kunne jeg ikke komme frem til at mouse-out på undermenuen ikke virkede; medmindre jeg cirklede hurtigt over til overmenu-punktet ,-)
Avatar billede roenving Novice
07. maj 2003 - 18:51 #8
Jeg fik den samme fejl på et tidspunkt på tegn 12 ???

det er m'et i calss="menupunkt" ?-|
Avatar billede flashback83 Nybegynder
07. maj 2003 - 18:53 #9
Nej, det er mig der ikke kan forklare mig ordentligt. Det virkede fint på undermenuen. Problemet var at det ikke fungerede med tidsbegrænsningen, hvis man gik fra overmenu til overmenu uden at bevæge sig ned til undermenuen. I det tilfælde blev undermenuerne bare stående...
Avatar billede roenving Novice
07. maj 2003 - 19:31 #10
En anelse anderledes tilgangsvinkel:

Alle undermenuer, som ikke skal være åbne skal være lukkede (genialt, ikke !-)

<html>

<head>
  <title></title>

  <style type="text/css">
    .menupunkt {
        width : 100px ;
    text-align : center ;
    border : 1px solid black ;
    }

    .menu {
      position : absolute ;
      z-index : 2 ;
      display : none ;
      width : 100px ;
      padding : 8px ;
      border : 1px solid black ;
      background : white ;
    }

    .menupunkt a {
        display : block ;
    width : 100% ;
    line-height : 17px ;
    }
  </style>

  <script type="text/javascript">
    function mover( obj ) {
//alert("Hej");
      var menu = document.getElementById( obj + "menu" ) ;

      var allElms = document.getElementsByTagName("div");

      for (i=0;i<allElms.length;i++){
        if (allElms[i]==menu){
          menu.style.display = "block" ;
        }
        else
        {
          allElms[i].style.display = "none" ;
        }
      }
    }

    function mout( obj ) {
      elm = document.getElementById( obj ) ;

      menu = document.getElementById( obj + "menu" ) ;

      menu.style.display = "none" ;
    }
  </script>

</head>

<body>

<table>
  <tr>
    <td class="menupunkt"><a href="" id="punkt1" onMouseOver="mover( 'punkt1' )">Link</a></td>
    <td class="menupunkt"><a href="" id="punkt2" onmouseOver="mover( 'punkt2' )">Link</a></td>
    <td class="menupunkt"><a href="" id="punkt3" onmouseOver="mover( 'punkt3' )">Link</a></td>
  </tr>
</table>

<div id="punkt1menu" class="menu" style="left : 10px ;" onMouseOver="mover( 'punkt1' )"  onMouseOut="mout( 'punkt1' )">Menu 1 her<br><br><br></div>
<div id="punkt2menu" class="menu" style="left : 110px ;" onmouseOver="mover( 'punkt2' )"  onMouseOut="mout( 'punkt2' )">Menu 2 her<br><br><br></div>
<div id="punkt3menu" class="menu" style="left : 220px ;" onmouseOver="mover( 'punkt3' )"  onMouseOut="mout( 'punkt3' )">Menu 3 her<br><br><br></div>

</body>

</html>
Avatar billede roenving Novice
07. maj 2003 - 20:06 #11
Og så lige i en version, som kan bruges selvom man bruger andre <div>s (som ikke må hedde noget der ender på 'menu':

<html>

<head>
  <title></title>

  <style type="text/css">
    .menupunkt {
        width : 100px ;
    text-align : center ;
    border : 1px solid black ;
    }

    .menu {
      position : absolute ;
      z-index : 2 ;
      display : none ;
      width : 100px ;
      padding : 8px ;
      border : 1px solid black ;
      background : white ;
    }

    .menupunkt a {
        display : block ;
    width : 100% ;
    line-height : 17px ;
    }
  </style>

  <script type="text/javascript">

    function checkMenu(id) {
      if (id.indexOf("menu")+4==id.length){
        return true;
      }
      return false;
    }

    function mover( obj ) {

      var menu = document.getElementById( obj + "menu" ) ;

      var allElms = document.getElementsByTagName("div");

      for (i=0;i<allElms.length;i++){
        if (checkMenu(allElms[i].id)) {
          if (allElms[i]==menu){
            menu.style.display = "block" ;
          }
          else
          {
            allElms[i].style.display = "none" ;
          }
        }
      }
    }

    function mout( obj ) {
      elm = document.getElementById( obj ) ;

      menu = document.getElementById( obj + "menu" ) ;

      menu.style.display = "none" ;
    }
  </script>

</head>

<body>

<table>
  <tr>
    <td class="menupunkt"><a href="" id="punkt1" onMouseOver="mover( 'punkt1' )">Link</a></td>
    <td class="menupunkt"><a href="" id="punkt2" onmouseOver="mover( 'punkt2' )">Link</a></td>
    <td class="menupunkt"><a href="" id="punkt3" onmouseOver="mover( 'punkt3' )">Link</a></td>
  </tr>
</table>

<div id="punkt1menu" class="menu" style="left : 10px ;" onMouseOver="mover( 'punkt1' )"  onMouseOut="mout( 'punkt1' )">Menu 1 her<br><br><br></div>
<div id="punkt2menu" class="menu" style="left : 110px ;" onmouseOver="mover( 'punkt2' )"  onMouseOut="mout( 'punkt2' )">Menu 2 her<br><br><br></div>
<div id="punkt3menu" class="menu" style="left : 220px ;" onmouseOver="mover( 'punkt3' )"  onMouseOut="mout( 'punkt3' )">Menu 3 her<br><br><br></div>

</body>

</html>
Avatar billede flashback83 Nybegynder
09. maj 2003 - 10:21 #12
Genialt! Det virker fint!! Jeg har brugt det sidste og det fungerer fint. Har endda fået det til at se rimelig godt ud ;-) Jeg siger tusind tak for hjælpen!!
Du burde vist have fået mere end 15 point...

Rasmus
Avatar billede roenving Novice
09. maj 2003 - 13:15 #13
Velbekomme -- og takker for points ;~}

-- og vi tæller jo ikke arbejdstid -- nu har jeg jo en fuldfed liggende selv ...
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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 dag 17:00 Film Server Af dcedata1977 i Andet software
I dag 12:56 Mistænkelige mails! Af ErikHg i E-mail
I går 14:10 Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I går 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
White papers
Flere white papers »