CSS3轉換下滑元素

我想重新創建一個類似的世界大戰Z電影網站上找到的菜單效果，但我似乎無法得到CSS過渡正常工作。我已經得到懸停元素來顯示隱藏的塊，但CSS轉換不會工作。我試圖得到一個很酷的效果，從頂部或底部滑動，我沒有特定的偏好。此外，如果我嘗試瀏覽任何鏈接，則在我點擊它之前，子菜單會消失。這裏是Fiddle。CSS3轉換下滑元素

HTML：

<ul id="menutitle">Menu Title</ul> 
     <ul id="submenu"> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
     </ul> 
</nav>

CSS：

#topmenu { 
    background: #000; 
    width: 150px; 
    height: 50px; 
    color: #fff; 
} 

#submenu { 
    display: block; 
    position: absolute; 
    width: 110px; 
    display: none; 
    background: #333; 
    list-style: none; 
    line-height: 2em; 
} 

#menutitle:hover + #submenu { 
    display: block; 
    -webkit-transition: height 1s ease; 
    -moz-transition: ease-in 2s none; 
    -ms-transition: ease-in 2s none; 
    -o-transition: ease-in 2s none; 
    transition: ease-in 2s none; 
} 

#menutitle { color: #ff0000; } 

a { color: #FF0; }

來源

2013-12-17 RomeNYRR

我正在處理此問題，但您的html結構不正確。 –

@JoshPowell他的小提琴有起始導航元素，但ul元素很好 - 標籤只是不一致。 – Katana314

@ Katana314'ul'不好，因爲除了'li'之外，除了'ul'之外，什麼都不能。這條線

菜單標題'必須是'

菜單標題

'爲有效的html。 –

有幾件事情：

你:hover選擇應該是#topmenu元素，而不是標題上。這就是導航區域如此突然消失的原因 - 它只是在菜單文本上懸停。

您可能對動畫屬性定義有點誤解。你需要選擇一個特定的屬性來設置動畫;通常是「高度」。在這種情況下，我的解決方案是設置「最大高度」。可能有某種方法將高度設置爲「自動」，但如果是這樣，它就會丟失在我身上。

此外，「transition」屬性始終設置在對象上 - 而不僅僅是「懸停時」。表明「當這個屬性發生變化，平穩過渡」時，這是一種不斷變化的狀態。這樣，你可以有一系列不同的國家給出不同的高度。

http://jsfiddle.net/8YHbq/4/

#topmenu {background: #000; width: 150px; height: 50px; color: #fff; } 

#submenu {display: block; 
position: absolute; 
width: 110px; 
background: #333; 
list-style: none; 
line-height: 2em; 
overflow: hidden; 
    max-height:0; 
    transition: max-height 0.7s ease-in; 
} 

#topmenu:hover #submenu { 
max-height: 200px;} 

#menutitle {color: #ff0000;} 
a {color: #FF0}

目前，一個問題，我的版本，我只是現在意識到的是，因爲最大高度動畫播放至200像素，在導航菜單將全部達到200之前擴大 - 這使動畫不夠流暢。也許你可以根據你的需要稍微調整一下。

來源

2013-12-17 20:03:05 Katana314

感謝這個Katana並清除了我與轉換屬性的混淆。 – RomeNYRR

CSS3轉換下滑元素

回答

相關問題