Horizontal Dropdown Menu on Adobe Business Catalyst website

We currently have a Horizontal Menu on our website (http://www.faa.net.au) but I want to expand on this by making it a dropdown menu (up to 3 levels down) so I can remove the need for a left side menu, allowing me to maximise the web space for the content.

I have created a Test Template and Web Page so I am not working on the Live Site, the test page is here - http://www.faa.net.au/test/horizontal-menu

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

I have also created a JSFiddle page with "some" of the menu items I am trying to get working: https://jsfiddle.net/zvcgqyqx/3/

Answers


I'm not familiar with Adobe Business Catalyst, but this code will get you a drop down menu.

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

Hope that helps :)


Here is what I came up with for a client site I'm working on where they wanted to still use the Menu feature, but needed it to be dynamic and work with Bootstrap / BC Liquid. It will go up to 3 levels deep, based on the Menu you setup.

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 Using standard bootstrap CSS

UPDATES You will need to update the menuID= item to match the ID of your menu.

NOTES This is a two-line navigation setup with contact info, address, social links on top and navigation on the bottom. In addition is has a toggle button for if the user is logged in or not it changes the very last button to either login or go to member dashboard.

DEMO This site is currently being built (not all links work yet, but it's all up so you can see it)... but you can see a sample of the nav in action here: www.goconifer.com/index-new

Hope this helps!


Need Your Help

Laravel get all data form two Models and rank them by timestamp

php arrays laravel laravel-4

I'm making this Laravel project, in which the dashboard consists of a 'timeline' showing all messages and notifications orderd by the time they occured ('created_at').

Can GHCi tell me the type of a local Haskell function?

haskell types type-inference ghci

Is it possible to query the ghci for the type it inferred for a function inside another function?