帶有轉場和彈出窗口的CSS3導航

我在css3菜單上工作，我無法完全按照自己的想法來工作。我對此很陌生，所以請耐心等待！ :-)帶有轉場和彈出窗口的CSS3導航

我想要什麼：

當你將鼠標懸停在頂級導航，我想下拉緩解，我想頂級導航向上滑動20px的，我想頂級別的導航將出現底部邊框。這基本上是它在FF中做的。但是，當我這樣做時，二級導航正在得到同樣的待遇。我不想那樣。我希望第二層和第三層導航只需將顏色懸停在一個基本上。我確實希望所有的懸停過渡都很順利，所以我也使用了一些css3。

這是在IE中沒有工作。另外，據我所知，我可以使用Modernizr對一些js進行聚合以使css transitions在較舊的瀏覽器中工作，但我不知道該怎麼做。有人能告訴我嗎？

這是我的jsfiddle。感謝你給與我的幫助！

來源

2012-08-11 imakeitpretty

Modernizr只會檢測瀏覽器支持哪些html5/css3功能，因此您可以使用條件JS/CSS定位舊版瀏覽器。 – DuMaurier 2012-08-11 02:40:55

我改變了這個：

ul#navigation li a:hover { 
color:#acb453; 
padding-top:0; 
padding-bottom:10px; 
border-bottom: 6px solid #4dbaf2;

}

這樣：

ul#navigation .topNav > a:hover { 
color:#acb453; 
padding-top:0; 
padding-bottom:10px; 
border-bottom: 6px solid #4dbaf2;

}

，並添加了類「topNav」你的頂級導航。 topNav類後面的子組合器將樣式限制爲僅第一個錨點。小提琴在這裏：http://jsfiddle.net/zwVwh/

來源

2012-08-11 02:37:36 DuMaurier

非常感謝！ – imakeitpretty 2012-08-11 02:40:15

你有什麼想法，爲什麼這在IE中根本不起作用？我知道IE不支持轉換，但我希望佈局能夠工作。 – imakeitpretty 2012-08-11 17:51:27

這應該解決您的問題：

http://jsfiddle.net/NFEt4/

基本上，你需要一些方法來覆蓋子菜單的樣式。我在嵌套的ul上創建了一個新類。

如果您還沒有，我會建議檢查SMACSS（http://smacss.com/），我認爲這將有助於在您的CSS類中創建更靈活的架構。

至於現代化的問題，也許你可以創建一個單獨的問題，以確保你得到一個足夠好的答案？

來源

2012-08-11 02:32:07

那個小提琴似乎和以前一樣。這是正確的鏈接？我一直在計劃試用SMACSS。上週我參加了一個會議。它看起來非常容易！ – imakeitpretty 2012-08-11 02:38:41

感謝您的幫助喬！看起來其他人也解決了這個問題。 – imakeitpretty 2012-08-11 02:39:59

也許我在提交答案之前沒有點擊「更新」。我仍然得到了jsfiddle的竅門。我還認爲@DuMaurier在你的架構中有一個稍微乾淨的解決方案。祝你好運！ – 2012-08-11 03:02:39

帶有轉場和彈出窗口的CSS3導航

回答

相關問題