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

Construire une liste imbriquée

Commencez par créer un système de listes imbriquées sans aucune CSS à tous.

Pas de style CSS est encore en place, mais la liste a ses propres complexités:

• La liste principale dispose de trois entrées. Ceci est en fait une liste multicouche. Le niveau supérieur indique catégories, pas nécessairement des liens.

• Chaque élément dans la liste du haut a son propre sous-liste. Une deuxième couche de liens a différents maillons de la plupart des éléments.

• L'élément de développement web a une autre couche de sous-listes. La disposition générale de cette entrée de liste correspond à une hiérarchie complexe de l'information - comme la plupart des sites Web complexes.

• La liste valide à la norme HTML strict. Il est particulièrement important de valider votre code avant d'ajouter CSS quand il implique code HTML quelque peu complexe, comme la liste à plusieurs niveaux. Un petit problème dans la structure HTML qui peut passer inaperçu dans un document HTML brut peut causer toutes sortes de problèmes étranges dans votre CSS.

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

Certains de mes liens favoris
Le réseautage social
digg
reddit
StumbleUpon
Renvoi
Google
Wikipédia
dictionnaire
développement web
XHTML / CSS
W3 Schools
htmlhelp
CSS Zen Garden
Programmation
javascript.com
php.net
mysql.com

Faites attention avec votre empreinte en faisant une liste imbriquée complexe comme celui-ci. Sans indentation correcte, il devient très difficile d'établir la structure de la page. En outre, un élément de la liste peut contenir du texte et une autre liste. Toute autre disposition entraînera une erreur de validation.

Cachant les listes internes

La première étape de la création d'un système de menu dynamique est de cacher toutes les listes qui sont incorporés dans un élément de liste. Ajouter le style CSS suivant à votre page:

li ul {display: none;}

En réalité, vous appliquez cette technique habituellement seulement à une div spécialement marqué, comme un système de menu.

Votre page va subir une transformation surprenante.

Ce minuscule bout de code CSS est un véritable concentré de puissance. Il fait des choses fascinantes, comme

• Fonctionnant sur les listes à puces qui apparaissent à l'intérieur des éléments de liste: Qu'est-ce que cela signifie vraiment est la liste la plus haute ne sera pas affectée, mais toute liste non ordonnée qui apparaît à l'intérieur d'un élément de la liste aura le style appliqué.

• Utilisation display: none pour faire disparaître le texte: Réglage de la afficher attribuer raconte la page HTML pour cacher les données indiquées tout à fait.

Ce code fonctionne bien sur presque tous les navigateurs.

Obtenir les listes internes à apparaître au bon moment

La partie amusante obtient les listes intérieur qui doit apparaître lorsque la souris est sur l'élément parent. Un second style CSS peut y arriver:

li ul {display: none;} li: hover ul {display: d'îlot}

Le nouveau code est assez intéressant. Découvrez l'effet de tenir 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 :flotter pseudo-classe sur un élément à l'exception un. Fournir un commentaire conditionnel avec un style alternative pour les premières versions de IE. Tous les navigateurs modernes (y compris IE 7 et versions ultérieures) fonctionnent très bien.

Voilà comment le code de liste réapparition fonctionne:

• Toutes les listes sont des listes à l'intérieur caché. La première règle de style cache toute liste qui est à l'intérieur d'un élément de la liste.

• li: hover se réfère à un élément de la liste qui est en cours a plané sur. Autrement dit, si la souris se trouve au-dessus d'un élément de la liste, cette règle qui lui appartient.

• li: hover ul se réfère à une liste non ordonnée l'intérieur d'un élément de la liste survolé. En d'autres termes, si une partie du contenu est une liste non ordonnée qui repose à l'intérieur d'une liste qui a actuellement le vol stationnaire de la souris dessus, appliquer cette règle.

• Afficher la liste comme un bloc. display: block écrase le précédent display: none instruction et affiche l'élément particulier comme un bloc. Le texte réapparaît comme par magie.

Ce cache-cache truc est pas aussi bien que sur son propre. Il est en fait assez ennuyeux d'avoir le contenu pop up et disparaissent comme ça. Il ya un autre problème plus ennuyeux.

Pour voir pourquoi cela se produit, prendre un autre regard sur le code CSS qui provoque le segment de réapparaître:

li: hover ul {display: d'îlot}

Ce code signifie ensemble afficher à bloc pour toute ul qui est un enfant d'un plané li. Le problème est que le développement Web li contient un ul qui contient deux de plus uls. Toutes les listes au titre du développement web apparaissent, et pas seulement l'enfant immédiate.

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

li ul {display: none;} li: hover> ul {display: d'îlot}

Le symbole supérieur (>) Est un outil de sélection spéciale. Il indique une relation directe. En d'autres termes, la ul doit être un enfant direct de l'plané li, pas un petit-enfant ou 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 un segment en plaçant sur son parent.

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

Ce type de menu est pas nécessairement une bonne idée. Avoir des trucs pop autour de ce genre est en fait assez distrayant.