CSS 使用 :check 的汉堡包下拉菜单不起作用
CSS hamburger Dropdown using :check not working
我正在尝试使用带有复选框 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>
纯css.
无法select父元素
解决方案:
改变html结构
.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
$(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>
试试这个:
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>
我正在尝试使用带有复选框 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>
纯css.
无法select父元素解决方案:
改变html结构
.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
$(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>
试试这个:
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>