Søg
Avatar billede mm304 Nybegynder
02. juni 2004 - 14:15 Der er 6 kommentarer og
1 løsning

dropdownmenu design

Hej eksperter...

har denne kilde på min hjemmeside:

<html>
<head>
<title>NOGET</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>


<style type="text/css">
    .menupunkt {
        width : 200px ;
    text-align : center ;
    border-top-width: 1px;   
    border-top-style: solid  ;   
    border-top-color: #FFFFFF;   

    border-bottom-width: 2px;   
    border-bottom-style: solid  ;   
    border-bottom-color: #555555;   

    border-right-width: 2px;   
    border-right-style: solid  ;   
    border-right-color: #555555;   

    border-left-width: 1px;   
    border-left-style: solid  ;   
    border-left-color: #FFFFFF;   
    }


    .menu {
      position: absolute;       
      z-index : 2 ;
      display : none ;
      width : 200px ;
      padding : 3px ;
      border : 1px solid #111111 ;
      background : white ;
    }

    .menupunkt a {
        display : block ;
    width : 100% ;
    line-height : 20px ;
    }
  </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="index.html" class="intro" onMouseOver="mover( 'punkt1' )">Stationære</a></td>
    <td class="menupunkt"><a href="index.html" class="intro" onmouseOver="mover( 'punkt2' )">Bærbare</a></td>
    <td class="menupunkt"><a href="index.html" class="intro" onmouseOver="mover( 'punkt3' )">Link</a></td>
  </tr>
</table>

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





</body>
</html>

Mit spm er nu hvordan kan jeg lave kassernes (stationære/bærbar.....) design om?
Avatar billede mm304 Nybegynder
02. juni 2004 - 14:16 #1
designet skal laves om, når man fører musen hen over...(hover)
Avatar billede roenving Novice
02. juni 2004 - 14:51 #2
.menupunkt a {
    display : block ;
    width : 100% ;
    line-height : 20px ;
}
.menupunkt a:hover {
    display : block ;
    width : 100% ;
    line-height : 20px ;
    color:red;
    background:black;
    font-weight:bold;
}
Avatar billede mm304 Nybegynder
02. juni 2004 - 15:20 #3
kan man så også få hover-farven til at blive der, mens man er i dropdown-menuen??
Avatar billede roenving Novice
02. juni 2004 - 15:32 #4
-- så skal man tænke lidt anderledes, men f.eks.:

<html>
<head>
<title>NOGET</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>


<style type="text/css">
    .menupunkt {
        width : 200px ;
    text-align : center ;
    border-top-width: 1px;   
    border-top-style: solid  ;   
    border-top-color: #FFFFFF;   

    border-bottom-width: 2px;   
    border-bottom-style: solid  ;   
    border-bottom-color: #555555;   

    border-right-width: 2px;   
    border-right-style: solid  ;   
    border-right-color: #555555;   

    border-left-width: 1px;   
    border-left-style: solid  ;   
    border-left-color: #FFFFFF;   
    }


    .menu {
      position: absolute;       
      z-index : 2 ;
      display : none ;
      width : 200px ;
      padding : 3px ;
      border : 1px solid #111111 ;
      background : white ;
    }

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

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

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

      for (i=0;allElms.length>i;i++){
        if (allElms[i]==menu){
          menu.style.display = "block" ;
        }
        else
        {
          allElms[i].style.display = "none" ;
        }
      }
      if(elm){
        var lnks = document.links;
        for(i=0;lnks.length>i;i++){
          st = lnks[i].style;
          st.color = (lnks[i]==elm)?'red':'blue';
          st.backgroundColor = (lnks[i]==elm)?'black':'white';
          st.fontWeight = (lnks[i]==elm)?'bold':'normal';
        }
        actElm = elm;
      }
    }

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

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

      menu.style.display = "none" ;
     
      if(actElm){
        actElm.style.color = 'blue';
        actElm.style.backgroundColor = 'white';
        actElm.style.fontWeight = 'normal';
      }
    }
  </script>

</head>

<body>
<table>
  <tr>
    <td class="menupunkt"><a href="index.html" class="intro" onMouseOver="mover(this, 'punkt1' )">Stationære</a></td>
    <td class="menupunkt"><a href="index.html" class="intro" onmouseOver="mover(this, 'punkt2' )">Bærbare</a></td>
    <td class="menupunkt"><a href="index.html" class="intro" onmouseOver="mover(this, 'punkt3' )">Link</a></td>
  </tr>
</table>

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

</body>
</html>
Avatar billede mm304 Nybegynder
03. juni 2004 - 13:01 #5
smid lige et svar
Avatar billede roenving Novice
03. juni 2004 - 13:02 #6
Velbekomme '-)
Avatar billede roenving Novice
03. juni 2004 - 14:56 #7
-- og tak for point ;~}
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 går 22:39 Officepakke køb - opdateres de? Af Uvanga i Office & Kontorpakker
I går 17:20 Adgangskode på mappe i Windows 11 Af KristinaS i Office & Kontorpakker
I går 15:21 Vil denne Samsung Book 5 Bærbar være et fornuftigt køb til prisen? Af iltempo i PC
I går 11:08 kan ikke sende eller modtage mail der sendes til LIVE.DK Af ejgil703 i E-mail
29/1019:40 Antenne Af Henrik i Mobilnetværk
White papers
Flere white papers »