Question

我有一个我正在使用的主菜单。我的服务页面包含子页面，当您翻转菜单时，这些子页面显示为下拉列表。当我在服务页面上时，我想显示子菜单，只显示页面左侧的子菜单以及下拉列表。我不想创建两个菜单，因为它似乎是多余的。有什么建议？谢谢大家。

Answer 1

这就是我所做的：我确保根项目上有id。然后使用jquery，我能够提取出现在根项目之后的ul。我将它弹出一个div然后从那里设计。

Answer 2

这是一个相对干净的方法，让侧面导航菜单反映主菜单中所需的子菜单项，没有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。

同样，我们更改每个模板中nav元素的show-group-类。

为清楚起见，我们的menu标签将生成此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>

（忽略id，它们是由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看到上述代码的实现。

（如果你的Chrome开发工具中有'Enable CSS source maps' turned on，你可以从应用的样式追溯到源减去

仅显示业务催化剂中的子菜单

2 个答案: