Burger Menu without Javascript

This is just a test how it could be work. Burger menu animation without Javascript.

HTML

<div id="burger-menu">
  <input type="checkbox" id="burger-menu-input">
  <label for="burger-menu-input">Burger</label>
  <div id="burger-menu-ul">
    <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
    </ul>
  </div>
</div>

SCSS

#burger-menu-ul,
#burger-menu-input {
  display: none;
}

#burger-menu input:checked ~ #burger-menu-ul {
  display: block;
}