Wicki: Vertikales Menü mit 3 Ebenen,Hover,jQuery

Beitrag lesen

SELF-Forum

Vertikales Menü mit 3 Ebenen,Hover,jQuery

Wicki
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche ein vertikales Menü mit 3 Ebenen zu erstellen, die Ebenen 2 und 3 sollen jeweils durch "Hovern" eingeblendet werden. Die Hover-Funktionalität wird durch "jQuery" realisiert. Test erfolgte mit "Firefox Version 10".
Mein Problem:
Wenn ich in Ebene 2 "hovere", wird ein vorhandenes Menü der Ebene 3 immer am Anfang der Ebene 2 und nicht in Höhe des gehoverten Elements angezeigt.
Am Beispiel:
'Verschiedenes' -> 'Hover, Animate': die 3 zugehörigen Untermenü-Einträge werden nicht in der Höhe von 'Hover, Animate' dargestellt.
Hier nun der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Vertikales Menü</title>
<style type="text/css">
  body{
    font-size:0.85em;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:rgb(0, 255, 255);
  }
  #nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    line-height:2em
  }
  #nav a {
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    text-decoration:none;
    background-color:#eef4d3;
  }
  #nav li{
    position:relative;
    width:12em;
    margin: 0;
    margin-top:-3px;
  }
  #nav ul {
    position:absolute;
    display:none;
    left:12em;
  }
  #nav li ul a{
    width:12em;
    height:auto;
    float:left;
  }
  #nav li ul{
    top:3px;
  }
  /* für Menü-Ebene 3 */
  #nav li ul ul {
    margin:0px 0 0 10px;
  }
</style>
<script type='text/javascript' src='Scripts/jquery-1.4.1.js'></script>
<script type='text/javascript'>
  function mainmenu(){
    $("#nav li").hover(function(){  //handlerin
      $(this).find('ul:first').css({visibility: "visible"}).show(400);
      },function(){  //handlerout
      $(this).find('ul:first').css({visibility: "hidden"});
    });
   $("#nav a").hover(function(){
      $(this).css({backgroundColor:'#fff',color:'#333'});
      },function() {
      $(this).css({backgroundColor:'#eef4d3',color:'#333'});
    });
  }
  $(document).ready(function(){
    $("h3").append(new Date().toLocaleString());
    mainmenu();
  });
</script>
</head>

<body>
  <h3>Zeit: </h3>
  <ul id="nav">
    <li><a href="bildKlick.html">Bilder klicken</a></li>
    <li><a href="#">Formular</a>
      <ul>
        <li><a href="formWerte.html">Formular pr&uuml;fen</a></li>
        <li><a href="input.html">Formular in Tabelle</a></li>
      </ul>
    </li>
    <li><a href="#">Verschiedenes</a>
      <ul>
        <li><a href="#">Menus</a>
          <ul>
            <li><a href="menus/menu.html">Horizontal, 3-stufig</a></li>
            <li><a href="menus/index.html">Vertikal, 2-stufig</a></li>
          </ul>
        </li>
        <li><a href="focus.html">Focus</a></li>
        <li><a href="find.html">Find</a></li>
        <li><a href="#">Hover, Animate</a>
          <ul>
            <li><a href="showHideHover.html">showHideHover</a></li>
            <li><a href="animate.html">Animation</a></li>
            <li><a href="animEff.html">Animation,5 Varianten</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</body>
</html>

Bin dankbar für jeden Hinweis.
Gruß Wicki

Beitrag melden
–
Informationen zu den Bewertungsregeln