Erfahren Sie, wie Sie mit reinem CSS ein zusammenklappbares Baummenü erstellen

Mit der Veröffentlichung von CSS3 ist die ausländische Forschung in vollem Gange, aber es gibt immer noch viele Menschen in China, die der Meinung sind, dass IE CSS3 nicht unterstützt, und denen das gleichgültig bleibt weigern sich zu lernen. Aber die Geschichte lehrt uns, dass sich die guten Dinge durchsetzen werden und dass CSS3 irgendwann CSS2 ersetzen wird. Lassen Sie uns ein mit CSS3 erstelltes zusammenklappbares Baummenü mit Ihnen teilen.

Ich glaube, jeder kennt das Baummenü. Wir verwenden normalerweise CSS JS, um es zu implementieren. Die Einführung von CSS3 ermöglicht es uns, die Einschränkungen von JS zu beseitigen und den „Selektor“ von CSS3 direkt zu verwenden, um das zusammenklappbare Baummenü zu realisieren.

Es gibt viel Gesamtcode, daher werde ich nicht Satz für Satz darauf eingehen, sondern nur das erwähnen, was ich für wichtig halte.

Html-Code:

subordinate 🎜>

1. subordinate< ;/ li>
   
2. 
   subordinate
   
   < ;ol>
   
3. Unbegrenztes Level


4. < a>Unendliches Level< ;/a>


5. Unendliche Ebene


6. Unbegrenztes Level


7. Unendliches LevelUnbegrenzt

< ;/ol>


Die Implementierungsidee besteht darin, den aktivierten Wert des Kontrollkästchens zu verwenden, um zu bestimmen, ob die untergeordnete Spalte erweitert ist. Der CSS3-Selektor stellt die Pseudoklasse bereit: Diese Pseudoklasse bietet uns die Möglichkeit Führen Sie Ihr CSS aus, wenn ein Element den überprüften Wert hat. (Sehr mächtig, oder? Mit CSS3 werden wir viel weniger JS schreiben!)

subordinate


Wenn das Kontrollkästchen einen aktivierten Wert hat, lassen Sie das OL realisieren, um die gewünschte Funktion zu erreichen.

Werfen wir einen Blick auf den
CSS-Code:
li input {
position:absolute;left:0;margin-left : 0;opacity:0;z-index:2;cursor:pointer;height:1em;width:1em;top:0;
}
input ol {
display:none;
}
input ol > li {
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;li label {
cursor: Zeiger ;display:block;padding-left: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;
}

Dieser Code ist die Mitte des Baummenüs:

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;
}

Dies bedeutet, dass, wenn inoput überprüft wurde, es Ein Stil, der einem Level-OL gehört.

Sie müssen es nicht lesen, wenn Sie IE9 oder niedriger verwenden. Bitte verwenden Sie einen Nicht-IE-Browser.

(Es ist auch möglich, dafür zu sorgen, dass der IE6-Browser es unterstützt, aber Sie müssen JS hinzufügen, um CSS3-Attribute zu simulieren. Es gibt viele talentierte Leute im Ausland, die JS geschrieben haben, damit der IE6-Browser einige CSS3 unterstützt, wie z als PIE.)

Zusammenfassung:

Im Allgemeinen ist die Implementierungsidee sehr einfach und verwendet hauptsächlich die überprüfte Pseudoklasse von CSS3, um die versteckte Anzeige von OL zu realisieren. Leider unterstützt der IE-Browser CSS3 nicht, aber wir können die Forschung zu CSS3 nicht aufgeben, nur weil der IE es nicht unterstützt. CSS3 und HTML5 sind im Ausland beide sehr heiße Themen im Front-End. Ihre Forschung übertrifft unsere bei weitem, aber es gibt immer noch nicht viele Leute, die es tatsächlich in China ausprobiert haben, was für einen Front-End-Entwickler eine sehr traurige Sache ist. Ich denke, CSS3 sollte unsere Aufmerksamkeit erregen und uns nicht gleich am Anfang verlieren lassen. Lassen Sie uns alle zusammenarbeiten, um die Entwicklung von CSS3 voranzutreiben.