ansgar1704: PopUp-Menü bei onmouseover

SELF-Forum

PopUp-Menü bei onmouseover

ansgar1704 Homepage des Autors
– Informationen zu den Bewertungsregeln

Hallo, ich will da ein PopUp-Menü erstellen, was auch geklappt hat, nur sollte das aéigtenlich neben Sortiment stehen und nicht untendrunter. Wenn ich es mit "margin" mache verschiebt er leider auch die Navileiste, d.h. sie wird breiter. Wie kann ich das machen, dass er die Untermenüs bei "onmouseover" einfach über die Haupttabelle setzt?

Anbei der CSS und HTML-Code der Navileiste, wenn ihr mehr braucht sagt es:

<style type="text/css">
body {
    background-color:white;
    background-color:white;
    background-repeat:repeat-y
}

#navigation {
    top:50px;
    width:146px;
}

a.navi, a.navi1, a.navi2, a.navi3, a.navi4, a.navi5, a.navi_first, a.navi_self {
   display:block;
   white-space:nowrap;
   overflow:hidden;
   border-left:1px solid black;
   border-right:1px solid black;
   border-bottom:1px solid black;
   font-family:TimesNewRoman,sans-serif;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   letter-spacing:0.1em;
   padding:3px;
   text-align:center;
}

a.navi_first {
   border-top:1px solid white;
}

a:link.navi, a:link.navi_first, a:visited.navi, a:visited.navi_first {
   background-color:#CF5F62;
   color:black;
}

}

a.navi1_first {
   border-top:1px solid white;
}

a:link.navi1, a:link.navi_first, a:visited.navi1, a:visited.navi_first {
   background-color:#CF5F62;
   color:black;
}

}

a.navi2_first {
   border-top:1px solid white;
}

a:link.navi2, a:link.navi_first, a:visited.navi2, a:visited.navi_first {
   background-color:#CF5F62;
   color:black;
}

}

a.navi3_first {
   border-top:1px solid black;
   border-bottom:1px solid black
}

a:link.navi3, a:link.navi_first, a:visited.navi3, a:visited.navi_first {
   background-color:#CF5F62;
   color:black;
}

}

a.navi4_first {
   border-top:1px solid white;
}

a:link.navi4, a:link.navi_first, a:visited.navi4, a:visited.navi_first {
   background-color:gray;
   color:black;
}

}

a.navi5_first {
   border-top:1px solid white;
}

a:link.navi5, a:link.navi_first, a:visited.navi5, a:visited.navi_first {
   background-color:#CF5F62;
   color:black;
}

a:link.navi_self, a:visited.navi_self {
   background-color:#CF5F62;
   color:black
}

a:hover.navi, a:hover.navi_first, a:hover.navi_self, a:active.navi, a:active.navi_first, a:active.navi_self {
   background-color:white;
   color:black;
}

a:hover.navi1, a:hover.navi_first, a:hover.navi_self, a:active.navi1, a:active.navi_first, a:active.navi_self {
   background-color:white;
   color:black;
}

a:hover.navi2, a:hover.navi_first, a:hover.navi_self, a:active.navi2, a:active.navi_first, a:active.navi_self {
   background-color:white;
   color:black;
}

a:hover.navi3, a:hover.navi_first, a:hover.navi_self, a:active.navi3, a:active.navi_first, a:active.navi_self {
   background-color:white;
   color:black;
}

a:hover.navi4, a:hover.navi_first, a:hover.navi_self, a:active.navi4, a:active.navi_first, a:active.navi_self {
   background-color:white;
   color:black;
}

a:hover.navi5, a:hover.navi_first, a:hover.navi_self, a:active.navi5, a:active.navi_first, a:active.navi_self {
   background-color:white;
   color:black;
}

#navi2_sublinks {
            top:60px;
            width:145px;
            border-bottom:1px solid black;
            border-right-witdh:1px solid black;
            z-index10; padding-left:visibility;
            padding-right:visibility;
            padding-bottom:hidden

}
         .sub_link {
            display:block;
            text-align:center;
            height:18px;
            font-family:"MS Sans Serif",sans-serif;
            font-size:12px;
            font-weight:bold;
            padding-top:1px;
            text-decoration:none;
         }
         .sub_link:link, .sub_link:visited {
            background-color:#CF5F62;
            color:white;
         }
         .sub_link:hover, .sub_link:active {
            background-color:white;
            color:black;
         }

</style>

<body bgcolor="#FFF3E8">

<table width="827" border="0" cellpadding="0" cellspacing="3" align="center" height="466">
  <tr>
    <td height="118" colspan="4" background="images/Banner-Weinhof.gif" width="821">&nbsp;</td>
  </tr>
  <tr>

<td valign="top" bgcolor="#902B2E" rowspan="2" width="146" height="324"><table width="140" border="0" cellpadding="0">

<div id="navigation">
<a class="navi_self navi_first" href="/index.html">
   Home
</a>
<a class="navi" href="/wir.html" title="">
   Wir über uns
</a>
<a class="navi1" href="/angebot.html" title="">
   Angebot
</a>
<a href="/sortiment.html" class="navi2" id="navi2"
onMouseover="document.getElementById('navi2_sublinks').style.visibility='visible'"
onMouseout="document.getElementById('navi2_sublinks').style.visibility='hidden'">
            Sortiment</a>

<div id="navi2_sublinks"
onMouseover="document.getElementById('navi2_sublinks').style.visibility='visible'"
onMouseout="document.getElementById('navi2_sublinks').style.visibility='hidden'">
         <a href="" class="sub_link">Rotwein</a>
         <a href="" class="sub_link">Weißwein</a>
         <a href="" class="sub_link">Sekt</a>
         <a href="" class="sub_link">Säfte</a>
           </div>

<a class="navi3" href="/aktuelles.html" title="">
   Aktuelles
</a>
<a class="navi4" href="/vts.html" title="">
   Veranstaltungen
</a>
<a class="navi5" href="/impressum.html" title="">
   Impressum
</a>
</div>

</table>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. PopUp-Menü bei onmouseover

    andreas
    – Informationen zu den Bewertungsregeln

    Hallo, ich will da ein PopUp-Menü erstellen, was auch geklappt hat, nur sollte das aéigtenlich neben Sortiment stehen und nicht untendrunter. Wenn ich es mit "margin" mache verschiebt er leider auch die Navileiste, d.h. sie wird breiter. Wie kann ich das machen, dass er die Untermenüs bei "onmouseover" einfach über die Haupttabelle setzt?

    Nach kurzem Anschauen habe ich die Idee, dass du das ganz einfach mit

      
position:relative;  
left:150px;

    in .sub_link

    lösen könntest.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. PopUp-Menü bei onmouseover

      ansgar1704
      – Informationen zu den Bewertungsregeln

      Hallo, ich will da ein PopUp-Menü erstellen, was auch geklappt hat, nur sollte das aéigtenlich neben Sortiment stehen und nicht untendrunter. Wenn ich es mit "margin" mache verschiebt er leider auch die Navileiste, d.h. sie wird breiter. Wie kann ich das machen, dass er die Untermenüs bei "onmouseover" einfach über die Haupttabelle setzt?

      Nach kurzem Anschauen habe ich die Idee, dass du das ganz einfach mit

      position:relative;
      left:150px;

      
>   
> in .sub\_link  
>   
> lösen könntest.  
  
Klappt. Danke sehr. Nur ist jetzt leider immer noch die große Lücke in der NAvilesite, kann ich die noch rausmachen? und außerdem sollte das direkt neben Sortiment sein, weil man sonst nicht auf die untermenüs kommt. Danke schonmal für den neuen Tipp.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. PopUp-Menü bei onmouseover

        andreas
        – Informationen zu den Bewertungsregeln

        Klappt. Danke sehr. Nur ist jetzt leider immer noch die große Lücke in der NAvilesite, kann ich die noch rausmachen? und außerdem sollte das direkt neben Sortiment sein, weil man sonst nicht auf die untermenüs kommt. Danke schonmal für den neuen Tipp.

        Du kannst auch negative Werte zur Positionierung angeben und das Untermenu so nach oben schieben:

          
position:relative;  
left:145px;  
top:-22px;

        Die Lücke entsteht, weil visibility:hidden; ein Element zwar nicht anzeigt, den Platz aber reserviert. Verwende die Eigenschaft display:none; um das Element gar nicht anzuzeigen. So wird kein Platz dafür reserviert.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. PopUp-Menü bei onmouseover

          ansgar1704
          – Informationen zu den Bewertungsregeln

          Die Lücke entsteht, weil visibility:hidden; ein Element zwar nicht anzeigt, den Platz aber reserviert. Verwende die Eigenschaft display:none; um das Element gar nicht anzuzeigen. So wird kein Platz dafür reserviert.

          Jetzt ist aber auch das Untermenü wieder verschwunden?!
          Wie bringe ich das wieer zum auftauchen, wenn das klappt bist du echt super.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. PopUp-Menü bei onmouseover

            andreas
            – Informationen zu den Bewertungsregeln

            Jetzt ist aber auch das Untermenü wieder verschwunden?!
            Wie bringe ich das wieer zum auftauchen, wenn das klappt bist du echt super.

            Dann hast du wahrscheinlich nur das Style Sheet verändert. Im Javascript musst du die Änderung natürlich auch noch umsetzen.

            Versuch es mit
            onMouseover="document.getElementById('navi2_sublinks').style.display='block'"
            zu anzeigen

            und
            onMouseout="document.getElementById('navi2_sublinks').style.display='none'"
            zum verbergen.

            Und enns noch immer nicht funktioniert zum anzeigen:
            onMouseover="document.getElementById('navi2_sublinks').style.display='block';document.getElementById('navi2_sublinks').style.visibility='visible'"

            Damit sollte es gehen...

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. PopUp-Menü bei onmouseover

              ansgar1704
              – Informationen zu den Bewertungsregeln

              Und enns noch immer nicht funktioniert zum anzeigen:
              onMouseover="document.getElementById('navi2_sublinks').style.display='block';document.getElementById('navi2_sublinks').style.visibility='visible'"

              Damit sollte es gehen...

              Habe es so wie oben gemacht, schau dir jetzt mal die Seite an, jetzt verschwindet zwar die Lücke, taucht aber bei onmouseover wieder auf und die Untermenüs werden auch kein Block???

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. PopUp-Menü bei onmouseover

                Marian
                – Informationen zu den Bewertungsregeln

                Hallo ansgar1704,

                Habe es so wie oben gemacht, schau dir jetzt mal die Seite an, jetzt verschwindet zwar die Lücke, taucht aber bei onmouseover wieder auf und die Untermenüs werden auch kein Block???

                Nimm doch CSS statt JS.
                Also vom Prinzip:
                Ein li (die navi dann als ul), in dem der link ist und eine weitere ul, in der die Links sind. Das zweite ul wird standardmäßig ausgeblendet und erst beim hovern des oberen li (~= link) angezeigt.

                ul li ul { display:none; }
                ul li:hover ul { display:block; }

                Ausführlicher hier: CSS-basierte  Layouts / Navigationsleisten

                Viele Grüße aus Freiburg,
                Marian

                --
                Microsoft broke Volkswagen's world record: Volkswagen made only 22 million bugs!
                <!--[if IE]><meta http-equiv="refresh" content="0; URL=http://www.getfirefox.com"><[endif]-->
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln