Rychlý tip:Rozevírací seznamy pouze CSS se zaškrtávacím políčkem Hack

V tomto rychlém tipu se podíváme na techniku ​​pouze CSS pro vytváření rozevíracích seznamů. To se točí kolem prvku HTML zaškrtávacího políčka a chytrého použití selektorů CSS bez jediného řádku JavaScriptu.

Příklad v akci můžete vidět v našem editoru. Kliknutím na tlačítko "Upravit" zobrazíte kód. Úplný zdrojový kód si můžete stáhnout z tlačítka výše.

<div class="dropdown">
    <input type="checkbox" id="checkbox-toggle">
    <label for="checkbox-toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>

body{
    text-align: center;
    font: 16px/1.5 sans-serif;
    padding-top: 40px;
    background-color: #ECEFF1;
}

.dropdown{
    position: relative;
    display: inline-block;
    font-size: 16px;
    color: #FFF;
}

/**
    Hide the checkbox itself. Checking and unchecking 
    it we will be done via the label element.
*/

input[type=checkbox]{
    display: none;
}

/* Click to expand button */

label{
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
    background-color: #57A0D4;
    padding: 15px 20px;

    cursor: pointer;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*  The ul will have display:none by default */

ul{
    position: absolute;
    list-style: none;
    text-align: left;
    width: 100%;
    z-index: 1;
    margin:0;
    padding:0;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

    display: none;
}

ul li{
    padding: 15px;
    background-color: #fff;
    color: #4FB9A7;
    margin-bottom: 1px;
    cursor: pointer;
}

ul li:hover{
    background-color: #4FB9A7;
    color: #FFF;
}

ul li a{
    color: inherit;
    text-decoration: none;
}

/**

    By using the Following-sibling selector (~),
    we can target elements positioned after our checkbox in the DOM tree.

    With the state pseudo selector (:checked),
    we can make changes depending on the state of the checkbox.

    Using this combination of selectors
    allows to change the color of the label
    and show the list of items
    only when the checkbox is checked.

*/

input[type=checkbox]:checked ~ label {
    background-color: #3D88BD;
}

input[type=checkbox]:checked ~ ul {
    display: block;
}

Značky

Takto vypadá naše HTML struktura. Zde je důležité poznamenat, že vstup prvek musí být na prvním místě, před štítkem a před ul . Proč je to potřeba, pochopíte později, až se podíváme na CSS.

<div class="dropdown">
    <input type="checkbox" id="checkbox_toggle">
    <label for="checkbox_toggle">Click to Expand</label>
    <ul>
        <li><a href="#">Link One</a></li>
        <li><a href="#">Link Two</a></li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</div>

Jak vidíte, není zde nic neobvyklého, všechny prvky jsou ve standardním, často používaném HTML:

• Položka div poslouží jako kontejner pro celou věc.
• Zaškrtávací políčko input type= je potřeba kvůli jeho zaškrtnuté/nezaškrtnuté vlastnosti. Po celou dobu bude skryt
• štítek se použije k přepínání vstupu a bude také sloužit jako spouštěč pro vaši rozevírací nabídku.
• ul je jednoduše seznam, který chceme, aby byl viditelný, když se rozbalovací nabídka rozšíří. Může to být jakýkoli jiný prvek.

Hack zaškrtávacího políčka

Potřebujeme pouze zaškrtávací políčko prvek pro jeho checked stavu, který můžeme stylizovat pomocí :checked Pseudoselektor CSS. Zaškrtnutí a zrušení zaškrtnutí se provádí kliknutím na štítek, což je základní funkce prohlížeče. Nejprve skryjeme zaškrtávací políčko:

input[type=checkbox]{
    display: none;
}

Ve výchozím nastavení také skrýváme UL – je to rozbalovací nabídka, která by měla být viditelná pouze tehdy, když je rozbalovací nabídka rozšířena.

ul{
    display: none;
}

A tady je hack. Pokud zkombinujeme :checked selektor pomocí obecného selektoru sourozenců (~ ) můžeme změnit vlastnosti CSS prvků, které následují za zaškrtávacím políčkem. To je důvod, proč jsme potřebovali, aby bylo zaškrtávací políčko uvedeno jako první, před ul ve stromu DOM.

input[type=checkbox]:checked ~ ul {
    display: block
}

Fragment CSS výše zobrazí neuspořádaný seznam, pouze pokud je zaškrtnuto políčko. Vzhledem k tomu, že možný stav zaškrtávacího políčka vstupu typu je binární, je ideální pro přepínání položek mezi rozbaleným a skrytým stavem.

Doufám, že se vám náš rychlý tip líbil!