Comment créer des listes dynamiques pour la programmation HTML5 et CSS3 - les nuls

Une simple liste de boutons peut être meilleure que les liens HTML5 ordinaires, mais parfois, votre page doit avoir un schéma de navigation plus complexe. Par exemple, vous pouvez créer un système de menus pour aider l'utilisateur à voir la structure de votre site.

Construction d'une liste imbriquée

Commencez par créer un système de listes imbriquées sans CSS du tout.

Aucun style CSS n'est encore en place, mais la liste a ses propres complexités:

La liste principale a trois entrées. C'est en fait une liste multicouche. Le niveau supérieur indique les catégories, pas nécessairement les liens.
Chaque élément de la liste supérieure a sa propre sous-liste. Une deuxième couche de liens a différents liens dans la plupart des éléments.
L'élément de développement Web a une autre couche de sous-listes. La présentation générale de cette entrée de liste correspond à une hiérarchie complexe d'informations - comme la plupart des sites Web complexes.
La liste est validée par la norme HTML Strict. Il est particulièrement important de valider votre code avant d'ajouter CSS lorsqu'il s'agit d'un code HTML quelque peu complexe, comme la liste multiniveaux. Un petit problème dans la structure HTML qui peut passer inaperçu dans un document HTML peut causer toutes sortes de problèmes étranges dans votre CSS.

Voici le code de la liste imbriquée en HTML:

nestedList. html

Certains de mes liens favoris

Réseaux sociaux

digg
reddit
stumbleupon


Référence

google
wikipedia
dictionnaire


développement web

XHTML / CSS

w3 écoles
htmlHelp
CSS Zen Garden


Programmation

javascript. com
php. net
mysql. com

Faites particulièrement attention à votre indentation lorsque vous créez une liste imbriquée complexe comme celle-ci. Sans indentation appropriée, il devient très difficile d'établir la structure de la page. En outre, un élément de liste peut contenir du texte et une autre liste. Toute autre disposition entraînera une erreur de validation.

Masquage des listes internes

La première étape de la création d'un système de menu dynamique consiste à masquer les listes incorporées dans un élément de liste. Ajoutez le style CSS suivant à votre page:

li ul {display: none;}

En réalité, vous n'appliquez généralement cette technique qu'à un div spécialement marqué, comme un système de menu.

Votre page va subir une transformation surprenante.

Ce minuscule petit extrait de code CSS est un véritable concentré de puissance. Il fait des choses fascinantes, telles que

Fonctionnant sur des listes non ordonnées apparaissant dans les éléments de la liste: Cela signifie que la liste la plus haute ne sera pas affectée, mais toute liste non ordonnée apparaissant dans un élément de liste le style appliqué.
Utilisation de affichage: aucun pour faire disparaître le texte: La définition de l'attribut d'affichage indique à la page HTML de masquer complètement les données.

Ce code fonctionne bien sur presque tous les navigateurs.

Faire apparaître les listes internes sur cue

La partie amusante fait apparaître les listes intérieures lorsque la souris survole l'élément parent. Un deuxième style CSS peut y arriver:

li ul {display: none;} li: hover ul {display: block;}

Le nouveau code est assez intéressant. Découvrez l'effet de la souris sur l'élément de réseautage social.

Ce code ne fonctionne pas sur tous les navigateurs! Internet Explorer 6 (IE6) et les versions antérieures ne prennent pas en charge la pseudo-classe: hover sur tout élément sauf a. Fournissez un commentaire conditionnel avec un style alternatif pour les premières versions d'Internet Explorer. Tous les navigateurs modernes (y compris IE 7 et versions ultérieures) fonctionnent correctement.

Voici comment fonctionne le code qui réapparaît:

Toutes les listes à l'intérieur des listes sont cachées. La première règle de style masque toute liste contenue dans un élément de liste.
li: hover fait référence à un élément de la liste en cours de survol. C'est-à-dire que si la souris se trouve au-dessus d'un élément de liste, cette règle s'applique à elle.
li: hover ul fait référence à une liste non ordonnée dans un élément de la liste déroulante. En d'autres termes, si un contenu est une liste non ordonnée qui se trouve dans une liste sur laquelle la souris se trouve actuellement, appliquez cette règle.
Afficher la liste en tant que bloc. Affichage : le bloc remplace l'affichage précédent: aucune instruction et affiche l'élément particulier sous la forme d'un bloc. Le texte réapparaît comme par magie.

Ce tour de cache-cache n'est pas si parfait en soi. C'est en fait assez énervant d'avoir le contenu apparaître et s'en aller comme ça. Il y a un autre problème plus ennuyeux.

Pour voir pourquoi cela se produit, jetez un coup d'oeil au code CSS qui fait réapparaître le segment:

li: hover ul {display: block;}

Ce code signifie que l'affichage est bloqué pour tout ul un enfant d'un li planétaire. Le problème est que le développement Web li contient un ul qui contient deux uls. Toutes les listes sous Développement Web apparaissent, pas seulement l'enfant immédiat.

Une autre modification du CSS résout ce problème:

li ul {display: none;} li: hover> ul {display: block;}

Le symbole supérieur à (>) est un outil de sélection spécial. Cela indique une relation directe. En d'autres termes, le ul doit être un enfant direct du li planétaire, pas un petit-fils ou un arrière-petit-enfant. Avec cet indicateur en place, la page agit correctement.

Cette astuce vous permet de créer des listes imbriquées aussi profondément que vous le souhaitez et d'ouvrir n'importe quel segment en survolant son parent.

Mon code actuel comporte une liste avec trois niveaux d'imbrication, mais vous pouvez ajouter autant de listes imbriquées que vous le souhaitez et utiliser ce code pour le faire fonctionner comme un menu dynamique.