0

クリーンでレスポンシブなメニューの構築に関する素晴らしいチュートリアルを見つけましたが、ほぼ完璧です!

www.gymnasticsvillage.com/unifirst/navtest を見てください (まだ response.js を追加していないため、IE にはありません!)、ブラウザをブレークポイント (480) まで下げてください。

ブログの作者からまだ返事が来ていませんが、これは CSS の専門家にとっては簡単なことかもしれません... 助けが必要なのは:

1) サブナビゲーションを開くとき、下向き矢印のグラフィックを上向き矢印と交換して、ユーザーに折りたたむように指示する必要があります。グラフィック「upArrow.png」を作成しましたが、今何をすべきかわかりません!

2) 現在、メニューはスライド パネルとして機能しますが、アコーディオンのように、別のサブメニューが選択されると自動的にサブメニューが折りたたまれるのが好きです。

誰かが助けてくれることを願っています...どうもありがとう！

優れたチュートリアルが必要な場合は、チェックしてください。 http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/

4

4 に答える 4

0

サブナビゲーションを開くと、上矢印が表示されます

.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-13T19:37:27.500 に答える
0

現時点では、Twitter Bootstraps ドロップダウンを使用しています。使用したくない場合は、レスポンシブ メニューの実装方法に関するいくつかのアイデアを「盗む」ことができます。

于 2012-09-13T19:26:39.390 に答える
0

これはかなり簡単だと思います。

これは、上矢印に必要な css です。セクションの最後に追加し@media screen and (max-width: 480px) {ます。

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

.nav > li > * a:hovercss ファイルの 146 行目は、矢印 ( )を見失わないように、次のようにする必要があります。

background-color:#017865;

js ファイルの 36 行目は次のようにする必要があります。

$(this).parent("li").toggleClass("hover").siblings('li').removeClass("hover");
于 2012-09-13T19:39:52.587 に答える
0

これが解決策です：

.nav li.hover > a {
    background-image: url("../img/upArrow.png");
}
.nav li li.hover > a {
    background-image: url("../img/upArrow.png");
}
于 2015-06-27T21:08:23.150 に答える