開始在一個點的CSS過渡

我正在使用CSS過渡來顯示子菜單。主菜單位於右欄，當用戶懸停時，子菜單出現。第一個菜單項滑出菜單左側，然後其他菜單項從其下拉。開始在一個點的CSS過渡

我的問題是，子菜單需要比主菜單更寬，並且當用戶懸停時，菜單開始在右側太遠。我希望菜單以與移出的速度相同的速度變大，但在完成移動之前它將達到最大寬度。我如何實現這一目標？

.mainmenu ul li ul{ 
 
    margin-left: 0; 
 
    max-height:61px; 
 
    width:263px; 
 
    overflow: hidden; 
 
    -webkit-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in; 
 
    -moz-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in; \t 
 
    -o-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in; \t 
 
    -ms-transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in; 
 
    transition: margin-left 0.3s ease-in 1s, max-height 1s ease-in, width 0s ease-in 1s; 
 
} 
 
.mainmenu li:hover ul{ 
 
    margin-left: -262px; 
 
    width:263px; 
 
    max-height: 999px; 
 
    -webkit-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s; 
 
    -moz-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s; 
 
    -o-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s; 
 
    -ms-transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s; 
 
    transition: margin-left 0.3s ease-in, max-height 1s ease-in 0.3s, width 0s ease-in; 
 
} 
 
#mobile_menu .mainmenu li ul{ \t 
 
    display: block; 
 
    position:static; 
 
    margin: 0; 
 
    max-height: 999px; 
 
}

<div id="mobile_menu"> 
 
    <div class="mainmenu"> 
 
    <ul> 
 
     <li><a href='/home-0.html' class='active' >Home</a></li> 
 
     <li><a href='/blog-25.html' class='' >Blog</a></li> 
 
     <li> 
 
     <a href='/contact-us-8.html' class='' >Contact Us</a> 
 
     <ul> 
 
      <li><a href='/contact-us/find-us-27.html' >Find Us</a></li> 
 
      <li><a href='/contact-us/about-us-28.html' >About Us</a></li> 
 
      <li><a href='/contact-us/meet-the-team-29.html' >Meet the Team</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

來源

2016-01-25 Richard Young

您可能會提供一些HTML？ – Aer0

尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

我編輯過這個問題以包含一些HTML/ –

有一些關於它的工作，不得不重組的CSS，但它基本上是一樣如下：

HTML：

<div id="mobile_menu"> 
    <div class="mainmenu"> 
     <ul> 
      <li><a href='#' class='active'>Home</a></li> 
      <li><a href='#' class=''>Blog</a></li> 
      <li> 
       <a href='#' class=''>Contact Us</a> 
       <ul> 
        <li><a href='#'>Find Us</a></li> 
        <li><a href='#'>About Us</a></li> 
        <li><a href='#'>Meet the Team</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

CSS：

#mobile_menu .mainmenu { 
    width: 100px; 
} 
#mobile_menu .mainmenu ul { 
    padding: 0; 
    width: 100px; 
} 
#mobile_menu .mainmenu ul li { 
    list-style: none; 
} 
#mobile_menu .mainmenu ul li ul { 
    height: 18px; 
    margin-left: 0; 
    margin-top: -18px; 
    overflow: hidden; 
    -webkit-transition: height 1s 1s, margin-left 1s, width 1s; 
    -moz-transition: height 1s 1s, margin-left 1s, width 1s; 
    -o-transition: height 1s 1s, margin-left 1s, width 1s; 
    transition: height 1s 1s, margin-left 1s, width 1s; 
    width: 0; 
} 
#mobile_menu .mainmenu ul li:hover ul { 
    height: 100px; 
    margin-left: 100px; 
    width: 100%; 
}

...當然也有JSfiddle。 :)

來源

2016-01-26 12:53:14 bulanmaster

開始在一個點的CSS過渡

回答

相關問題