Une introduction à la création d'un menu arborescent pliable en utilisant du CSS pur

Avec la sortie de CSS3, la recherche étrangère bat son plein, mais il y a encore beaucoup de gens en Chine qui pensent qu'IE ne prend pas en charge CSS3 et restent indifférents et refusent d'apprendre. Mais l’histoire nous dit que les bonnes choses prévaudront et que CSS3 finira par remplacer CSS2. Partageons avec vous un menu arborescent pliable créé avec CSS3.

Je pense que tout le monde connaît le menu arborescent. Nous utilisons généralement CSS JS pour l'implémenter. L'arrivée de CSS3 permet de s'affranchir des contraintes de JS et d'utiliser directement le "sélecteur" de CSS3 pour réaliser un menu arborescent pliable.

Il y a beaucoup de code global, donc je n'entrerai pas dans les détails phrase par phrase, je mentionnerai seulement ce que je pense être important.

Code HTML :

pour="subsubfolder1">subordonné

1. fichier">subordonné< ;/ li>
   
2. 
   subordonné
   
   < ;ol>
   
3. Niveau illimité


4. Niveau infini< ;/a>


5. Niveau infini


6. Niveau illimité


7. Niveau infini
8. Illimité

< ;/ol>


L'idée de l'implémentation est d'utiliser la valeur cochée de la case à cocher pour déterminer si la colonne subordonnée est développée. Le sélecteur CSS3 fournit : coché cette pseudo-classe, ce pseudo. -class nous permet d'exécuter votre CSS lorsque l'élément a la valeur vérifiée. (Très puissant, non ? Avec CSS3 on écrira beaucoup moins de JS !)

subordonnée


Lorsque la case à cocher a une valeur cochée, laissez l'OL se réaliser pour atteindre la fonction souhaitée.

Jetons ensuite un coup d'œil au code CSS :

li input {
position:absolute;left:0;margin-left:0;opacity:0;z-index : 2; curseur: pointeur; hauteur: 1em; largeur: 1em; haut: 0;
>
entrée ol {
affichage: aucun;
>
entrée ol > >hauteur :0;débordement:caché;marge-gauche:-14px!important;padding-left:1px;
>
li label {
curseur:pointeur;affichage:bloc;padding-gauche:17px ;background :url(toggle-small-expand.png) no-repeat 0px 1px;
}
input:checked ol {
background:url(toggle-small.png) 44px 5px no-repeat; margin : -22px 0 0 -44px;padding:27px 0 0 80px;height:auto;display:block;
>
input:checked ol > {
height:auto;
}

Ce code est au centre du menu arborescent :

input:checked ol {
background: url(toggle-small.png) 44px 5px no-repeat;margin: -22px 0 0 -44px;padding:27px 0 0 80px;height: auto;display: block;
>

C'est le style appartenant à l'OL du même niveau après vérification d'inoput.

Vous n'avez pas besoin de le lire si vous utilisez IE9 ou une version antérieure. Veuillez utiliser un
navigateur non-IE.
(Il est également possible de faire en sorte que le navigateur IE6 le prenne en charge, mais vous devez ajouter JS pour simuler les attributs CSS3. Il existe de nombreuses personnes talentueuses à l'étranger qui ont écrit JS pour permettre au navigateur IE6 de prendre en charge certains CSS3, comme comme PIE.)

Résumé :

En général, l'idée d'implémentation est très simple, utilisant principalement la pseudo-classe vérifiée de CSS3 pour réaliser l'affichage caché d'OL. Malheureusement, le navigateur IE ne prend pas en charge CSS3, mais nous ne pouvons pas abandonner la recherche sur CSS3 car IE ne le prend pas en charge. CSS3 et
HTML5 sont tous deux des sujets très brûlants dans le front-end à l'étranger. Leurs recherches dépassent de loin les nôtres, mais il n'y a toujours pas beaucoup de gens qui l'essaient réellement en Chine, ce qui est très triste pour un front-end. chose de développeur. Je pense que CSS3 devrait attirer notre attention et ne pas nous laisser perdre sur la ligne de départ. Travaillons tous ensemble pour promouvoir le développement de CSS3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!