I'm trying to overlay the page with a div (which be used for a menu), when the checkbox button is checked, but it doesn't seem to work. Is the event not firing?
Jsfiddle here.
HTML
<nav>
<div id="topBar"></div>
<div id="menuTab"><input type="checkbox" id="menuToggle">≡</div>
</nav>
<section>
<div id="slide1" class="slide">
</div>
</section>
CSS
#menuToggle {
height: 24px;
width: 24px;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
}
input#menuToggle:checked + #menuOverlay {
position:fixed;
top:0;
left:0;
width:100%;
opacity:0.95;
z-index: 3;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
input#menuToggle:checked + #menuOverlay {
background:#000;
height:100%;
}
}
@media only screen and (min-width: 769px) {
input#menuToggle:checked + #menuOverlay {
background:#1f1f1f;
height:2.4em;
}
}
You are not using correct +
selector.
B + E: Any E element that is the next sibling of a B element (that is: the next child of the same parent)
You don't have any element with id #menuOverlay
at all in DOM.
The only way this will work with your current css is the following:
#menuToggle {
height: 24px;
width: 24px;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0;
}
#menuToggle:checked + #menuOverlay {
position:fixed;
top:0;
left:0;
width:100%;
opacity:0.95;
z-index: 3;
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
input#menuToggle:checked + #menuOverlay {
background:#000;
height:100%;
}
}
@media only screen and (min-width: 769px) {
input#menuToggle:checked + #menuOverlay {
background:#1f1f1f;
width:100%;
height:100%;
}
}
<nav>
<div id="topBar"></div>
<div id="menuTab">
<input type="checkbox" id="menuToggle" />≡
<div id="menuOverlay"></div> <!-- add div element here with id menuOverlay -->
</div>
</nav>
<section>
<div id="slide1" class="slide"></div>
</section>
Whit the menuOverlay properly added :
http://jsfiddle.net/e230cpwz/1/
<div id="menuTab"><input type="checkbox" id="menuToggle" />≡
<div id="menuOverlay" >
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With