0

Ladies and gentlemen. I am paying around with this lovely css only slide down full screen navigation menu. Everything is peaches, that is until I try to move the checkbox that triggers the menu.

You see the checkbox works when it is dumped straight in the body of the page. But as soon as I put it inside a div, it does not.

Fiddle with my fiddle. See how it's not working, but if you move the checkbox out of "im-my-own-div" it works!

I believe this is the code responsible for hiding and showing the nav tag.

<input type="checkbox" id="nav">
<label for="nav" class="entypo-menu"></label>

and

input[id*="nav"]:checked ~ nav {
  transform: translate3d(0,0,0);
}

Upon further inspection it only seems to work when placed directly above the nav class. Is there a way for it to reach the nav div even if the checkbox is located inside another div elsewhere on the page.

Inch High Private Eye
  • 43
  • 2
  • 7
  • via css only, nop but you can set your input as first child of body & away from label : http://jsfiddle.net/couzvbw5/2/ – G-Cyrillus Nov 06 '15 at 00:09

1 Answers1

0

You can't because the type of selector used.

Tilde selects generic sibilings. ("nav" in your case)

You can only work with child or sibilings, in CSS you can't climb back to :parent s

You can do it in JS.

What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

As suggested (@GCyrillus ) you can move the input outside:

<input type="checkbox" id="nav">
<div id="im-my-own-div">
<label for="nav" class="entypo-menu"></label>
</div>
Community
  • 1
  • 1
Gromish
  • 189
  • 2
  • 9
  • Hmm good call. is there another way that we can toggle the menu in this fashion without using js? I'm on a strict diet – Inch High Private Eye Nov 06 '15 at 00:15
  • @InchHighPrivateEye did you follow & tried my fiddle in comments and understood why inputs needs to be on top? so you can select any following tags and any of their childs ? (with the selector ~) – G-Cyrillus Nov 06 '15 at 00:44