CSS menu déroulant - CSS3 transition

Im création d'un menu déroulant. Assez simple fonctionne bien sur un ordinateur de bureau. J'ai besoin d'utiliser la même balise pour sensible aussi. Imaginez que le menu s'affiche lorsqu'un utilisateur clique sur un menu-icon, puis il suffit de tous les éléments de la liste sont empilées les unes au-dessous des autres.

Lorsque l'utilisateur place le pointeur sur l'élément de menu 1", puis le sous-menu s'affiche. Pour le moment j'ai simplement il d'apparaître et de disparaître sur le vol stationnaire. Il n'a pas l'air très agréable. Je me demandais si il y avait une façon simple d'utiliser un CSS3 transition pour faire de cette déroulant bien.

Grâce

CSS

.sub-menu{
 display:none;
}

li.sub-menu-parent:hover .sub-menu {
 display: block;
}

HTML

 <nav>
   <ul>
     <li class="sub-menu-parent"><a href="#">Menu Item 1</a>
       <ul class="sub-menu">
         <li><a href="#">Sub Item 1</a></li>
         <li><a href="#">Sub Item 2</a></li>
         <li><a href="#">Sub Item 3</a></li>
         <li><a href="#">Sub Item 4</a></li>
       </ul>
     </li></ul>
     <li><a href="#">Menu Item 2</a></li>
     <li><a href="#">Menu Item 3</a></li>
     <li><a href="#">Menu Item 4</a></li>
     <li><a href="#">Menu Item 5</a></li>
   </ul>
 </nav>
Regardez dans les transitions CSS. Aussi, il n'y a pas de "hover" de l'état sur les téléphones Mobiles que nous utilisons avec nos doigts - sauf si vous utilisez un Samsung Galaxy Note ou un autre appareil qui permet de planer.
Je suis sûr que taper sur un téléphone qui équivaut à un hover sur un ordinateur.
Un onglet sur un téléphone assimiler un hover, mais ne dépend pas d'elle. Il est maladroit, et ne fonctionne pas lorsque vous êtes en tapant sur un lien (comme dans votre exemple de code).
Le nombre incalculable de fois, j'ai navigué sur un site mobile en essayant d'entrer dans les sous-pages de navigation et finirent par ailleurs, à cause de l'passez question, il est utile d'examiner. Les vêtements des sites web semblent être la pire et de toute autre non-optimisation de sites web avec les menus déroulants. Vous pourrait émuler un "tapé" état à l'aide de cases à cocher pour stocker un "tapé" état et ensuite utiliser le :checked sélecteur css de la même manière que :hover. Pour un exemple de cette case, méthode, regarde mon pur CSS accordéon: jsfiddle.net/EumGj/2

OriginalL'auteur BhikhaM | 2013-11-20

  1. 6

    Vous aurez besoin d'utiliser un moyen de s'en cacher qui n'utilise pas display: none si vous voulez faire une transition en douceur. Les navigateurs ne peuvent transition de none à block, donc c'est un instant de bascule.

    Une façon de cacher la .sub-menu est d'utiliser visibility: hidden; puis visibility: visible; sur l'état de pointage, cependant cela rend la transition un peu plus difficile. Si vous venez de transition: all 0.5 ease, puis le menu va s'estomper en douceur, mais disparaissent rapidement, chaque fois qu'il perd le :hover.

    Il y a un l'article complet qui traverse le faire, mais l'essentiel est l'ajout d'un transition-delay à la visibilité, pour ensuite la retirer transition-delay sur l'état de pointage.

    .sub-menu-parent { position: relative; }

.sub-menu { 
  visibility: hidden; /* hides sub-menu */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: -10%;
  transition: all 0.5s ease 0s, visibility 0s linear 0.5s; /* the last value is the transition-delay for visibility */
}

.sub-menu-parent:hover .sub-menu {
  visibility: visible; /* shows sub-menu */
  opacity: 1;
  left: 0;
  transition-delay: 0s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

    DÉMO: http://codepen.io/shshaw/pen/gsFch

    OriginalL'auteur shshaw

  2. 1

    C'est vraiment utile pour de belles navigations, en particulier sous le niveau des trajets figurant sur hover etc

    http://www.justinaguilar.com/animations/

    OriginalL'auteur bowerslive