CSS 使用 :check 的汉堡包下拉菜单不起作用

Question

我正在尝试使用带有复选框 hack 的汉堡包图标来实现移动下拉菜单，我发现了几个这样的例子。这是一个使用带有制表符 jsfiddle. I know this is basically this same idea and I have seen other examples on this page css-tricks 的收音机。问题是我已经尝试了几乎所有的组合来让它工作，但它不会。有人可以看看我的代码中是否缺少某些东西吗？请注意，我使用 hamburger 一词代替字形字符，因为它不可用。

.nav .mobile-bar label:before {
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  position: relative;
  content: "Hamburger";
  left: 24px;
  color: #000;
}
input[type="checkbox"]:checked ~ label ~ ul {
  display: block;
}
.nav ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="col-xs-12 nav">
  <div class="mobile-bar">
    <label for="hamburger">
      <input type="checkbox" id="hamburger">
    </label>
  </div>
  <ul>
    <li><a href="#">HOME</a>
    </li>
    <li><a href="#">ABOUT US</a>
    </li>
    <li class="page_item_has_children"><a href="#">SERVICES</a>
      <ul>
        <li><a href="#">WEB SITES</a>
        </li>
        <li><a href="#">PRINT GRAPHICS</a>
        </li>
        <li><a href="#">VIDEO</a>
        </li>
      </ul>
      <li><a href="#">BLOG</a>
      </li>
      <li><a href="#">CONTACT US</a>
      </li>
  </ul>
</div>

Answer 1

纯css.

无法select父元素
解决方案：

改变html结构

Jsfiddle

.nav .mobile-bar label:before { font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; font-size: 36px; position: relative; content: "Hamburger"; left: 24px; color: #000; } input[type="checkbox"]:checked ~ ul { display: block; } .nav ul { display: none; list-style: none; padding: 0; margin: 0; }

<div class="col-xs-12 nav"> <input type="checkbox" id="hamburger" /> <div class="mobile-bar"> <label for="hamburger"> </label> </div> <ul> <li><a href="#">HOME</a> </li> <li><a href="#">ABOUT US</a> </li> <li class="page_item_has_children"><a href="#">SERVICES</a> <ul> <li><a href="#">WEB SITES</a> </li> <li><a href="#">PRINT GRAPHICS</a> </li> <li><a href="#">VIDEO</a> </li> </ul> <li><a href="#">BLOG</a> </li> <li><a href="#">CONTACT US</a> </li> </ul> </div>

Jquery

Jsfiddle

$(document).ready( function() { $('#hamburger').click(function() { $(this).closest('.mobile-bar').toggleClass('selected'); }); });

.nav .mobile-bar label:before { font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: normal; font-size: 36px; position: relative; content: "Hamburger"; left: 24px; color: #000; } .nav ul { display: none; list-style: none; padding: 0; margin: 0; } .nav .selected + ul { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="col-xs-12 nav"> <div class="mobile-bar"> <label for="hamburger"> <input type="checkbox" id="hamburger" /> </label> </div> <ul> <li><a href="#">HOME</a> </li> <li><a href="#">ABOUT US</a> </li> <li class="page_item_has_children"><a href="#">SERVICES</a> <ul> <li><a href="#">WEB SITES</a> </li> <li><a href="#">PRINT GRAPHICS</a> </li> <li><a href="#">VIDEO</a> </li> </ul> <li><a href="#">BLOG</a> </li> <li><a href="#">CONTACT US</a> </li> </ul> </div>

Answer 2

试试这个：

input{
  display:none;
}
input:checked + label + ul{
  display:none;
}
label{
  display:block;
  position:relative;
  width:64px;
  height:64px;
}
top,middle,bottom{
  position: absolute;
  background:black;
  width:64px;
  height:12px;
  transition: top 0.2s, transform 0.2s;
}
top{
  border-radius: 6px 6px 0px 0px;
  top:0px;
}
middle{
  top:24px;
}
bottom{
  top:48px;
  border-radius: 0px 0px 6px 6px;
}

input:not(:checked) + label top{
  transform:rotate(55deg);
  top:24px;
}
input:not(:checked) + label bottom{
  transform:rotate(-55deg);
  top:24px;
}

<input type="checkbox" id="ham" checked="checked" />
<label for="ham">
  <top></top>
  <middle></middle>
  <bottom></bottom>
</label>
<ul>
  <li><a href="www.google.com">Google.com</a></li>
  <li><a href="www.google.com">Google.com</a></li>
  <li><a href="www.google.com">Google.com</a></li>
</ul>

CSS 使用 :check 的汉堡包下拉菜单不起作用

CSS hamburger Dropdown using :check not working

css

menu

dropdown