la navigation verticale qui montre cachée sous-menu, cliquez sur l'aide de JQuery

Je suis en train de faire un menu qui fonctionne comme celui sur ce site en flash:

http://elevensix.de/

Lorsque je clique sur "portefeuille", alors seulement le menu des liens se révéler. Droit maintenant, j'ai seulement réussi à obtenir une verticale typique "révéler le menu sur le vol stationnaire menu" de travail.

Ce qui est nécessaire, c'est que une fois que l'élément de menu approprié, il cicked, ses sous-menu affiche. Ce sous-menu reste a révélé que les éléments de sous-menu sont les survole ensuite sélectionné. Lorsque l'élément de sous-menu est sélectionnée, le contenu des spectacles, et à la fois le menu et sous-menu reste visible (le menu sélectionné et l'élément de sous-menu sont donné une couleur différente pour afficher le chemin de navigation). Ouf.

Voici mon code 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-->

et voici mon 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;
}

Dois-je donner les sous-menus d'une classe de sorte que je peux me cacher puis leur montrer? Et où serait la classe-il être appliqué? À l'ul? pourrais-je utiliser la même classe pour les deux sous-menus? Je suis mal dans la façon dont je suis l'application de la display:none valeurs pour ce but?

Merci beaucoup à tous les gens intelligents ici.

InformationsquelleAutor heathwaller | 2010-06-02
  1. 1

    Voulez-vous afficher/masquer le sous-menu en cliquant sur l'élément de menu principal à l'aide de JQuery? Si c'est le cas, vous devez inclure jquery.js fichier et écrire le script, tels que:

    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
        });
        function Reveal(a){
            var ul = a.parentNode.getElementsByTagName("UL").item(0);
            $j(ul).animate({height: 'toggle' ,opacity: 'toggle'}, "slow");
        }
</script>

    Ensuite, vous devez appeler la fonction Révéler cliquez sur le lien de menu:

    <li><a href="#" onclick="Reveal(this);">testimonials</a>

    Vous devez exclure de la règle de unhidding de css pour planait li:

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

    Et je recommande d'utiliser la règle de l'exposant pour les liens:

    #nav ul a{outline:none;}

    Maintenant sous-menu va apparaître lentement et disparaître en cliquant sur l'élément de menu principal. Il existe de nombreuses fonctions de l'animation en JQuery. Vous pouvez apprendre de leurs ici

    • Wow merci beaucoup pour votre réponse rapide. Cette règle à propos décrivant des liens est grand merci. J'ai été jouer avec votre code et comprendre environ 50% de ce qui se passe sur plus d'étude est dans l'ordre. Mais j'ai aussi découvert que je pouvais utiliser la bonne'ole css et html et inclure le sous-menu code html sur les pages où je voulais montrer car elle n'a pas à être dynamique. Soit, de manière remercie de votre aide et utiliser le code comme rampe de lancement pour une amélioration de la navigation en bas de la route.
    InformationsquelleAutor greatromul