Eine Einführung in die Erstellung eines reduzierbaren Baummenüs mit reinem CSS

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 die gleichgültig bleiben und sich weigern, etwas 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 ein zusammenklappbares 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:

for="subsubfolder1">subordinate

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


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


5. Unendliche Ebene


6. Unbegrenztes Level


7. Unendliches LevelUnbegrenzt

< ;/ol>


Die Idee der Implementierung besteht darin, den aktivierten Wert des Kontrollkästchens zu verwenden, um zu bestimmen, ob die untergeordnete Spalte erweitert ist. Der CSS3-Selektor bietet: überprüft diese Pseudoklasse, dieses Pseudo -class ermöglicht uns die Ausführung Ihres CSS, wenn das 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 als nächstes 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 >
height:0;overflow:hidden;margin-left:-14px!important;padding-left:1px;
}
li label {
cursor:pointer;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 > li {
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 ist der Stil, der dem OL der gleichen Ebene gehört, nachdem inoput hat überprüft.

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, wie z. B. PIE, unterstützt .)

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 ausprobieren, was für ein Front-End sehr traurig ist Entwickler-Sache. 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.

Das obige ist der detaillierte Inhalt vonEine Einführung in die Erstellung eines reduzierbaren Baummenüs mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!