• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dropdown-Menü funktioniert nicht richtig

H

Html-NichKenner

Neues Mitglied
Hallo,

seit mehreren Tagen bastele ich bereits an meine Homepage auf der ich gerne ein Dropdown Menü hätte. Aber irgendwie krieg ich es nicht richtig es funktioniert schon aber am besten seht selbst.

HTML: 
<html>
<head>
<link rel="Stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("nav").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block";
    
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>
</head>
<body>
<div class="box">
<div class="header">

</div>
<div class="menu">
    <ul id="nav">
    <li><a id="top" href="#">YYYY</a>
    <ul>
    <li><a href="#">XXXXXXXXXXXX</a></li>
    <li><a href="#">XXXXXXXXXXXX</a></li>
    <li><a href="#">XXXXXXXXXXXX</a></li>
    </ul>

    </li>
    <li><a id="top" href="#">YYYY</a>
    <ul>
    <li><a href="#">XXXXXXXXX</a></li>
    <li><a href="#">XXXXXXXX</a></li>
    </ul>
    </li>
    </ul>
    <div class="space"></div>
</div>
<div class="content">
</div>
</div>
</body>
</html>
Code: 
body
{

    background-color: #111;
    margin:10px 0px 40px 0px;
    text-align: center;
}

div.box
{
    width:850px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
    background:#000;
    border:1px solid white;
    display:table;
}

div.header
{
    height: 90px;
    background-color:#000;
    background-repeat:no-repeat;
    border-bottom:2px solid #222;
    padding:6px;
    /* Layout */
    text-align:center;
    text-decoration:underline;
    font-family: comic sans ms;
    font-size:26px;
}

div.menu
{
    border-bottom:2px solid #222;
    height:22px;
    margin:0px;
    background:#000;
}

div.content
{
    margin-left: auto;
    margin-right:auto;
    margin-top:5px;
    margin-bottom:10px;
    min-height:500px;
    width:830px;
    display:block;
    /* Layout */
    text-align:left;
    text-decoration:none;
    font-family: arial;
    font-size:15px;
}

ul#nav {
    margin:0px;
    padding:0px;
    text-align:center;
}

ul#nav li {
    height:22px; /* Höhe */
    list-style:none;
    width:140px;
    float:left;
    position:relative;

}

ul#nav li ul /* Kasten -> OnMouseOver*/
{ 
    position:absolute;
    left: 0;
    top:24px; /* Abhängig von Höhe */
    display:none;
    margin:0px;
    padding:0px;
    border-left:2px solid #222;
    border-right:2px solid #222;

}

ul#nav li:hover ul
{
    display:block; /* Nötig zum Erscheinen bei FF */
}


ul#nav a /* Generell zu den Links */
{
    text-decoration:none;
    display: block;
    color:#fff; /* Schriftfarbe */
    height:22px; /* Abhängig von Höhe */
    font-size: 12; font-weight: bold;
}


ul#nav li a#top
{
    background:#333; /* BgF. der Kat. */
    border-right:2px solid #222;
}

ul#nav li a#top:hover
{
    color:red;/* BgF. der Kat. bei OnMouseOver */
}

ul#nav li ul li a {
    background: #333;
    border:0px;
    
}

ul#nav li ul li a:hover
{
    background:yellow;
}

ul#nav li ul li
{
   border-bottom:2px solid #000;width:138px;
}

Woran könnte es liegen?
 
kein plan von JS in bezug auf drop down ^^

ABER merke dir 1.

JS ist abschaltbar. und gerade so etwas wichtiges, wie ein menu sollte man damit nicht machen. denn wie soll der besucher navigieren, wenn sich kein dropdown öffnet?

es gibt jedoch noch hoffnung für dich ;-)

ein dropdown menu kannst du auch mit reinem css, ganz ohne JS bewerkställigen ;-)

hier mal ein link xD

Drop-Down-Navigationsmenü mit CSS und (fast) ohne Javascript - Tutorial - Peter Kröner - Die Kunst des Machbaren

Hinweis: auf dieser seite wird ganz am ende etwas JS benutzt. das ist aber nur für ältere browser. du brauchst es nicht damit dein drop down funzt ;-)
ich habs ganz weggelassen xD

grüße hokage
 
hokage555 schrieb:
Hinweis: auf dieser seite wird ganz am ende etwas JS benutzt. das ist aber nur für ältere browser. du brauchst es nicht damit dein drop down funzt ;-)
ich habs ganz weggelassen xD

grüße hokage
Zum Vergrößern anklicken....

Der Tipp, das JS wegzulassen ist nicht gut: im Internet Explorer 6 funktioniert das
Menü nur mit JS - und dieser hat nach wie vor eine Verbreitung von knapp 25 %!

Grüße
Bernhard
 
Wenn man das Menü ausreichend konzipiert, dann kann man auch auf den JS-Teil verzichten, damit wird das Menü für IE6-Nutzer nur anders benutzbar. Und IE6-Nutzer sind meist eh die, die nie einen anderen Browser nutzen würden, sie wissen also gar nicht, dass es nicht so schön funktioniert wie in anderen Browsern.

Solange die Nutzbarkeit gegeben ist, finde ich es nur in Ordnung, dass Browser, die einfach nicht alles können, was andere können, den Nutzern auch nicht alles bieten. Wer schlechte Software benutzt, muss Abstriche machen - wohlgemerkt nur im Aussehen oder der Bequemlichkeit, niemals aber in der Nutzbarkeit!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben