CSS hamburger下拉使用：检查无法正常工作

Question

我正在尝试使用带有复选框黑客的汉堡包图标来实现移动下拉菜单我已经找到了几个这样的示例。这是一个使用带标签jsfiddle的广播的广告。我知道这基本上是同一个想法，我在这个页面上看到了其他例子css-tricks。问题是我已经尝试了几乎所有的组合，以使其工作，它不会。有人可以看看我的代码中是否缺少某些内容？注意我使用单词hamburger而不是字形的字符，因为它不可用。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

无法通过纯css选择父元素 。

解决方案：

更改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

试试这个：

＆＃13;

＆＃13;

mDrawerToggle.setDrawerIndicatorEnabled(false);

// mDrawerToggle.setHomeAsUpIndicator(R.drawable.menu_icon);
mToolbar.setNavigationIcon(R.drawable.menu_icon);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            mDrawerLayout.openDrawer(Gravity.LEFT);
        }
});

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;