Responsive Menu using Checkbox without JS | Loopstudios Landing Page

Community feedback

• 

  Emad Jaber•130

  @emad2411Posted almost 3 years ago

  Great solution

  as I can see you have two accessibility issues.

  • your footer should be contained in a <footer> tag
  • your main content should be contained in a <main> tag

  other than that I can see everything is perfect , great coding.

  1

  ---

  

  Nurcholis•420

  @cholis04Posted almost 3 years ago

  @emad2411 Thanks for your feedback,

  I'll try to make some changes based on the issues listed. 👍

  0
• 

  princekelvx•120

  @princekelvxPosted almost 3 years ago

  Very interesting to actually see it being done without JavaScript, I have seen it been done before and I was going to use the approach before I ultimately decided to use JavaScript and avoid tweaking the flow of my HTML document. Checkbox under the hamburger menu I suppose? Checking the state to determine what styles should be applied?

  0

  ---

  

  Nurcholis•420

  @cholis04Posted almost 3 years ago

  @princekelvx Creating responsive menus with only HTML and CSS is quite complicated.

  Moreover, by using the Checkbox to check the state of the menu is opened or closed. The placement of HTML structure is also influential so that it can be selected through CSS properly.

  input[type='checkbox'].toggle-check:checked ~ header > nav > .navbar > ul.menu {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  

  And yes, it is complicated. I'm sure there is a better approach than this. and Maybe optimally need JavaScript help to solve this.

  Happy Coding

  0

  

  princekelvx•120

  @princekelvxPosted almost 3 years ago

  @cholis04 ah indeed, it's similar to what I had envisioned.

  Well done, I hope to see more of your awesome work.

  Cheers!

  0