戻す隠された部分

Question

デフォルト：非表示、セクションが表示され、セクションを閉じると、セクションは表示されます：noneに戻る必要があります。ここで奇妙な説明が来る（奇妙な部分は、「**」の間にある：？

は

label input:checked + .menu { 
    box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7; 
    border-radius: 0; 
    **display: .invis**; 
} 

私はこれをachive可能性がどのようにCSSがどのように動作するかではないのコード例

Answer 1

をお願い申し上げますが。私は、これはワットであり得ることを信じてい

document.querySelector("input[type=checkbox]").addEventListener("click", function(){ 
 
    document.querySelector(".menu").classList.toggle("invis"); 
 
});

.invis { 
 
    display:none; 
 
} 
 

 
label input:checked + .menu { 
 
    box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7; 
 
    border-radius: 0; 
 
}

<section class="intro"> 
 
<label> 
 
    <input type="checkbox"> 
 
    <span class="menu invis"> 
 
    <span class="hamburger">Hamburger Icon Here</span> 
 
    </span> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">About</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</label> 
 
</section>

Answer 2

：単にボタンのクリックを経由してオンとオフクラスをトグルすることによって、これを達成することができますあなたが必要とする帽子。次の2つのCSSセレクタを変更しました。必要に応じて

label input:checked + .menu { 
    /*box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;*/ 
    height: 100vh; 
    width: 100vw; 
    top:0; 
    right:0; 
    background-color: #fff; 
    border-radius: 0; 
} 

label input:checked + .menu .hamburger { 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    top: 35px; 
    right:25px 
} 

/* Section styling */ 
 
body, html { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
section { 
 
    width: 100%; 
 
    display: table; 
 
    margin: 0; 
 
    max-width: none; 
 
    height: 100vh; 
 
} 
 

 
.intro { 
 
    background-color:#291411; 
 
} 
 

 
.first { 
 
    background-color:#834940; 
 
} 
 

 
.second { 
 
    background-color:#291411; 
 
} 
 

 
.third { 
 
    background-color:#834940; 
 
} 
 
/* Hide scrollbars */ 
 
html { 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
} 
 
::-webkit-scrollbar { 
 
    width: 0px; 
 
    background: transparent; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    background: #FF0000; 
 
} 
 
/* Menu before */ 
 
label .hamburger { 
 
    position: absolute; 
 
    top: 135px; 
 
    right: 125px; 
 
    width: 30px; 
 
    height: 2px; 
 
    background: #000; 
 
    display: block; 
 
    -webkit-transform-origin: center; 
 
    transform-origin: center; 
 
    -webkit-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
} 
 

 
label .hamburger:after, label .hamburger:before { 
 
    -webkit-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #000; 
 
} 
 

 
label .hamburger:before { top: -10px; } 
 

 
label .hamburger:after { bottom: -10px; } 
 

 
label input { display: none; } 
 

 
label input:checked + .menu { 
 
    /*box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF;*/ 
 
    height: 100vh; 
 
    width: 100vw; 
 
    top:0; 
 
    right:0; 
 
    background-color: #fff; 
 
    border-radius: 0; 
 
} 
 

 
label input:checked + .menu .hamburger { 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
    top: 35px; 
 
    right:25px 
 
} 
 

 
label input:checked + .menu .hamburger:after { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    bottom: 0; 
 
} 
 

 
label input:checked + .menu .hamburger:before { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    top: 0; 
 
} 
 

 
label input:checked + .menu + ul { opacity: 1; } 
 
/* Menu after */ 
 
label .menu { 
 
    position: absolute; 
 
    right: -100px; 
 
    top: -100px; 
 
    z-index: 100; 
 
    width: 200px; 
 
    height: 200px; 
 
    background: #FFF; 
 
    border-radius: 50% 50% 50% 50%; 
 
    -webkit-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF; 
 
    cursor: pointer; 
 
} 
 

 
label ul { 
 
    z-index: 200; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    opacity: 0; 
 
    -webkit-transition: .25s 0s ease-in-out; 
 
    transition: .25s 0s ease-in-out; 
 
} 
 

 
label a { 
 
    margin-bottom: 1em; 
 
    display: block; 
 
    color: #000; 
 
    text-decoration: none; 
 
} 
 
/* Footer styling */ 
 
footer { 
 
    padding: 1% 5%; 
 
    text-align:center; 
 
    background-color: #291411; 
 
    color: #E0C9B7; 
 
}

<section class="intro"> 
 
<label> 
 
    <input type="checkbox"> 
 
    <span class="menu"> 
 
    <span class="hamburger"></span> 
 
    </span> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">About</a> 
 
    </li> 
 
    <li> 
 
     <a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</label> 
 
</section> 
 

 
<section class="first"> 
 
first 
 
</section> 
 

 
<section class="second"> 
 
second 
 
</section> 
 

 

 
<section class="third"> 
 
third 
 
</section>

修正しフィドル： https://jsfiddle.net/4h86b8ep/2/