菜單列表不會像預期的那樣出現在div上

它應該有聯繫，但ul列表不顯示在div元

我只想做到這一點使用CSS。

，因爲我沒有任何腳本語言知識

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <title>SideBar</title> 
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons 
      "/> 
      <style type="text/css"> 
       /* 
       #button { 
       display: block; 
       text-decoration: none; 
       margin-top: 20px; 
       margin-left: 50px; 
       color: white; 
       width: 20px; 
       height:20px; 
       font-size: 30px; 
       transition: width 0.5s; 
       background-color: black; 
       text-align: center; 
       padding-bottom: 30px; 
       box-sizing: border-box; 
       }*/ 

       #button { 
        margin-top: 20px; 
        margin-left: 50px; 
        font-size: 30px; 
        cursor: hand; 
       } 

       #sidebar { 
        position: absolute; 
        background-color: black; 
        left: 0px; 
        top: 0px; 
        width: 0px; 
        height: 100%; 
        transition: width 0.5s; 
        opacity: 0.7; 
       } 

       #screen { 
        position: fixed; 
        background-color: tan; 
        height: 100%; 
        width: 100%; 
        left: 0px; 
        top: 0px; 
       } 

       #button:hover + #sidebar { 
        width: 200px; 
       } 

       #sidebar:hover { 
        width: 200px; 
       } 

      </style> 
     </head> 

     <body> 

      <div id="screen"> 

       <i class="material-icons" id="button">menu</i> 

       <div id="sidebar"> 
        <ul> 
         <li><a href="#1">Nav 1</a></li> 
         <li><a href="#2">Nav 2</a></li> 
         <li><a href="#3">Nav 3</a></li> 
        </ul> 
       </div> 

       <hr /> 
       <div> 
        Hello 
       </div> 
      </div> 

     </body> 
    </html>

來源

2015-10-27 Akshay Badgujar

到底是什麼問題？目前格式不正確，但似乎有效。 http://jsfiddle.net/ps0reqgd/ –

ul只會生成一個無序列表。如果你刪除了ul，你將會得到一個有序的列表（編號不是符號）我是否正確理解你？ – jerseyetr

我認爲OP所指的是UL在頁面上顯示，而不是在滑出的側邊欄上顯示。看看這篇文章中的例子http://stackoverflow.com/questions/21425244/css-for-a-sidebar-menu-that-folds-in-and-out –

因爲在你的CSS你有#sidebar{ width: 0px;}的ul不能包含在div內，而不是與left價值發揮，而不是width純CSS是必需的JSFiddle

#button { 
 
    margin-top: 20px; 
 
    margin-left: 50px; 
 
    font-size: 30px; 
 
    cursor: hand; 
 
} 
 
#sidebar { 
 
    position: absolute; 
 
    background-color: black; 
 
    left: -200px; 
 
    top: 0px; 
 
    width: 200px; 
 
    height: 100%; 
 
    transition: width 0.5s; 
 
    opacity: 0.7; 
 
    padding-top:50px; 
 
-webkit-transition: left 1s; 
 
transition: left 1s; 
 
} 
 
#sidebar ul { 
 
list-style-type:none; 
 
} 
 
#screen { 
 
position: fixed; 
 
background-color: tan; 
 
height: 100%; 
 
width: 100%; 
 
left: 0px; 
 
top: 0px; 
 
} 
 
#sidebar:hover, #button:hover + #sidebar { 
 
left: 0; 
 
-webkit-transition: left 1s; 
 
transition: left 1s; 
 
}

<div id="screen"><i class="material-icons" id="button">menu</i> 
 

 
    <div id="sidebar"> 
 
     <ul> 
 
      <li><a href="#1">Nav 1</a></li> 
 
      <li><a href="#2">Nav 2</a></li> 
 
      <li><a href="#3">Nav 3</a></li> 
 
     </ul> 
 
    </div> 
 
    <hr /> 
 
    <div>Hello</div> 
 
</div>

注：添加transition: left 1s;使滑動到頁面和脫離-webkit-的過渡支持問題

來源

2015-10-27 17:36:48

Thanks Mate ...它解決了我的問題 –

喲，非常歡迎，很高興幫助 –

菜單列表不會像預期的那樣出現在div上

回答

相關問題