Dev Faq
-2
votes

Puis-je faire un sous-menu Liste imbriqué sans utiliser JavaScript?

est-il possible lorsque vous utilisez des listes imbriquées pour créer un sous-menu Drop Down Hover sans utiliser JavaScript?

Je dois utiliser

  • code> éléments et un
      code> pour cela. P>

      Je sais comment faire cela avec la mouseover de JavaScript, mais je me demandais s'il était possible de révéler le sous-menu lors de la navigation sur sur code> avec seulement CSS? P> 

      <ul class="nav-menu-items">
  <li class="menu-item menu-item-3">HOME</li>
  <li class="menu-item menu-item-2">ABOUT
    <ul class="submenu about-submenu">
      <li class="submenu-item ubmenu-item-1"><a class="submenu-link">Our Team</a></li>
      <li class="submenu-item ubmenu-item-2"><a class="submenu-link">Other stuff</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-3"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-4"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-5"><a class="td navigation--link">STUFF</a></li>
</ul>

    • 0 commentaires

    5 Réponses :

    1
    votes

    Comme vous l'avez déjà mentionné, utilisez : planez code> états et modifier afficheur code> attribut, quelque chose comme ceci:

    p> 

    <ul class="nav-menu-items">
  <li class="menu-item menu-item-3">HOME</li>
  <li class="menu-item menu-item-2">ABOUT
    <ul class="submenu about-submenu">
      <li class="submenu-item ubmenu-item-1"><a class="submenu-link">Our Team</a></li>
      <li class="submenu-item ubmenu-item-2"><a class="submenu-link">Other stuff</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-3"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-4">Menu STUFF
    <ul class="submenu about-submenu">
      <li class="submenu-item ubmenu-item-1"><a class="submenu-link">Menu Stuff 1</a></li>
      <li class="submenu-item ubmenu-item-2"><a class="submenu-link">Other Menu stuff</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-5"><a class="td navigation--link">STUFF</a></li>
</ul>

    0 commentaires
    1
    votes

    Bien sûr, vous pouvez définir son Afficher code> sur NONE et l'afficher uniquement, lorsque vous planifiez le parent LI:

    p> 

    <ul class="nav-menu-items">
  <li class="menu-item menu-item-3">HOME</li>
  <li class="menu-item menu-item-2">ABOUT
    <ul class="submenu about-submenu">
      <li class="submenu-item ubmenu-item-1"><a class="submenu-link">Our Team</a></li>
      <li class="submenu-item ubmenu-item-2"><a class="submenu-link">Other stuff</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-3"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-4"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-5"><a class="td navigation--link">STUFF</a></li>
</ul>

    0 commentaires
    1
    votes

    Oui, c'est et vous pouvez également ajouter de belles animations à l'intérieur, en le masquant à travers l'opacité opacité forte> forte> propriété forte> et non l'affichage strong> une. Ensuite, utilisez Selectors imbriqués forts> pour déclencher la visibilité

    .MY_PARENT_DIV: HOVER .MY_CHILD_DIV {} strong> P>

    STRY>

    p> 

    <ul class="nav-menu-items">
  <li class="menu-item menu-item-3">HOME</li>
  <li class="menu-item menu-item-2">ABOUT
    <ul class="submenu about-submenu">
      <li class="submenu-item ubmenu-item-1"><a class="submenu-link">Our Team</a></li>
      <li class="submenu-item ubmenu-item-2"><a class="submenu-link">Other stuff</a></li>
    </ul>
  </li>
  <li class="menu-item menu-item-3"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-4"><a class="td navigation--link">STUFF</a></li>
  <li class="menu-item menu-item-5"><a class="td navigation--link">STUFF</a></li>
</ul>

    0 commentaires
    1
    votes

    Voici un exemple simple de la façon dont cela pourrait être fait:

    p> 

    <nav role="navigation">
  <ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a>
      <ul class="dropdown">
        <li><a href="#">Sub-1</a></li>
        <li><a href="#">Sub-2</a></li>
        <li><a href="#">Sub-3</a></li>
      </ul>
    </li>
    <li><a href="#">Three</a></li>
  </ul>
</nav>

    0 commentaires
    1
    votes

    Oui, c'est possible. Vous pouvez appliquer le même principe que vous avez décrit sur Mouseover , à l'aide de survolez et visibilité .

    Ajoutez ceci à votre CSS: xxx

    Remarque: il vaut mieux utiliser Visibilibty au lieu de affichage dans ce cas, car vous pouvez ajouter transition avec opacité < / code>, créant des effets d'animation.

    0 commentaires

    Articles qui pourrait vous intéresser :

    Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
    Select2 ne s'affiche pas correctement dans le mode bootstrap
    Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
    Comment puis-je définir un format pour les nombres d'entrée dans Blazor