在懸停上使用css轉換的水平菜單

我試圖做出一個拉出導航，用戶將鼠標懸停在「菜單」句柄上並將其拉出。我從頂端成功地做到了這一點，但我希望盒子水平堆疊並從左側進入，向右移動。在懸停上使用css轉換的水平菜單

這是我的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 

      nav { 
       position:absolute; 
       top:-190px; 
      } 

      .menu:hover { 
       -webkit-transform:translate(0px,190px); 
       -moz-transform:translate(0px,190px); 
       -o-transform:translate(0px,190px); 
       -ms-transform:translate(0px,190px); 
       transform:translate(0px,190px); 
       -webkit-transition:ease-in-out; 
       -moz-transition:ease-in-out; 
       -o-transition:ease-in-out; 
       -ms-transition:ease-in-out; 
       transition:ease-in-out; 
       -webkit-transition-duration: .5s; 
       -moz-transition-duration: .5s; 
       -o-transition-duration: .5s; 
       -ms-transition-duration: .5s; 
       transition-duration: .5s; 
      } 

      div { 
       width:40px; 
       height:40px; 
       background-color:#999999; 
       border:black solid 2px; 
       padding:2px; 
       font-family:Helvetica; 
       font-size:.8em; 
       color:white; 
       text-align:center; 
       margin:1px; 
      } 

      .handle { 
       border-radius:0px 0px 10px 10px; 
      } 

      div:hover { 
       background-color:#009999; 
       border:black solid 2px; 
       -webkit-transform: translateX(10px); 
       -moz-transform: translateX(10px); 
       -o-transform: translateX(10px); 
       -ms-transform: translateX(10px); 
       tranform: translateX(10px); 
      } 

      div:active { 
       background-color:#006699; 
       border:black solid 2px; 
       -webkit-transform: translateX(-10px); 
       -moz-transform: translateX(-10px); 
       -o-transform: translateX(-10px); 
       -ms-transform: translateX(-10px); 
       tranform: translateX(-10px); 
      } 

     </style> 
    </head> 

    <body> 
     <nav class="menu"> 
      <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 1</p></div></a> 
      <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 2</p></div></a> 
      <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 3</p></div></a> 
      <a href"http://www.lvc.edu/" target="_new"><div> <p>Link 4</p></div></a> 
      <div class="handle"><p>Menu</p></div> 
     </nav> 
    </body> 
</html>

我的主要問題是不實際的動畫（我敢肯定，我知道如何計算出來），它更多的方框的位置，以及如何我'而是他們是水平的而不是堆積的。

對不起，如果這是混亂，希望你們明白！

來源

2013-04-08 user2259601

所以你想要一個水平菜單從左側滑入？ – Whistletoe 2013-04-08 23:39:42

jsfiddle請。 – 2013-04-08 23:44:32

是的，一個水平菜單從左側滑動。 – user2259601 2013-04-08 23:51:31

爲了得到一個水平菜單，按照網絡上的innumeral教程之一，比如這一個：

http://jamesowers.co.uk/css-tutorials/50/horizontal-css-list-menu/

（習慣上使用的菜單選擇無序列表）

爲了使它從左側滑入，您必須將起始位置偏移量更改爲左側：

nav { position:absolute; left: [negative number corresponding to the width of the menu];}

而對於滑動荷蘭國際集團：

.menu:hover { 
    ... 
    transform:translate([width of menu],0); 
    ... 
}

請注意：Internet Explorer 8和更早版本不支持CSS變換，這將意味着菜單將不可訪問（不含大家還是在Windows XP下使用IE）。也許你可以考慮使用JavaScript/jQuery？

來源

2013-04-08 23:55:36 Whistletoe

在懸停上使用css轉換的水平菜單

回答

相關問題