Menü mit Kacheln und SubTiles mit reinem CSS

Question

Ich versuche ein Menü mit Kacheln und Sub-Tiles mit reinem CSS zu erstellen. Wenn Sie auf eine der Kacheln einer Farbe klicken, werden alle anderen Kacheln ausgeblendet und nur die Teilkacheln dieser Farbe werden angezeigt. Ich habe das Problem, dass nur die Kacheln in div nach dieser Kachel verschwinden. die Fliesen in Div vor dieser Fliese nicht sein. Bild beschreiben das Experiment. Überprüfen Sie das Code-Snippet. Dank im Voraus Prost Chris

#reset + label { display: block; } 
 

 
label { display: none } 
 
input[type="radio"] { display: none; } 
 
div { display: none; } 
 

 
input[type="radio"]:checked + label ~ label, 
 
input[type="radio"]:checked + label ~ label ~ div { display: none; } 
 

 
input[type="radio"]:checked + label ~ div { display: block; } 
 

 
input[type="radio"][id="reset"]:checked ~ label { display: block; } 
 

 
div { 
 
    transition:all 1s; 
 
} 
 
label { 
 
    width:23%; 
 
    float:left; 
 
    text-align:center; 
 
    background:#ffffff; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    color:#222222; 
 
    padding:0.5%; 
 
    margin:0.5%; 
 
    margin-bottom:30px; 
 
    cursor:pointer; 
 
    opacity: 1; 
 
    transition:all 1s; 
 
} 
 
.tile, .sub-tile { 
 
    width:23%; 
 
    height:100px; 
 
    float:left; 
 
    transition:all 1s; 
 
    margin:0.5%; 
 
    padding:0.5%; 
 
} 
 

 
.green, .top-green{ 
 
    background:#66dd99; 
 
} 
 
.blue, .top-blue { 
 
    background:#6666ff; 
 
} 
 
.red, .top-red { 
 
    background:#ff4466; 
 
} 
 
.purple, .top-purple { 
 
    background:purple; 
 
}

<input type="radio" name="color" class="reset" checked id="reset" /> 
 
    <label for="reset">Reset</label> 
 

 
    <input type="radio" id="blue" class="blue" name="color" /> 
 
     <label for="blue" class="tile top-blue">BLUE</label> 
 
     <div class="sub-tile blue">1</div> 
 
     <div class="sub-tile blue">2</div> 
 
     <div class="sub-tile blue">3</div> 
 
     <div class="sub-tile blue">4</div> 
 
     <div class="sub-tile blue">5</div> 
 
     <div class="sub-tile blue">6</div> 
 

 

 
     <input type="radio" id="red" class="red" name="color"/> 
 
     <label for="red" class="tile top-red">RED</label> 
 

 
     <div class="sub-tile red">7</div> 
 
     <div class="sub-tile red">8</div> 
 
     <div class="sub-tile red">9</div> 
 
     <div class="sub-tile red">10</div> 
 

 
     <input type="radio" id="purple" class="purple" name="color"/> 
 
     <label for="purple" class="tile top-purple">PURPLE</label> 
 

 
     <div class="sub-tile purple">16</div> 
 
     <div class="sub-tile purple">17</div> 
 
     <div class="sub-tile purple">18</div> 
 
     <div class="sub-tile purple">19</div> 
 
     <div class="sub-tile purple">20</div> 
 
     <div class="sub-tile purple">21</div> 
 

 
     <input type="radio" id="green" class="green" name="color"/> 
 
     <label for="green" class="tile top-green">GREEN</label> 
 
     <div class="sub-tile green">12</div> 
 
     <div class="sub-tile green">13</div> 
 
     <div class="sub-tile green">14</div> 
 
     <div class="sub-tile green">15</div>

Answer 1

Ja, Sie könnten versuchen, das zu erreichen mit folgenden nackten Knochen Schnipsel. nur

EDIT beachten Sie, dass Sie den #Rueck Anfangswert festlegen müssen, wie geprüft

#reset + label { display: block; } 
 

 
label { display: none } 
 
input[type="radio"] { display: none } 
 
div { display: none } 
 

 
input[type="radio"]:checked + label ~ label, 
 
input[type="radio"]:checked + label ~ label ~ div { display: none } 
 

 
input[type="radio"]:checked + label ~ div { 
 
    display: block; 
 
    animation: fade-in 1s; 
 
} 
 

 
input[type="radio"][id="reset"]:checked ~ label { display: block } 
 

 
.red { color: red } 
 
.blue { color: blue } 
 
.orange { color: orange } 
 

 
@keyframes fade-in { 
 
    from { opacity: 0; } 
 
    to { opacity: 1 } 
 
}

<input type="radio" name="color" class="reset" checked id="reset" /> 
 
<label for="reset">Reset</label> 
 

 
<input type="radio" name="color" class="blue" id="blue" /> 
 
<label for="blue">Blue</label> 
 

 
<div class="sub-tile blue">1</div> 
 
<div class="sub-tile blue">2</div> 
 
<div class="sub-tile blue">3</div> 
 

 
<input type="radio" name="color" class="red" id="red" /> 
 
<label for="red">Red</label> 
 

 
<div class="sub-tile red">1</div> 
 
<div class="sub-tile red">2</div> 
 
<div class="sub-tile red">3</div> 
 

 
<input type="radio" name="color" class="orange" id="orange" /> 
 
<label for="orange">orange</label> 
 

 
<div class="sub-tile orange">1</div> 
 
<div class="sub-tile orange">2</div> 
 
<div class="sub-tile orange">3</div>