Une introduction à la création d'un menu arborescent pliable en utilisant du CSS pur
高洛峰
Libérer: 2017-03-17 13:00:56
original
1648 Les gens l'ont consulté
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.
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 !)
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; }
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.)
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn