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

У меня есть главное меню, которое я использую. На странице «Мои сервисы» есть подстраницы, которые отображаются в раскрывающемся списке при переносе меню. Когда я на странице служб, я хочу показать подменю и только подменю в левой части страницы в дополнение к выпадающему. Я не хочу создавать два меню, поскольку это кажется излишним. Какие-либо предложения? Спасибо всем.Отображается только подменю в бизнес-катализаторе

источник

2013-03-20 Damien

Вот что я сделал: я убедился, что у корневых элементов есть идентификаторы. то с помощью jquery я смог извлечь ul, появившийся после корневого элемента. Я вытащил это в div, а затем стилизовал оттуда.

источник

2013-03-20 20:49:06 Damien

Вот относительно чистый способ, чтобы навигационное меню отображало необходимые элементы подменю из главного меню без javascript (таким образом избегая мигания меню на pageload).

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

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>

При создании меню в БК, мы применяем классы только для родительских узлов. В «Магазине» мы применяем класс group-shop, для «Учет» мы применяем класс group-account, а для «О», group-about.

Аналогичным образом, мы изменяем класс show-group- на элемент nav в каждом шаблоне.

Для ясности, наше меню тег будет генерировать этот 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>

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

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

    .show-menu-group(@groupname) { 
    &[email protected]{groupname} { 
     ul > [email protected]{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.

(Вы можете отследить от примененных стилей обратно к источнику Меньше, если у вас есть 'Enable CSS source maps' turned on в ваших инструментах Chrome dev)

источник

2014-04-24 11:19:45

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

ответ

Смежные вопросы