Question

我的复选框有转换问题。我想做的就是在低宽度分辨率上下拉菜单慢慢。

这是我的代码：

HTML：

<nav class="header-nav">
                <input type="checkbox" id="header-nav-button">
                    <label for="header-nav-button">☰</label>
                </input>
                <ul>
                    <li><a class="header-nav-links" id="active">Home</a></li>
                    <li><a class="header-nav-links about-us">About Us</a></li>
                    <li><a class="header-nav-links">Our Services</a></li>
                    <li><a class="header-nav-links">Prices</a></li>
                    <li><a class="header-nav-links">Contact</a></li>
                </ul>
            </nav>

输入CSS：

input[type="checkbox"] + label{
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;}

input, label{
display: none;}

我的CSS代码放在@media（max-width：600px）：

label{
    display: inline-block;  
}

#header-nav-button{

}
#header-nav-button:not(:checked) ~ul{
    display:none;
    height: 0;
    -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -o-transition: all .5s ease;
     -ms-transition: all .5s ease;
     transition: all 5s ease;
}

}
#header-nav-button:checked ~ ul{
    display: block;
    height: 200px;
}

#header-nav-button:checked ~ ul li{
    display: block;
    padding: 0 20px;
}

我尝试了高度，能见度和不透明度的技巧 - 不幸的是，对我来说没什么用。似乎转换工作不正常。

Answer 1

您无法为height制作动画。
但是你可以动画max-height。

<nav class="header-nav">
  <label for="header-nav-button">☰</label>
  <input type="checkbox" id="header-nav-button">
  <ul>
    <li><a class="header-nav-links" id="active">Home</a></li>
    <li><a class="header-nav-links about-us">About Us</a></li>
    <li><a class="header-nav-links">Our Services</a></li>
    <li><a class="header-nav-links">Prices</a></li>
    <li><a class="header-nav-links">Contact</a></li>
  </ul>
</nav>

我将标签放在输入上方，这样我就可以在CSS中使用更精确的+选择器（#header-nav-button + ul）

label {
  font-size: 40px;
  cursor: pointer;
  color: #ed145b;
  font-family: Lato;
  font-weight: 700;
  line-height: 38px;
  padding: 0 20px;
}

input,
label {
  display: none;
}

@media ( max-width: 600px) {
  label {
    display: inline-block;
  }
  ul {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
  }
  ul li {
    padding: 0 20px;
  }
  #header-nav-button:checked+ul {
    max-height: 999px;
  }
}

我删除了display属性，因为您无法为显示设置动画。相反，我使用overflow: hidden来隐藏菜单我将height更改为max-height。关于这一点的好处是，您不需要知道菜单的确切高度，您可以将其设置为您知道它永远不会达到的数量。通过这种方式，您可以“增长”菜单，而无需每次都计算出它的高度。

https://jsfiddle.net/w4fwbw3s/8/

复选框转换无法正常工作

1 个答案: