Comment puis-je créer un sous-menu avec CSS de navigation?

Je veux créer un CSS de navigation avec des sous-menus qui apparaissent lorsque l'en-tête de l'onglet est sélectionné. Voici HTML d'exemple de la façon dont j'aimerais voir comment il fonctionne:

<ul id="menu">
<li id="nav-1"><a href="home.php">Home</a></li>
<li id="nav-2"><a href="#">Menu 1</a>
<ul id="subnav-2">
  <li><a href="page1">Page 1</a></li>
  <li><a href="page2">Page 2</a></li>
  <li><a href="page3">Page 3</a></li>
</ul>
</li>
<li id="nav-3"><a href="#">Menu 2</a>
<ul id="subnav-3">
  <li><a href="page1">page 1</a></li>
  <li><a href="page2">page 2</a></li>
  <li><a href="page3">page 3</a></li>
</ul>
</li>
  <li id="nav-4"><a href="crickets.php">Other tab without submenu</a>
  </li>
</ul>

Je n'arrive pas à trouver quelque chose en ligne pour faire ce travail. Des idées?

  • pour cela, vous aurez besoin de javascript.
InformationsquelleAutor bradm | 2012-04-13
  1. 1

    Si vous n'avez pas l'esprit en utilisant des bibliothèques, je vous conseille d'utiliser bootstrap. Il rend vraiment facile de créer des menus drop-down menus et il est livré avec un style par défaut qui est très soignée. Vous devriez jeter un oeil à ceci:

    http://twitter.github.com/bootstrap/javascript.html#dropdowns

    • +1 pour bootstrap recommandation; si remarquable savoir sur lorsque de nouvelles feuilles de style css.
    • Ouaip, c'est assez cool de la bibliothèque avec un bon style prédéfini. Le seul problème est que de nombreuses autres pages qui l'utilisent ont le même style que le tien, mais il est assez bon pour avoir une bonne recherche web en quelques secondes.
    • MASSIVE. Merci, c'est une grande bibliothèque. Cela remplit effectivement un écart énorme pour la fonctionnalité que je cherchais dans les autres parties du site.
    • Heureux de vous aider! 🙂
    InformationsquelleAutor txominpelu
  2. 1

    Si vous avez besoin de le faire sur un clic, vous aurez besoin de javascript. Si vous êtes ok avec la faire sur le vol stationnaire, vous pouvez le faire:

    #menu ul{
 dispaly: none;
}

#menu > li:hover ul{
 display: block;
}

    Mises en garde: cela ne fonctionnera que dans IE7+. Vous aurez également besoin d'avoir à positionner les listes déroulantes de manière appropriée (positionnement absolu, le plus probable).

    InformationsquelleAutor idrumgood
  3. 1

    Modifier: Oups! Vous avez dit "clic", pas "planer". Désolé. Je vais juste laisser ça ici au cas où il permet à quelqu'un d'autre.

    J'ai un exemple de quatre techniques pour le pur CSS des menus hiérarchiques de balisage sémantique ici:

    http://phrogz.net/JS/ul2menu/purecss_testsuite.html

    Voici un exemple d'une seule technique:

    http://jsfiddle.net/FX4Dz/1/

    <nav><ul>
  <li>Header 1<ul>
    <li class="sub">Subhead 1.1<ul>
      <li>Subhead 1.1.1</li>
      <li>Subhead 1.1.2</li>
    </ul></li>
    <li>Subhead 1.2</li>
    <li>Subhead 1.3</li>
  </ul></li>
  <li>Header 2<ul>
    <li>Subhead 2.1</li>
    <li class="sub">Subhead 2.2<ul>
      <li>Subhead 2.2.1</li>
    </ul></li>
  </ul></li>
</ul></nav>​
    nav li       {
    display:inline-block;
    padding:0 0.4em;
    height:1.4em; line-height:1.4em;
    position:relative;
}

nav li ul         { display:none }
nav li li         { display:block; width:8em }
nav li:hover > ul {
  display:block;
  position:absolute;
  top:1.4em; left:-1px; /* align with respect to horizontal row */
  width:8em; z-index:2
}
nav li li:hover ul {
  left:8em; top:-1px    /* subnav menus align next to their menu item */
}
    InformationsquelleAutor Phrogz
  4. 1

    La Swimbi app génère plutôt propre code CSS du menu déroulant. Vous pouvez utiliser l'application ou tout simplement copier le CSS de la page de démonstration http://f-source.com/swimbi/demo/?menu=Apple_Blue%20Sea

    InformationsquelleAutor dmpost
  5. 0

    http://css3menu.com/
    Télécharger et faire de vous l'un, puis passez par le code, le modifier, et d'apprendre

    InformationsquelleAutor squarephoenix