Adob​​e業務催化劑網站上的水平下拉菜單

Question

我們目前在我們的網站上有一個水平菜單（http://www.faa.net.au），但我想通過將其設置爲下拉菜單（最多3個級別）來擴展此功能，因此我可以刪除一個左側菜單，允許我最大化內容的網絡空間。

我創建了一個測試模板和Web頁，所以我不能在直播現場工作，測試頁在這裏 - http://www.faa.net.au/test/horizontal-menu

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

我還創建了一個的jsfiddle頁面「一些」的菜單項我嘗試工作：https://jsfiddle.net/zvcgqyqx/3/

Answer 1

我不熟悉Adobe Business Catalyst，但此代碼會爲您提供下拉菜單。

HTML

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

CSS

.dropbutton { 
    background-color: #000000; 
    color: white; 
    padding: 16px; 
    font-size: 16px; 
    border: none; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    display: block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

希望幫助:)

Answer 2

這裏是我想出了一個客戶的網站，我的工作在哪裏他們想要仍然使用Menu功能，但需要它是動態的，並使用Bootstrap/BC Liquid。它會根據您設置的菜單深入到3個層次。

頁面代碼

<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 使用標準引導CSS

最新通報 您將需要更新菜單Id =項目，以配合您的菜單的ID。

備註 這是一個雙線導航設置，包含聯繫信息，地址，頂部的社交鏈接和底部的導航。此外，如果用戶已登錄，還有一個切換按鈕，它會將最後一個按鈕更改爲登錄或轉到成員儀表板。

DEMO 這個網站目前正在建設中（不是所有環節的工作還沒有，但是這一切都取決於所以你可以看到它）... ...，但你可以在這裏的行動看資產淨值的樣本：www.goconifer.com/index-new

希望這會有所幫助！