Toggle Sidebar - Hide before pressed hamburger

HTML-CSS
1

I’m hoping I don’t need JS for this. The following code took me 4 hours to get the way it is… However, I’m stuck with how to hide the navigation before the hamburger has been pressed. The navigation needs to come out from the black div (class header) in the beginning, and preferably push it out (not display on top of content)

Please help

2

.sidebarMenuInner is not a sibling of the checkbox.

.sidebarMenuInner {
  background-color: #424242;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  position: absolute;
  left: 60px;
  /* move it to the left */
  transform: translateX(-160px);
  /* put it below the parent */
  z-index: -1;
  /* give it a transition */
  transition: transform .3s ease-out;
}
/* #sidebarMenu is the sibling, .sidebarMenuInner is a child of #sidebarMenu */
input[type="checkbox"]:checked ~ #sidebarMenu .sidebarMenuInner {
  transform: translateX(0);
}
1 Like
3

I know you don’t want JS, but is not that bad!! :slight_smile: I hope the snippet below helps you to accomplish this task.

JS

let menuContent = document.querySelector('.sidebarMenuInner'); // Selects the element with the class sidebarMenuInner and save into the class menuContent
content.classList.add("display-none") // add the class display-none to the content so it will not be displayed before clicking in the menu
let menuClick = document.querySelector('.sidebarIconToggle') // select the sidebarIconToggle and save into menuClick
menuClick.addEventListener('click', () => { // start an event listener to the menuClick button to wait for a click
  content.classList.toggle("display-none") // toggle the class display-none according to the user click
})

CSS

.display-none {
  display: none;
}
1 Like
4

@lasjorg That works perfectly, WOW! Thank you for taking the time!
@michelmarechal I know, trying to get used to CSS better first, lol. I tested your sample and it works great. Big thanks to you as well!