CSS zur Realisierung der Einzelauswahl-Faltmenüfunktion

Führen Sie kein Front-End-UI-Framework ein, es sei denn, dies ist unbedingt erforderlich, da HTML5 und CSS3 die meisten Funktionen bereits implementieren können, z. B. die vorherige Ausgabe von "CSS zum Erreichen des einfachsten Switches".

Allerdings sind viele Leute in der Denkweise noch immer im Web 2.0-Zeitalter gefangen und verwenden zur Erstellung der Benutzeroberfläche verschiedene Bibliotheken, was zu aufgeblähten Webseiten führt. Heute zeige ich Ihnen, wie Sie mit reinem CSS ein Single-Select-Faltmenü implementieren, ohne dass JavaScript erforderlich ist. Akkordeons ähneln Registerkarten. Logischerweise handelt es sich bei beiden um Einzelauswahlfelder, mit der Ausnahme, dass Akkordeons im Allgemeinen vertikal gestapelt sind, während Registerkarten horizontal angeordnet sind.

Registerkarten:

Da es sich um eine einzelne Auswahl handelt, können Sie zur Implementierung das Optionsfeld <input type="radio">verwenden. Erstens verwendet das übergeordnete Element dieser Optionsfeldgruppen <form>, da <form> die Änderungen der Schaltflächengruppe überwachen und über das Namensattribut auch direkt die RadioNodeList-Liste abrufen und den Wert ändern kann. Dies ist sehr praktisch und es müssen keine anderen CSS-Selektoren festgelegt werden. Der HTML-Code dieses Klappmenüs lautet also wie folgt:

<Formular-ID="Formular">
    <Eingabetyp="Radio" Name="Collapse">
    <div></div>
 
    <Eingabetyp="Radio" Name="Collapse">
    <div></div>

    <Eingabetyp="Radio" Name="Collapse">
    <div></div>
</form>

Legen Sie eine ID für das <form> fest, damit es direkt über window[id] gefunden werden kann. Das Namensattribut jedes <radio> muss konsistent sein, und dann erhalten Sie die Radiogruppe über form[name]. form[name].value ist der Wert der aktuell ausgewählten Schaltfläche, der den Titel der Minimierungsschaltfläche darstellt. Auf jedes <radio> folgt ein <div>, das den Inhalt des erweiterten Menüs darstellt. Aber das Standard-<radio> sieht so aus:

Oder verwenden Sie zuerst appearance: none, um den Standardstil wie oben gezeigt zu deaktivieren, verwenden Sie dann ::before als Namen auf der linken Seite der Schaltfläche (lesen Sie das Value-Attribut), ::after als kleinen Pfeil auf der rechten Seite (die Zeichen > und v) und verwenden Sie das Attribut :checked, um den reduzierten Status anzuzeigen.

Eingabe[Typ="Radio"] {       
      Cursor: Zeiger;
      Aussehen: keines;
      Anzeige: Block;
}
 
 
Eingabe[Typ="Radio"]::vor {
      Inhalt: attr(Wert);
}
 
 
Eingabe[Typ="Radio"]::nach {       
      schweben: rechts;
      Inhalt:">";
}
 
 
Eingabe[Typ="Radio"]:aktiviert::nach {
      Inhalt: "v";
}

Bei <div> ist es standardmäßig ausgeblendet und nur das <div> hinter dem ausgewählten <radio> wird angezeigt. Was die Faltanimation betrifft, hängt es von Ihren Anforderungen ab. Für mich wäre es ohne Animation erfrischender.

Eingabe[Typ="Radio"] + div {
      Anzeige: keine;
}
 
 
Eingabe[Typ="Radio"]:aktiviert + div {
      Anzeige: Block;
}

Oben sehen Sie das grundlegende Layout. Mit ein wenig zusätzlichem Styling wird daraus:

Aufgrund der Eigenschaften von <radio> kann das Menü jedoch nicht umgekehrt werden. Nachdem das Menü erweitert wurde, können Sie es nur durch Klicken auf ein anderes Menüelement ausblenden. Das ist natürlich in Ordnung. Wenn Sie die Funktion der umgekehrten Menüauswahl implementieren müssen, müssen Sie das zuletzt erweiterte Menüelement aufzeichnen und bei jedem Klickereignis feststellen, ob es sich um einen wiederholten Klick handelt:

// für jedes <radio>
radio.onclick = () => {
  wenn (Fenster.Radio === Radio) {
    Eingabe.geprüft = falsch;
    Fenster.Radio = null;
  } sonst window.radio = radio;
};

Dies implementiert die inverse Auswahlmöglichkeit des Single-Select-Faltmenüs:

Übrigens ist der unordentliche Text im Bild das Ergebnis einer Verschlüsselung des Originaltexts (aus Datenschutzgründen). Sie können eine Zeichenfolge mit dem folgenden Code kodieren:

string.split('').sort(() => Math.random() - 0.5).join('')

Dies ist das Ende dieses Artikels über die Implementierung der Single-Choice-Faltmenüfunktion mit CSS. Weitere relevante CSS-Single-Choice-Faltmenüinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!