5

昨日、文字通り何時間もかけてこれをやろうとしたところ、stackoverflow.com/questions/11056808/big-commerce-hover-menuという素晴らしい答えが1つ見つかりましたが、それを自分のストアに適用する方法がわかりません. 基本的に、Bigcommerce は「パネル」と呼ばれるコードのスニペットを使用してカテゴリを表示します。このパネルは、トップ カテゴリ メニューとサイド メニューの両方で使用されます。現在、BC はすべてのカテゴリを次のように展開しています。

親カテゴリ

子カテゴリ

次の子

次の子

子カテゴリ

次の子

次の子

トップメニューの見た目はそのままで、サイドメニューの表示を次のように変更する方法を知りたいです。

親カテゴリ

子カテゴリ

子カテゴリ

そしてクリックすると：

親カテゴリ

子カテゴリ

次の子

次の子

子カテゴリ

親カテゴリ

子カテゴリ

子カテゴリ

次の子

次の子

それぞれ。

サイド カテゴリ メニューの HTML は次のようになります。

<div class="CategoryList" id="SideCategoryList">
<div class="BlockContent">
    <div class="SideCategoryListFlyout">
        <ul class="sf-menu sf-horizontal sf-js-enabled">
            <li class=""><a href="#" class="sf-with-ul">Parent Category</a>
               <ul style="display: none; visibility: hidden;">
                  <li><a href="#">Child Category</a>
                      <ul style="display: none; visibility: hidden;">
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                      </ul>
                  </li>
                  <li><a href="#">Child Category</a>
                      <ul style="display: none; visibility: hidden;">
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                         <li><a href="#">Next Child</a></li>
                      </ul>
                  </li>
               </ul>
            </li>
        </ul>
    </div>
</div>
</div>

次の CSS スタイルを使用します。

.Left #SideCategoryList {
    display: block;
}
.Left #SideCategoryList ul ul {
    color: #5a5353;
}
.Left #SideCategoryList .BlockContent,
.Left .slist .BlockContent {
    color: #5a5353;
}
.Left #SideCategoryList li a,
.Left .slist li a,
.Left .afterSideShopByBrand a, .Left #GiftCertificatesMenu li a, .Left #SideAccountMenu li a {
    color: #5a5353;
}
.Left #SideCategoryList li a:hover,
.Left .slist li a:hover,
.Left .afterSideShopByBrand a:hover, .Left #GiftCertificatesMenu li a:hover, .Left #SideAccountMenu li a:hover {
    color: #5a5353;
}
.Left #SideCategoryList li li a,
.Left .slist li li a {
color: #5A5353;

}
.Left #SideCategoryList li li a:hover,
.Left .slist li li a:hover {
    color: #aca9a9;
}

すべてを説明したと思いますが、さらに説明が必要な場合はお知らせください。一部のコードはシステムによって自動的に生成されることに注意してください（検査ツールを使用するときにjqueryが疑われます。リンクにカーソルを合わせると、そのクラスが自動的に変更されます）。サイトのリンクは次のとおりです。

http://bit.ly/1aHKTke

4

1 に答える 1

2

Bigcommerce では、サイド ナビゲーションとトップ メニュー ナビゲーションが同じ ID セレクターによって呼び出されることがよくあります。

この JavaScript が 1 つの領域でのみ機能するようにするには、#SidePanel > #SideCategoryList などのより具体的なセレクターを使用する必要があります。

あなたはもうこのサイトで働いていないようですが、誰かの役に立てば幸いです。

于 2016-02-15T06:47:30.453 に答える