Question

我们目前在我们的网站上有一个水平菜单（http://www.faa.net.au），但是我想通过将其设置为下拉菜单（最多3级）来扩展它，这样我就可以省去左侧菜单，允许我最大化内容的网络空间。

我创建了一个测试模板和网页，因此我没有在实时网站上工作，测试页面就在这里 - http://www.faa.net.au/test/horizontal-menu

#cat_1418985_divs {
    margin: 0px;
    padding: 0px;
    clear: both;
    }
........

我还创建了一个带有＆＃34;一些＆＃34;的JSFiddle页面。我试图开始工作的菜单项：https://jsfiddle.net/zvcgqyqx/3/

Answer 1

我不熟悉Adobe Business Catalyst，但此代码会为您提供一个下拉菜单。

<强> HTML

for($key in DynamicParams) {
    $paramValue = DynamicParams[$key];
}

<强> CSS

<div class="dropdown">
  <button class="dropbutton">Resources</button>
  <div class="dropdown-content">
    <a href="#">This is a link</a>
    <a href="#">So is this</a>
    <a href="#">And this, also</a>
  </div>
</div>

希望有所帮助：）

Answer 2

以下是我为客户端网站提出的建议，我正在努力使用菜单功能，但需要它是动态的，并且可以使用Bootstrap / BC Liquid。根据您设置的菜单，它将达到3级深度。

PAGE CODE

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
    </button>
    <a class="navbar-brand" href="/">
        <img src="/images/logo.png" alt="">
    </a> 
  </div>
  <div class="topbarContact navbar-right">
    <span class="topPhone">(555) 555-5555</span> 
    <span class="topPipe">|</span> 
    <span class="topAddress">123 Main Street, City ST 12345</span> 
    <span class="topPipe">|</span> 
    <span class="topHours">Mon-Fri 8a-5p</span> 
    <span class="topSocial">
        <img src="/images/facebook.png" alt=""/>
        <img src="/images/twitter.png" alt=""/>
        <img src="/images/linkedin.png" alt=""/>
    </span>
  </div>
  <br />
  <div id="navbar" class="navbar-collapse collapse"> 
    {module_menu render="collection" menuId="1234567" template="" collection="TopBar_NavRight"}
    <ul id="main-menu" class="nav navbar-nav navbar-right">
      {% if TopBar_NavRight.items %} 
      {% for i in TopBar_NavRight.items %}
      {% if i.items %}
      <li class="dropdown"> 
        <a href="{{i.url}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
            {{i.label}} <span class="caret"></span> 
        </a>
        <ul class="dropdown-menu">
          {% for j in i.items %}
          <li><a href="{{j.url}}" >{{j.label}}</a></li>
          {% endfor %}
        </ul>
      </li>
      {% else %}
      <li><a href="{{i.url}}" >{{i.label}}</a> </li>
      {% endif %}
      {% endfor %} 

      {% endif %} 

      <!-- IF LOGGED IN ------ --> 
      {% if globals.user.isLoggedIn contains "true" %}
      <li><a href="/members_dashboard">Member Area</a> <span class="caret"></span></li>
      {% else %}
      <li><a href="/login">Member Login</a></li>
      {% endif %}
    </ul>
  </div>
</nav>

<强> CSS 使用标准bootstrap CSS

<强>更新您需要更新menuID =项目以匹配菜单的ID。

备注这是一个双线导航设置，其中包含联系信息，地址，顶部的社交链接和底部的导航。此外，还有一个切换按钮，如果用户已登录，它会将最后一个按钮更改为登录或转到成员仪表板。

<强>样本这个网站目前正在建设中（并非所有链接都可以正常工作，但它完全可以让你看到它）...但你可以看到这里的导航样本：www.goconifer.com/index-new

希望这有帮助！

Adobe Business Catalyst网站上的水平下拉菜单

2 个答案: