「簡單」的CSS調整需要一個響應式菜單

我發現了一個很好的教程，建立一個乾淨，響應式菜單，它幾乎完美！「簡單」的CSS調整需要一個響應式菜單

請看一看www.gymnasticsvillage.com/unifirst/navtest（不是在IE，因爲我還沒有添加response.js呢！），並降低你的瀏覽器斷點（480）

我還沒有得到博客作者的迴應，我知道這可能是一個簡單的CSS大師...我需要幫助的是：

1）當你打開一個subnav，下箭頭圖形應該是與向上箭頭交換以提示用戶摺疊。我做了圖形'upArrow.png'，現在不知道該怎麼辦！

2）對現在的菜單作爲滑動面板，但是當另一個選擇

我希望有人能幫助... ...感謝這麼多，我喜歡它，就像一個手風琴，自動摺疊子菜單！

如果有人想要一個很好的教程，請查看！ http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/

來源

2012-09-13 lprintz

我不送EE的任何子導航...不在Firefox中以及？ – Gus

這是非常簡單的，我認爲。

這是你需要向上箭頭的CSS。將其添加到@media screen and (max-width: 480px) {部分的末尾。

.nav li.hover > .parent { 
    background-image: url('../images/upArrow.png'); 
}

CSS文件的146行應該是這樣的，所以你不會失去箭頭（.nav > li > * a:hover）：JS文件的

background-color:#017865;

線36需要是這樣的：

$(this).parent("li").toggleClass("hover").siblings('li').removeClass("hover");

來源

2012-09-13 19:39:52

謝謝約翰！這適用於頂層。有什麼辦法可以把這個擴展到子平面？我玩過\t .nav * .parent { background-image：url（'../ images/upArrow.png'）; }無效 – lprintz

我將CSS選擇器更改爲'.nav li.hover> .parent'。我相信這應該可以解決您的問題。 –

我知道我很近！得到這些兒童選擇器的竅門:) 這工作完美...謝謝！ – lprintz

目前，我正在使用Twitter Bootstraps下拉菜單。如果你不想使用它，也許你可以'竊取'他們如何實現他們的響應菜單的一些想法。

來源

2012-09-13 19:26:39 Robyflc

當您打開subnav，向上箭頭

.nav > li:hover > a { 
    border-bottom: 4px solid #D1D2D4; 
    background-image: url("../images/upArrow.png"); 
    background-position: right center; 
    background-repeat: no-repeat; 
}

來源

2012-09-13 19:37:27

謝謝！我實現了這一點，它給了我所有懸停的向上箭頭。我只想要下箭頭切換到上箭頭當一個部分是「打開」我不相信這是我正在尋找的'懸停'...也許某種'活躍'狀態時，一節擴展？我希望這個澄清 – lprintz

這是解決方案：

.nav li.hover > a { 
    background-image: url("../img/upArrow.png"); 
} 
.nav li li.hover > a { 
    background-image: url("../img/upArrow.png"); 
}

來源

2015-06-27 21:08:23 pino

「簡單」的CSS調整需要一個響應式菜單

回答

相關問題