垂直彈出菜單純CSS

請檢查下面的代碼..垂直彈出菜單純CSS

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8">  
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>hover-navigation</title> 

     <meta name="description" content=""> 
     <meta name="author" content="yesvin"> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0"> 

     <link rel="shortcut icon" href="/favicon.ico"> 
     <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 

     <style> 
      html, body { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      .menuContainer{ 
       width:100px; 
       height:100vh; 
       background:#ccc; 
       z-index:1;     
      } 
      .menuContainer ul { 
       padding:20px 0 0 0; 
       margin:0; 
      } 
      .menuContainer ul li { 
       padding:10px; 
       margin:0; 
       list-style: none;    
       border-bottom:solid 1px #000; 
       font-family:'Arial'; 
       font-size:16px; 
       background:#00ACD6; 
       position: relative; 
      } 
      .menuContainer ul li:hover{    
       background:#00A65A; 
       cursor:pointer; 
      } 
      .menuContainer ul li a{ 
       text-decoration:none;    
       color:#000;    
      } 
      .menuContainer ul li:hover a{ 
       text-decoration:none;    
       color:#fff; 
      } 
      .menuContainer ul li a:after{ 
       content:' •'  
      } 

      .menuContainer ul li ul {    
       position: absolute;    
       top:-20px; 
       left:-100px; 
       height:100vh; 
       width:0px; 
       z-index:-1; 

       -webkit-transition: width 0.4s, left 0.4s; 
       -o-transition: width 0.4s, left 0.4s; 
       transition: width 0.4s, left 0.4s; 
      } 
      .menuContainer ul li:hover ul {    
       left:100px; 
       width:100px;  
      } 
     </style> 

    </head> 

    <body> 
     <div class="menuContainer"> 
      <ul> 
       <li><a href="#">Frontend</a> 
        <ul> 
         <li>HTML</li> 
         <li>CSS</li> 
         <li>Javascript</li> 
        </ul>     
       </li>         
       <li><a href="#">Backend</a> 
        <ul> 
         <li>PHP</li> 
         <li>MYSQL</li> 
         <li>ASP</li> 
         <li>JSP</li>       
        </ul> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

這裏的問題是 'z-index的'。因爲當我懸停'li'時，子菜單打開，但是它隱藏，當我將鼠標移到下一個'li'上時，刪除'z-index'或保留相同的'z-index'爲'container'和'ul li ul'都可以正常工作。但在主菜單上的子菜單動畫。

我需要子菜單應該在容器後面。什麼將成爲這一問題的方法...

結帳的搗鼓演示http://jsfiddle.net/a92c03zj/1/

在此先感謝...

來源

2015-02-05 Yesvinkumar

這些飛出菜單是有點早2000年你不覺得 – 2015-02-05 13:32:42

是..我知道它的舊的。但需要修復現有的項目。所以我不想改變整個代碼 – Yesvinkumar 2015-02-05 17:16:15

檢查了這一點：

.menuContainer ul li ul { 
    position: absolute; 
    overflow: hidden; 
    top:-20px; 
    left:100px; 
    height:100vh; 
    width:0px; 
    z-index:0; 
    -webkit-transition: width 0.4s; 
    -o-transition: width 0.4s; 
    transition: width 0.4s; 
} 
.menuContainer ul li:hover ul { 
    width:100px; 
    z-index:1; 
}

只要改變這些行與你的代碼，它應該如你所願地工作。爲了您的解釋：我們只是對寬度設置動畫，而不是對左側位置進行動畫處理（我們無法真正看到）。爲了使文本在整個時間內都能很好地顯示，我們使用「overflow:hidden」，以便文本不被糾正。此外，因爲我們現在只是寬度的動畫，左邊的位置最初設置爲100px。我做的最後一個改變是改變懸停時的z-index，以便「舊」下拉菜單不會在「新」菜單上生成動畫。

來源

2015-02-05 15:02:43

嗨Frederik它按預期工作。感謝您的幫助。 – Yesvinkumar 2015-02-05 17:12:22

沒問題:-)很高興我能幫上忙 – 2015-02-06 08:33:37

垂直彈出菜單純CSS

回答

相關問題