0

我有一个我正在使用的主菜单。我的服务页面有子页面，当您滚动菜单时显示为下拉菜单。当我在服务页面上时，除了下拉菜单外，我还想显示子菜单，并且只显示页面左侧的子菜单。我不想创建两个菜单，因为这似乎是多余的。有什么建议么？谢谢大家。

4

2 回答 2

0

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

于 2013-03-20T20:49:06.043 回答
0

这是一种相对简洁的方法，可以让侧导航菜单反映主菜单中所需的子菜单项，无需 javascript（从而避免菜单在页面加载时闪烁）。

这是我们的示例菜单结构：

home
|-- Shop
|   |-- Shipping
|   |-- Terms
|   `-- FAQ
|
|-- Account
|   |-- Sign Up
|   `-- My Details
|
`-- About
    |-- Contact Us
    |-- Our History
    `-- Where We Are

共有三个模板：“Shop”、“Account”和“About”。

在“Shop”模板中，我们的侧边导航 HTML 如下所示（注意show-group-类）：

<nav class="sidenav-a show-group-shop">
    {module_menu, version="2", menuId="750134", moduleTemplateGroup="Default"}
</nav>

在 BC 中创建菜单时，我们仅将类应用于父节点。在“Shop”上，我们应用 class group-shop，对于“Account”，我们应用 class group-account，而对于“About” 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>

（忽略 id，它们是由 BC 生成的，我还没有看到删除它们的方法。）

这是仅显示所需子菜单的较少内容：

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 开发工具中启用了“启用 CSS 源映射”，则可以从应用的样式追溯到源 Less ）

于 2014-04-24T11:19:45.433 回答