vertikale navigation, die zeigt, ausgeblendet im Untermenü klicken Sie mit JQuery

Ich versuche, ein Menü, das funktioniert wie das auf dieser flash-site:

http://elevensix.de/

Wenn ich auf "portfolio", nur dann auf die Unternavigation links offenbaren sich. Jetzt habe ich nur geschafft, eine typische vertikale "zeigen Unternavigation auf der hover-Menü" arbeiten.

Was erforderlich ist, ist, dass, sobald der entsprechende Menüpunkt ist es cicked, das Untermenü zeigt. Das Untermenü bleibt, enthüllt, wie die untermenüelemente schwebte über ausgewählt dann. Wenn der Untermenüpunkt aktiviert ist, zeigt der Inhalt, und sowohl die Menü-und Untermenü sichtbar bleiben (der ausgewählte Menü-und Untermenü-Element erhält eine eindeutige Farbe zu zeigen, die Navigations-Pfad). Uff.

Hier ist mein html:

<div id="nav">
<ul>
    <li><a href="#">about</a></li>
    <li><a href="#">testimonials</a>
        <ul>
          <li><a href="#">testimonial1</a></li>
          <li><a href="#">testimonial2</a></li>
          <li><a href="#">testimonial3</a></li>
          <li><a href="#">testimonial4</a></li>
        </ul>
    </li> 
     <li><a href="#">Services</a>
        <ul>
           <li><a href="#">services1</a></li>
           <li><a href="#">services2</a></li>
           <li><a href="#">services3</a></li>
           <li><a href="#">services4</a></li>
       </ul>
    </li> 
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

</div><!--end #nav-->

und hier ist mein css:

  #nav {
  width:160px;
  position: relative;
  top: 250px;
  left: 20px;
  }

 #nav ul {
 margin:0px; 
 padding:0px; 
 }

#nav ul li {
line-height:24px; 
list-style:none; 
}

#nav a {
text-decoration: none;
color: #9d9fa2;
}

#nav ul li a:hover {
position:relative;
color: #00aeef;
}

#nav ul ul {
display:none; 
position:absolute; 
left:160px; 
top:4px; 
}

#nav ul li:hover ul {
display:block;
color: #00aeef;
}

#nav ul ul li { 
width:160px; 
float:left; 
display:inline; 
line-height:16px; 
}

.selected {
color: #00aeef !important;
}

Sollte ich geben die Untermenüs einer Klasse, so dass ich verstecken können, dann zeigen Sie Ihnen? Und wo wäre der Klasse angewendet werden? Der ul? könnte ich die gleiche Klasse für beide Untermenüs? Bin ich falsch, wie beantrage ich das display:none Werte für diesen Zweck?

Vielen Dank an all die klugen Leute hier.

InformationsquelleAutor heathwaller | 2010-06-02

Schreibe einen Kommentar