0

I am trying to have hamburger menu in header and menu to toggle from side inside content, under header, but I have problem with it. I think that for some reason selector input[type="checkbox"]:checked ~ #sidebarMenu does not want to work if checkboox is in different div than #sidebarMenu itself.

#sidebarMenu, .sidebarMenu {
    height: 100%;
    width: 250px;
    transform: translateX(-270px);
    transition: transform 250ms ease-in-out;
    background: #fff;
    z-index: 1;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    vertical-align: middle;
    margin-top: 0px;
    box-shadow: 0px 2px 5px 5px rgb(0 0 0 / 16%), 0 0px 10px 1px rgb(0 0 0 / 12%);
}

input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0) !important;
}

This does not work:

<div class="container">     
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
</div>

<div id="content" class="site-content container clear">   
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
</ul>
</div>
</div>

This works:

<div class="container">     
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
</ul>
</div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Zam
  • 1
  • 1

1 Answers1

0

In CSS, the ~ selects a #sidebarMenu that is a sibling of input[type="checkbox"]:checked

It doesn't work when you put the wrapper around it because the input will cease to be a sibling of #sidebarMenu.

EDIT: It looks like you'll need a JS solution if you really want to use the markup from the first code snippet.

You'll want to set an Event listener for the checkbox and toggle the class for the sidebar menu. Technically, you don't need an input either but it may look something like this:

document.querySelector('input[type="checkbox"]').addEventListener('click', function() {
    document.getElementById('sidebarMenu').classList.toggle('menu-open')
})
Chris Rock
  • 133
  • 7