Metro UI CSS:如何实现class＝"活动的”;效应

Metro UI CSS: How to achieve class="active" effect?

本文关键字：quot 活动 效应 class CSS UI 何实现 实现 Metro      更新时间：2023-09-26

在引导程序中，有一个漂亮的css类"active"可以应用于菜单元素，以指示用户在哪个页面上。

我想它在metroui中也会起作用，但我错了

<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>

上面的代码（使用Durandal的路由器）并没有使菜单项突出，即使我明确地设置了没有这些绑定的类。

在应用程序栏或水平菜单的Metro UI CSS中是否有类似的机制？如果没有，我该如何实现？

编辑我发现class="active"可以成功地处理较低级别的菜单项，但顶层呢？

除了添加css覆盖之外，我没有找到其他解决方案。对于应用程序栏，这将是

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

如果你使用非默认颜色，你必须专门针对你的情况，例如绿色：

.app-bar.green .app-bar-menu > li.active {
    background-color: #128023;
}
相关文章：