CSS раскрывающаяся навигация не отображается - переключатель: проверено

Question

Этот вопрос задавался ранее, но я искал и искал, но из-за того, что я не очень знаком с какой-то терминологией, я изо всех сил пытаюсь найти ответ (надеюсь, это не так уж сложно).

Я пытаюсь создать выпадающее меню, реагирующее на навигационную панель / переключатель / гамбургер, используя исключительно CSS. Однако, когда я нажимаю на гамбургер, чтобы раскрыть раскрывающийся список, ничего не происходит.

Вот мой CSS

   $navigation-height: 72px;

    section.navigation {
      width: 100%;
      margin-top: 0px;
      border-bottom: $base-border;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: flex-start;
      height: $navigation-height;

     figure {
      max-width: 25%;
      margin-left: $base-spacing;

      img#logo {
       max-height: 42px;
       display: block;
      }

      @media screen and (max-width: 700px) {
       max-width: 50%;
      }
     }

    nav {
     margin-left: auto;
     margin-right: $small-spacing;

    a {
      margin: 0 $small-spacing;
      text-decoration: none;
       }
      }
     }

    label {
    font-size: 30px;
    display: none;
    float: right;
    margin-right: 2%;
    color: $blue;
    }

    #toggle {
     display: none;
    }

    @media screen and (max-width: 500px) {
      label {
          display: block;
          cursor: pointer;
      }
      .menu {
          text-align: center;
          width: 100%;
         visibility: collapse;
      }
    .menu a {
      display: block;
      border-bottom: 1px solid black;
      line-height: 30px;

    }
    #toggle:checked ~ * .menu {
        display: block;
     }
    }

И мой html.erb:

    <section class="navigation">
  <figure>
    <%= link_to root_path do %>
      <%= image_tag 'logo.png', id: 'logo' %>
    <% end %>
  </figure>

  <nav class="menu">
    <%= link_to 'FAQs', faqs_path %>
    <%= link_to 'Home', root_path %>

    <% if user_signed_in? %>
      <%= link_to 'Logout', destroy_user_session_path, method: :delete %>
    <% else %>
      <%= link_to 'Login', new_user_session_path %>
    <% end %>

    <% if current_admin %>
      <%= link_to 'Logout Admin', destroy_admin_session_path, method: :delete %>
    <% end %>
  </nav>

  <label for="toggle">HAMBURGER ICON</label>
  <input type="checkbox" id="toggle"></input>

</section>

Я на 99% уверен, что проблема заключается в:

#toggle:checked ~ * .menu {
        display: block;
     }

Но я не уверен, как / почему идея!

Заранее спасибо.

Answer 1

вам нужно переместить поле ввода на одноуровневое перед меню и обновить селектор css на #toggle:checked ~ .menu.

Селектор ~ говорит классу искать последующих братьев и сестер - и, увидев, что ваш элемент #toggle находится в конце вашего кода, он не находит ни одного. Кроме того, селектор * указывает вашему коду искать любой элемент после ввода, а в пределах этого элемента ищет класс .menu, поэтому его следует удалить.

https://codepen.io/anon/pen/QxRvGv