css3转换不触发切换按钮

这是我第二个问题！我也在问题中搜索，但没有任何帮助。我有一个转换问题。我试图在移动视图上选中切换按钮时将300ms转换应用到菜单;我在班级菜单中徒然尝试了负面的价值观。现在，这样做菜单向上滑动，但我希望它滑下来，似乎没有任何帮助。我也尝试过使用z-index，但似乎没有任何工作。我真的不知道该怎么做。任何帮助，可以送我正确的方向将不胜感激！css3转换不触发切换按钮

<!-- === MENUTOGGLE === --> 
<input type="checkbox" name="checkbox" id="menuToggle" value="value"> 
<label for="menuToggle" class="menu-icon">&#9776;</label> 
<!-- ==== HEADER ==== -->  
<header> 
<div id="logo" class="brand"> 
    <h1><img src="images/logo.png" alt="Hello"></h1> 
</div>`enter code here` 
    <nav class="menu"> 
     <ul> 
      <li><a href="#">Work</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Blog </a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</header>

* { 
    margin: 0; 
    padding: 0; 
    outline: none; 
    box-sizing: border-box; 
} 
body { 
    background: #eee; 
    color: #444; 
    -webkit-font-smoothing: antialiased; 
    font-family: Arial, sans-serif; 
    font-weight: 400; 
    height: auto !important; 
    height: 100%; 
    min-height: 100%; 
    text-rendering: optimizeLegibility; 
} 
header { 
    display: block; 
    background-color: #FFF; 
    height: inherit; 
} 
nav { 
    text-align: center; 
    line-height: 3.5em; 
} 
nav ul { 
    background-color: rgba(255, 255, 255, 0.15); 
    float: none; 
    line-height: inherit; 
    margin: 0; 
} 
nav ul li { 
    display: block; 
    list-style-type: none; 
} 
nav ul li:hover { 
    background-color: #ededed; 
} 
nav ul li a { 
    text-decoration: none; 
    color: #313131; 
} 
nav ul li a:hover { 
    color: #b9b5b5; 
} 
#menuToggle { 
    display: none; 
} 
.menu { 
    width: 100%; 
    position: absolute; 
    top: 66px; 
    transition: all 300ms ease-in-out; 
} 
.menu-icon { 
    float: right; 
    color: #2f2f2f; 
    cursor: pointer; 
    padding-top: 0.46em; 
    padding-right: 1em; 
    padding-left: 1em; 
    padding-bottom: 0.46em; 
    text-decoration: none; 
    font-size: 30px; 
} 
.menu { 
    display: none; 
} 
#menuToggle:checked ~ header .menu { 
    display: block; 
    top; 
    66px; 
} 
#logo { 
    float: none; 
    text-align: left; 
    padding-top: 7px; 
    padding-left: 2em; 
    height: inherit; 
}

来源

2016-07-06 Ryan Ragnini

因为你不能动画'display'属性，你可以用'MAX-height'，作为显示在dupe链接。 – LGSon

#menuToggle:checked ~ header .menu { 
    display: block; 
    top; 
    66px; 
}

应该

#menuToggle:checked ~ header .menu { 
    display: block; 
    top: 66px; 
}

来源

2016-07-06 17:41:52

你好，谢谢你的答案。其实我不认为它的效果很好，因为这样我的菜单使用媒体querries简单地消失和崩溃。 –


             
   
    
    @media screen and (min-width:600px) { 
 
#logo { 
 
float: left; 
 
} 
 
.menu { 
 
width: 100%; 
 
height: 70px; 
 
position: absolute; 
 
display: block; 
 
} 
 
.menu-icon { 
 
display: none; 
 
} 
 
header { 
 
height: 70px; 
 
background-color: #FFF; 
 
margin: auto; 
 
width: 100%; 
 
} 
 
nav { 
 
height: -66px; 
 
width: 100%; 
 
} 
 
nav ul { 
 
background-color: #FFF; 
 
display: inline; 
 
float: right; 
 
padding: 0.55em 2em 0 0; 
 
height: inherit; 
 
} 
 
nav ul li { 
 
display: inline; 
 
margin: 0.2em auto; 
 
} 
 
nav ul li:hover { 
 
background-color: #FFF; 
 
} 
 
nav ul li a { 
 
padding: 0 2em; 
 
} 
 

 
 
    <!-- === MENUTOGGLE === --> 
 
<input type="checkbox" name="checkbox" id="menuToggle" value="value"> 
 
<label for="menuToggle" class="menu-icon">&#9776;</label> 
 
<!-- ==== HEADER ==== -->  
 
<header> 
 
<div id="logo" class="brand"> 
 
    <h1><img src="images/logo.png" alt="Hello"></h1> 
 
</div>`enter code here` 
 
    <nav class="menu"> 
 
     <ul> 
 
      <li><a href="#">Work</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Blog </a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
</header>

来源

2016-07-06 19:15:26

使用第二部分代码我的菜单不再工作。 –

css3转换不触发切换按钮

回答

相关问题