Pur CSS Menu avec Infinite Sub menus, Devin R
Ce menu pur CSS avec la technique sous menus infinie utilise seulement 10 règles CSS qui en fait un poids extrêmement léger. Cette technique permet de surmonter quelques bugs d'IE amusants, tels que Hovers Ghost et les problèmes Z-indexation via CSS pure.
Aperçu de l'exemple:
Commençons allons-nous? Commencez par créer un nouveau document html et utiliser le code suivant pour faire cette leçon pour tout le monde aller plus lisse.
Dans le corps de notre nouveau document permet de configurer une liste non ordonnée avec certains éléments de la liste souhaiterai.
Nous commençons par donner notre élément commandé non plus haut niveau un id de « nav » nous avons donc une sorte d'identifiant unique de référence à notre CSS. permet de copier la prochaine chose ensemble et imbriquer une deuxième liste dans l'un de nos premiers éléments de la liste de niveau et changer son ID à une classe comme ceci:
Voilà pour la partie HTML, juste noter que le menu de la liste de niveau supérieur obtient un identifiant appelé « nav » alors que tous les sous-menus imbriqués obtenir une classe appelée « nav ». Vous pouvez continuer à nicher autant de menus que vous aimez de la même manière à partir de maintenant pour répondre à vos désirs de menu css.
Permet de se déplacer sur la partie CSS. Dans l'en-tête de notre document permet de créer des balises de style qui abritera tous nos CSS menus comme ceci:
Ensuite, nous devons avoir un moyen d'identifier nos sous-menus de niveau supérieur à partir de tout le reste. Nous faisons cela pour donner des indications visuelles sur la façon dont notre premier niveau du menu secondaire est affiché sur notre menu de niveau supérieur. Pour ce faire, nous devons inclure une nouvelle classe à notre premier sous-menus de niveau seulement, appelé « premier » comme ceci:
Encore une fois cela ne concerne que nos « PREMIER NIVEAU SOUS MENUS » que nous appliquons cette nouvelle classe « première » à et non tout le reste de nos autres menus imbriqués. laisse point suivant à ces sous-menus de premier niveau et définir des règles de structure via CSS comme ceci:
Nous donnons notre premier menu niveau sous est un haut pourcentage de 100 pour faire tomber directement en dessous de notre menu de niveau supérieur. Parce que nos éléments de liste ont une frontière 1px nous donner nos premiers éléments de menu de niveau un style gauche qui est négatif 1 pour assurer notre première chute de sous-menu complètement à gauche lorsqu'il est affiché.
Notez comment on passe d'abord par l'élément #nav avant d'appeler .nav li vs indiquant simplement .nav li? Ceci est important comme une solution pour nous aide à venir sur certains problèmes d'espacement en raison de nos frontières d'éléments de liste. Le premier style que nous donnons ici est une largeur de 100% pour assurer nos articles de liste enjambent complètement à travers ses parents fixent la largeur. Le reste des styles sont au développeur pour changer comme ils l'entendent.
permet de donner une certaine structure suivante aux éléments d'ancrage de notre élément de liste comme ceci:
Nous avons d'abord le point à tous nos éléments de liste et rechercher toutes les balises d'ancrage, nous donnons à chaque balise d'ancrage d'un affichage du bloc et une largeur et une hauteur héritée de son propre élément parent.
Suivant Permet commencer à ajouter nos styles de comportement tels menus a hover et quand pour afficher un sous-menu et quand ne pas afficher un sous-menu. Cette partie est vraiment là où la magie se produit et notre capacité d'avoir un menu pur CSS avec sous-menus infinis entrent en jeu.
D'abord, nous devons donner à nos sous-menus règle pour les cacher de la vue de soi jusqu'à ce que dit autrement comme ceci:
Nous ajoutons une mesure supplémentaire de sécurité ici en traitant avec l'affichage style ne en déclarant « que des éléments de la liste non-ordonnée qui ont une classe de « nav » doit, par défaut, un affichage de none ».
Ensuite, nous installerons nos styles de couleurs de comportement pour les éléments de la liste et les balises d'ancrage de l'élément de liste comme ceci:
Nous rappelons d'abord à tous nos éléments de liste qui sont en état de vol stationnaire, ainsi que les balises d'ancrage de tous les éléments de la liste tandis que l'élément de liste est en état de vol stationnaire. Ensuite, nous avons mis une couleur de texte blanc ou plutôt #fff et un fond noir ou plutôt # 000. Ces styles sont pour le développeur de changer leur look désiré et la sensation.
Ensuite, nous devons créer une règle pour afficher nos sous-menus lorsque l'élément de liste parent est sous un état plané comme ceci:
Ici, nous précisant que tous les éléments de la liste qui sont en état de plané qui ont un élément enfant avec la classe de .nav (notre sous-menu) doivent être affichés. En utilisant le sélecteur d'enfant CSS (>), nous sommes aussi que seul le déclarons premier sous-menu enfant procédure doit être affiché pendant tout le reste reste caché.
permet de parler de la façon suivante nous fixons encore un autre bug IE. Celui-ci est appelé « IE: Hover Bug Ghost » et dans ses bases, il laisse sous-menus profondément imbriquées dans un état d'affichage constant après avoir été plané. Pour corriger ce bug, nous regardons simplement notre dernier style comme un point d'inflammation. En donnant le style et la structure de nos sous-menus quand on lui dit à afficher, par rapport à avoir une règle constante qui est toujours donner du style et de la structure de notre élément à tout moment, nous SQUASH le bug IE. Nous ajoutons donc les styles suivants à notre dernière règle comme ceci:
La position est cruciale absolue pour permettre à nos sous-menus à positionner par rapport à ses parents, emplacement sur la page. Nous avons également mis une largeur prédéfinie à nos sous-menus de 200px ainsi que compensée par le menu -2px haut (en raison de frontières largeur) et gauche 50% de son élément parent. dernier style et le plus important que nous donnons à nos sous-menus est un z-index de 1000 pour réaliser des couches de tout ou sûres trie plutôt correctement.
La dernière chose que nous devons faire est de squash encore un autre bug IE qui traite la largeur z-index et éléments correctement le tri ou plutôt des couches. Pour ce faire, nous état simple que tous les éléments parents du Sous-menu (éléments de la liste) doivent avoir une valeur z-index plus élevé que les éléments du sous-menu comme ceci:
Pssst. C'est folks, qui est tout le CSS vous devez avoir un menu CSS pur entièrement avec des quantités infinies acheva de sous-menus, profitez!
Terminé Code CSS:
Merci tout le monde.
Devin R. Olsen
Je ne comprenais pas bien le tutoriel
dit Farhan Fayyaz:
Barre de menus est une fonction standard de la plupart des applications Windows. Le but principal des menus est pour faciliter la navigation et le contrôle d'une application. Certains des éléments de menu les plus courants sont Fichier, Edition, Affichage, Outils, Aide et plus. Chaque élément de la barre de menu fournit également une liste d'options ou sous la forme d'un menu déroulant. Lorsque vous créez un programme Visual Basic 6, vous ne devez pas inclure autant d'éléments de menu comme une application Windows pleine fledge tels que les mots Microsoft.
Graham Bonham dit:
En ce qui concerne les barres de navigation qui enveloppent si l'écran / fenêtre est trop étroite, ma réaction instinctive est qu'ils ont l'air terrible, mais je reconnais maintenant que parfois ils ne regardent pas si mal s'ils ont pas de fond de couleur.
Graham Bonham dit:
Dans mon post précédant immédiatement (au moment de l'écriture, en attente de modération), j'ai remarqué un texte a été mal interprété comme une longue balise HTML et filtré.
« Je suppose qu'il ya un manque »
obtenu à travers, mais le texte
Je n'ai pas remarqué si un autre texte a été dépouillé.
Je pense que je l'ai vu au moins un affichage par une autre personne qui ne pouvait pas être pleinement compris, sans doute parce que du texte avait été dépouillé de cette façon.
Graham Bonham dit:
Très belle fonctionnalité et facile à copier et coller le code pour faire de nouveaux niveaux de menu.
En plus de travailler dans les navigateurs nommés, il m'a aussi semblé fonctionner correctement dans Google Chrome (juste d'un rapide coup d'oeil).
Je suppose qu'il ya un manque
Je me suis intéressé à voir comment cela se débrouille avec des objets longs de sous-menu et a constaté que l'emballage ne se produit si la largeur de pixel est supérieure à celle spécifiée dans le li: hover> .nav ligne. Cependant, je pensais que la largeur de pixel choisi avait l'air raisonnable dans la pratique et je confirme que je pouvais augmenter la largeur de pixel ici si je voulais vraiment répondre aux articles du sous-menu anormalement longs.
Toujours sur le thème des éléments du sous-menu anormalement longs, je me demande si elle est facilement accessible pour rendre l'écran défiler automatiquement pour l'affichage de plusieurs niveaux de longs éléments de sous-menu - ET ... pour faire défiler automatiquement lorsque les niveaux de menu sont cachés à nouveau!
Une autre possibilité pourrait être de faire des ajustements à la position gauche des différents niveaux de sous-menu pour tenter de permettre à tous les niveaux pour tenir dans l'espace disponible à l'écran, bien que cette approche a des limites que l'approche de défilement (s'il est possible de mettre en œuvre que) ne fonctionne pas.
Je ne pense pas vraiment que je peux faire une affaire qui justifierait l'effort supplémentaire et de la complexité de la mise en œuvre d'un de ce qui précède, mais je constate l'existence d'une limite au nombre de niveaux de menu qui peut être affiché et ce nombre varie en fonction les largeurs attribuées aux sous-menus.
J'étais curieux de voir les lignes dont le caractère> autres que dans le cadre d'une paire de support d'angle.
comme il est expliqué
« Nous premier point à tous nos éléments de liste qui sont en état de vol stationnaire, ainsi que les balises d'ancrage de tous les éléments de la liste tandis que l'élément de liste est en état de vol stationnaire. Ensuite, nous avons mis une couleur de texte de #fff blanc ou plutôt et un fond noir ou plutôt # 000 « .
Cet usage est nouveau pour moi. J'essaie parfois d'écrire des programmes de type filtre pour lire les fichiers HTML et écrire la sortie modifiée, le texte passant par paires de support d'angle sans modification. Trouver ce code HTML correctement écrit peut inclure ce qui ressemble à un support d'angle proche inégalée est pas tant une préoccupation car il serait de trouver le code correctement écrit, y compris ce qui ressemblait à un support à angle ouvert inégalée (comme un support à angle ouvert sans équivalent entraînerait le reste du fichier en cours de passer à travers inchangé).
je me demande si < also exists in HTML outside of an angle bracket pair.