2016-09-29 171 views
0

我有一个问题,一切工作正常,但显示:没有复选框不是,复选框仍然存在我试图通过html atribute来设计它(我知道这是不是一件好事,但我已经准备好了任何解决方案),它的工作,但滑入/退出停止工作....我该怎么办?display:none does not work with css

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    \t <meta charset="UTF-8"> 
 
    \t <title>Document</title> 
 
    </head> 
 
    
 
    <style type="text/css"> 
 
    \t 
 
    \t 
 
    \t * {padding:0; margin:0;} 
 
     body { font-family:sans-serif; } 
 
    
 
     a { text-decoration: none; 
 
     \t color:#00a5cc; } 
 
    
 
     li { list-style-type:none; } 
 
    header { height : 50px; 
 
     \t margin:auto; 
 
     \t width : 100%; 
 
     \t border-bottom:1px solid #EEE; } 
 
    
 
     \t #brand { float:left; 
 
     \t \t line-height:50px; 
 
     \t \t color:#E5DAC0; 
 
     \t \t font-size:25px; 
 
     \t \t font-weight:bolder; } 
 
    
 
     \t nav { width:100%; text-align:center; } 
 
     \t nav a { display:block; padding: 15px 0; 
 
     \t border-bottom: 1px solid #C3AA6E; color:#F0EADC; } 
 
    
 
    
 
     \t nav a:hover { background:#E5DAC0; 
 
     \t \t color :#FFF; } 
 
    
 
     \t nav li:last-child a { border-bottom:none; } 
 
    
 
    
 
    \t /************************************************************** 
 
    \t **************************************************************/ 
 
    
 
    \t .menu{ 
 
    \t \t width: 240px; 
 
    \t \t height: 100%; 
 
    \t \t position: absolute; 
 
    \t \t background: #a9a1f3; 
 
    \t \t left: -240px; 
 
    \t \t trensition: all .3s ease-in-out; 
 
    \t \t -webkit-transition: all .3s ease-in-out; 
 
     \t \t -moz-transition: all .3s ease-in-out; 
 
     \t \t -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; 
 
    
 
    \t } 
 
    
 
    .menu-icon{ 
 
    \t padding: 10px 20px; 
 
    \t background: #000000; 
 
    \t color: #aa25e9; 
 
    \t cursor:pointer; 
 
     \t float:right; 
 
     \t margin-top:4px; 
 
     \t border-radius:5px; } 
 
    } 
 
    #menuToggle{ 
 
    \t display: none; 
 
    } 
 
    #menuToggle:checked ~ .menu { position:absolute; left:0px; } 
 
    </style> 
 
    <body> 
 
    <input type="checkbox" id="menuToggle"> 
 
    <label for="menuToggle" class="menu-icon">&#9776</label> 
 
    \t <header> 
 
    \t \t <div id="brand"> slide in out nav</div> 
 
    \t </header> 
 
    
 
    \t <nav class="menu"> 
 
    \t \t <ul> 
 
    \t \t \t <li><a href="#">HOME</a></li> 
 
     \t \t  <li><a href="#">ABOUT</a></li> 
 
     \t \t  <li><a href="#">WORK</a></li> 
 
     \t \t  <li><a href="#">INSPIRATION</a></li> 
 
     \t \t  <li><a href="#">BLOG</a></li> 
 
     \t \t  <li><a href="#">CONTACT</a></li> 
 
    \t \t </ul> 
 
    
 
    \t </nav> 
 
    </body> 
 
    </html>

+0

我试过不透明度:0和visibility:hidden的,只能通过属性附加伤害,并滑动输入/输出停止工作 –

+0

你要隐藏的只是复选框,这就是它或还有其他一些条件? –

回答

2

你必须在你的CSS错误在.menu-icon它有一个额外},这就是为什么它不工作。

只要删除额外的}将按预期工作。

活生生的例子在这里:https://jsfiddle.net/ay84zjjw/

希望这有助于。

0

只是一个小错误,只是更多}在您的代码。

.menu-icon{ 
    padding: 10px 20px; 
    background: #000000; 
    color: #aa25e9; 
    cursor:pointer; 
    float:right; 
    margin-top:4px; 
    border-radius:5px; **}** 
} 

<!DOCTYPE html> 
 
    <html lang="en"> 
 
    <head> 
 
    \t <meta charset="UTF-8"> 
 
    \t <title>Document</title> 
 
    </head> 
 
    
 
    <style type="text/css"> 
 
    \t 
 
    \t 
 
    \t * {padding:0; margin:0;} 
 
     body { font-family:sans-serif; } 
 
    
 
     a { text-decoration: none; 
 
     \t color:#00a5cc; } 
 
    
 
     li { list-style-type:none; } 
 
    header { height : 50px; 
 
     \t margin:auto; 
 
     \t width : 100%; 
 
     \t border-bottom:1px solid #EEE; } 
 
    
 
     \t #brand { float:left; 
 
     \t \t line-height:50px; 
 
     \t \t color:#E5DAC0; 
 
     \t \t font-size:25px; 
 
     \t \t font-weight:bolder; } 
 
    
 
     \t nav { width:100%; text-align:center; } 
 
     \t nav a { display:block; padding: 15px 0; 
 
     \t border-bottom: 1px solid #C3AA6E; color:#F0EADC; } 
 
    
 
    
 
     \t nav a:hover { background:#E5DAC0; 
 
     \t \t color :#FFF; } 
 
    
 
     \t nav li:last-child a { border-bottom:none; } 
 
    
 
    
 
    \t /************************************************************** 
 
    \t **************************************************************/ 
 
    
 
    \t .menu{ 
 
    \t \t width: 240px; 
 
    \t \t height: 100%; 
 
    \t \t position: absolute; 
 
    \t \t background: #a9a1f3; 
 
    \t \t left: -240px; 
 
    \t \t trensition: all .3s ease-in-out; 
 
    \t \t -webkit-transition: all .3s ease-in-out; 
 
     \t \t -moz-transition: all .3s ease-in-out; 
 
     \t \t -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; 
 
    
 
    \t } 
 
    
 
    .menu-icon{ 
 
    \t padding: 10px 20px; 
 
    \t background: #000000; 
 
    \t color: #aa25e9; 
 
    \t cursor:pointer; 
 
     \t float:right; 
 
     \t margin-top:4px; 
 
     \t border-radius:5px; 
 
    } 
 
    #menuToggle{ 
 
    \t display: none; 
 
    } 
 
    #menuToggle:checked ~ .menu { position:absolute; left:0px; } 
 
    </style> 
 
    <body> 
 
    <input type="checkbox" id="menuToggle"> 
 
    <label for="menuToggle" class="menu-icon">&#9776</label> 
 
    \t <header> 
 
    \t \t <div id="brand"> slide in out nav</div> 
 
    \t </header> 
 
    
 
    \t <nav class="menu"> 
 
    \t \t <ul> 
 
    \t \t \t <li><a href="#">HOME</a></li> 
 
     \t \t  <li><a href="#">ABOUT</a></li> 
 
     \t \t  <li><a href="#">WORK</a></li> 
 
     \t \t  <li><a href="#">INSPIRATION</a></li> 
 
     \t \t  <li><a href="#">BLOG</a></li> 
 
     \t \t  <li><a href="#">CONTACT</a></li> 
 
    \t \t </ul> 
 
    
 
    \t </nav> 
 
    </body> 
 
    </html>