2016-09-29 166 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>