CSS 下拉导航不显示 - 切换 :checked

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。

~ 选择器告诉该类寻找后续的 sibling - 并且看到您的 #toggle 元素位于您的代码末尾，它没有找到。此外，* 选择器告诉您的代码查找输入后的任何元素，并在该元素内，查找 .menu 类，这就是它应该被删除的原因。

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