Metro UI CSS: Как достичь класса = «активный» эффект?

Question

В бутстрапе есть хороший класс css 'active' для применения к элементам меню, чтобы указать, на какой странице пользователь.

Я предполагаю, что это будет работать так же в пользовательском интерфейсе метро, ​​но я был неправ

<ul class="app-bar-menu" data-bind="foreach: router.navigationModel"> 
    <li data-bind="css: { active: isActive }"> 
     <a data-bind="attr: { href: hash }, text: title"></a> 
    </li> 
</ul> 

Приведенный выше код (использует маршрутизатор Дюрандаль в) не делает пункты меню выделяются, даже если я явно задать класс без них привязок.

Есть ли аналогичный механизм в Metro UI CSS для панели приложений или горизонтального меню? Если нет, то как я могу это достичь?

EDIT Я узнал, что class = "active" успешно работает с элементами меню более низкого уровня, но как насчет верхнего уровня?

Answer 1

Я не нашел решение, кроме как добавить css переопределить. Для приложения-бар это будет

.app-bar-menu > li.active { 
    background-color: #005696; 
} 

Если вы используете нестандартные цвета, которые вы должны будете сделать это специально для Вашего случая, например, зеленый:

.app-bar.green .app-bar-menu > li.active { 
    background-color: #128023; 
}