Création d'un menu déroulant pur CSS - CSS Wizardry - CSS Architecture, optimisation des performances Web,

Écrit par Harry Roberts sur CSS Wizardry.

Cet article a été porté de la Devblog venturelab défunte, où je l'avais à l'origine en est l'auteur.

Le concept

Comment j'ai aidé le NHS construire rapidement un tout nouveau produit.

C'est là que la magie se produit, nous utilisons CSS pour transformer une série de imbriquée

s dans une surface lisse, facile à utiliser, le menu déroulant propre et autonome.

Juste un menu régulier de navigation horizontale ...

Droit, cassons maintenant vers le bas ... La première section est assez explicite-là, nous fixons simplement un menu de navigation horizontale régulière, de même que tout autre. Cependant, notez que les sélecteurs tels que .nav li et li a .nav sélectionneront tous les éléments de la liste et des liens dans les menus déroulants aussi. Ici nous utilisons la cascade sensiblement.

Une chose est à noter toutefois l'application de position: relative; aux éléments de la liste, ce qui nous permet d'utiliser la position: absolute; sur la imbriquée

s plus tard.

Les listes imbriquées

Ici, nous avons le CSS qui contrôle la

s imbriqué dans les éléments de liste de niveau supérieur. Il est évident que nous devons éliminer les balles avec la liste de style: aucun ;. alors la position: absolute; pour positionner le menu déroulant ci-dessus l'élément de liste qui le tient.

Une meilleure solution plus accessible que display: none; ...

La ligne suivante est cependant un point d'intérêt. Habituellement, la plupart des gens utiliseraient display: none; pour cacher le menu déroulant alors qu'il n'est pas utilisé, mais en raison d'un grand nombre de lecteurs d'écran avec quoi que ce soit en ignorant display: none; appliquée, ce qui est très inaccessible. Ce que nous faisons est la place tirer profit du fait de la

est tout à fait en place et positionner juste -9999px hors de l'écran lorsqu'ils ne sont pas en cours d'utilisation.

Ici, nous avons créé l'option Liste par défaut et styles lien. Remarquez le padding-top: 1px; sur le

• . Comme toutes les couleurs etc sont appliquées à la . mettre un rembourrage de 1 pixel sur la
• en effet la pousse -et donc la couleur à partir du bord de l'élément de la liste, en lui donnant l'illusion qu'ils sont tous séparés. Fait intéressant, IE ne reconnaîtra pas la mise en page du
• lors de son survol, la fermeture du menu déroulant à nouveau. Pour contourner cela, j'ai ajouté un 1 × 1px image GIF transparente en arrière-plan. Ici aussi nous enlevons les flotteurs appliqués précédemment.

  Ensuite, sur .nav ul a. nous appliquons white-space: nowrap; pour empêcher les articles d'emballage sur deux lignes, assurant un affichage constant.

  Et c'est là que la magie se produit ...

  Le dernier bit de code est le bit qui fait effectivement apparaître le menu déroulant lorsque l'élément de liste qui contient est plané. Maintenant, comme la pseudo-classe: hover ne fonctionne que sur la élément dans IE6, les listes déroulantes ne fonctionnera pas dans ce navigateur. Cela peut être atténué en utilisant une variété de correctifs. Cependant, comme les listes déroulantes sont progressifs, nous sommes d'accord avec eux ne fonctionne pas. Si vous ne voulez cependant obtenir ce travail dans IE6 alors mes solutions préférées est celle à l'aide des comportements.

  Cela devient difficile, mais il doit avoir un sens.

  Ce bloc de code est ici où les styles de vol stationnaire viennent, il y a un peu de code astucieux là-dedans qui contrôle ce que nous appellerons « persistants Etats hover » sur l'élément de niveau supérieur, même lorsque l'utilisateur est en vol stationnaire les éléments déroulants ...

  nav li: hover un est ce que vous permet de donner le lien de haut niveau un état de vol stationnaire persistant en vol stationnaire ses « enfants ». Cela fonctionne par le style tout lien dans une liste-élément lorsque cette liste-élément est plané. Ce bit devient un peu délicat, mais l'ours avec moi:

  • la liste déroulante
    se trouve à l'intérieur d'un
    • .
    • Si vous planant au-dessus d'un lien ( ) Dans un menu déroulant (
      ) Alors vous êtes aussi, en même temps, toujours planant haut niveau d'élément de liste (
      • ) Que vous planent contenu à l'intérieur.
      • Parce que vous êtes en vol stationnaire techniquement toujours le haut niveau d'élément de liste, le .nav li: hover un reste vrai, en laissant un style de vol stationnaire persistant sur son haut niveau d'élément de liste alors…

      ... en plaçant un élément de menu déroulant vous toujours planant haut niveau d'élément de liste qui signifie la cascade des styles encore tous les liens dans cette liste-point. Phew!

      Nous ajoutons également une touche de bonté Webkit, racontant les liens pour transformer. -webkit-transition: -webkit transformée 0.075s linéaire; dit Webkit pour animer la -webkit transformée que nous appliquons plus tard dans le code sur 0,075 secondes sans fade-in / out. Attention pour l'initiation de cela dans la prochaine (et dernière) bloc de CSS.

      Dernier mot

      Articles Liés

      • Comment faire pour créer un menu CSS pur Dropdown

      • Pur CSS Menu avec Infinite Sub menus, Devin R