Показано только подменю в бизнес-катализаторе

Вот что я сделал: я убедился, что на корневых элементах есть идентификаторы. затем, используя 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- в элементе навигации в каждом шаблоне.

Для ясности наш тег меню будет генерировать этот HTML:

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

(Игнорируйте идентификаторы, они генерируются BC, и я не видел способа их удалить.)

Вот less, который показывает только нужное подменю:

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)