jquery - 响应式菜单所需的“简单”CSS 调整

Question

我找到了一个关于构建干净、响应迅速的菜单的很棒的教程，它几乎是完美的！

请查看 www.gymnasticsvillage.com/unifirst/navtest （不在 IE 中，因为我还没有添加 response.js！）并将您的浏览器减少到断点（480）

我还没有收到博客作者的回复，我知道这对于 CSS 大师来说可能很简单......我需要帮助的是：

1）当您打开子导航时，向下箭头图形应与向上箭头交换以提示用户折叠。我制作了图形“upArrow.png”，只是现在不知道该怎么办！

2）现在菜单充当滑板，但我会更像是手风琴，自动折叠另一个子菜单

我希望有人可以帮助...非常感谢！

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

Answer 1

目前，我正在使用 Twitter Bootstraps 下拉菜单。如果您不想使用它，也许您可​​以“窃取”他们如何实现响应式菜单的一些想法。

Answer 2

当您打开子导航时，向上箭头

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

Answer 3

我认为这很简单。

这是向上箭头所需的 CSS。将其添加到该部分的末尾@media screen and (max-width: 480px) {。

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

css 文件的第 146 行应该是这样，这样您就不会丢失箭头 ( .nav > li > * a:hover)：

background-color:#017865;

js文件的第36行需要是这样的：

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

Answer 4

这是解决方案：

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