CODEWITHSUNDEEP
htmlcsscheckbox
methuselah
methuselah

Reputation: 13216

CSS checkbox event not working

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">&equiv;</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;
    }
}

Upvotes: 7

Views: 1314

Answers (2)

Alex Char
Alex Char

Reputation: 33238

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" />&equiv;
        <div id="menuOverlay"></div> <!-- add div element here with id menuOverlay -->
    </div>
</nav>
<section>
    <div id="slide1" class="slide"></div>
</section>

Upvotes: 16

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2606

Whit the menuOverlay properly added :

http://jsfiddle.net/e230cpwz/1/

<div id="menuTab"><input type="checkbox" id="menuToggle" />&equiv;
    <div id="menuOverlay" >
    </div>
</div>

Upvotes: 2

Related Questions