Показва се само подменюто в Business Catalyst

Ето какво направих: Уверих се, че основните елементи имат id върху тях. след това използвайки jquery, успях да извлека ul, който се появява след основния елемент. Пуснах това в div и след това стилизирах от там.

Ето един сравнително чист начин страничното навигационно меню да отразява необходимите елементи от подменюто от главното меню, без javascript (по този начин се избягва мигането на менюто при зареждане на страницата).

Ето нашата примерна структура на менюто:

home
|-- Shop
|   |-- Shipping
|   |-- Terms
|   `-- FAQ
|
|-- Account
|   |-- Sign Up
|   `-- My Details
|
`-- About
    |-- Contact Us
    |-- Our History
    `-- Where We Are

Има три шаблона: „Пазаруване“, „Акаунт“ и „Относно“.

В шаблона „Пазаруване“ нашият HTML код за странична навигация изглежда така (обърнете внимание на класа show-group-):

<nav class="sidenav-a show-group-shop">
    {module_menu, version="2", menuId="750134", moduleTemplateGroup="Default"}
</nav>

Когато създаваме менюто в BC, прилагаме класове само към родителските възли. В „Пазаруване“ прилагаме клас group-shop, за „Акаунт“ прилагаме клас group-account, а за „Информация“ group-about.

По подобен начин променяме класа show-group- на nav елемента във всеки шаблон.

За по-голяма яснота, нашият таг на менюто ще генерира този HTML:

<div id="myMenu1">
    <ul id="myMenu1List">
        <li class="group-shop selected"><a href="/bg">Shop</a>
            <ul>
                <li><a href="/bg">Shipping</a></li>
                <li><a href="/bg">Terms</a></li>
                <li><a href="/bg">FAQ</a></li>
            </ul>
        </li>
        <li class="group-account"><a href="/bg/account">Account</a>
            <ul>
                <li><a href="/bg/sign-up">Sign Up</a></li>
                <li><a href="/bg/my-details">My Details</a></li>
            </ul>
        </li>
        <li class="group-about"><a href="/bg/about">About</a>
            <ul>
                <li><a href="/bg/contact-us">Contact Us</a></li>
                <li><a href="/bg/our-history">Our History</a></li>
                <li><a href="/bg/where">Where We Are</a></li>
            </ul>
        </li>
    </ul>
</div>

(Игнорирайте идентификаторите, те са генерирани от BC и не видях начин да ги премахна.)

Ето по-малко, което показва само желаното подменю:

nav {
  &.sidenav-a {
    & > ul > li { /* Target only first-level list items */
      display: none;
    }
  }

  .show-menu-group(@groupname) {
    &.show-group-@{groupname} {
      ul > li.group-@{groupname} {
        display: block;
      }
    }
  }

  .show-menu-group(shop);
  .show-menu-group(account);
  .show-menu-group(about);
}

Или като CSS:

nav.sidenav-a > ul > li {
  display: none;
}
nav.show-group-shop ul > li.group-shop {
  display: block;
}
nav.show-group-account ul > li.group-account {
  display: block;
}
nav.show-group-about ul > li.group-about {
  display: block;
}

Можете да видите колко по-бързо расте CSS с всяко подменю.

Реализация на горния код може да се види на http://atlexstockyards.worldsecuresystems.com/saleyards-abattoirs-and-feedlots .

(Можете да проследите от приложените стилове обратно до източника Less, ако имате „Активиране на CSS изходни карти“ е включено във вашите инструменти за разработка на Chrome)