CODEWITHSUNDEEP
javascriptcssdrop-down-menuzurb-foundation
Joanna Marsden
Joanna Marsden

Reputation: 565

Zurb Foundation: drop up menus with bottom fixed navbar (rather than dropdown)

I'm using Zurb Foundation, and I would like to create a navigation bar fixed to the bottom of the window. I've positioned it properly, but the dropdown menus can't be seen because they are appearing below the bottom of the window.

How can I make the menus drop up from the nav rather than drop down?

Here is a codepen which shows the hidden menus: http://cdpn.io/lnqFL

<div class="fixed-bottom">
  <nav class="top-bar" id="menu" data-topbar>
    <ul class="title-area">
      <li class="name"></li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
    <ul class="right">
       <li class="has-dropdown">
         <a href="#">Right Button Dropdown</a>
         <ul class="dropdown">
            <li><a href="#">First link in dropdown</a></li>
         </ul>
       </li>
    </ul>
    </section>
  </nav>
</div>

Here's the menu class I'm using to position the nav:

#menu {
  margin-bottom: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
}

Upvotes: 3

Views: 1849

Answers (2)

Jason D.
Jason D.

Reputation: 480

@bigfish66 got me half way there, but on small screens the data-options value was being ignored. To get the menu to always drop up, I took the css from the drop up at the larger screen, and applied it with !important to overwrite the element styles from placing the menu back underneath the button on the smaller screens.

<button data-dropdown="drop1" aria-controls="drop1" data-options="align:top" aria-expanded="false">Has Dropdown</button>
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

#drop1:before {
    bottom: -14px !important;
    top: auto !important;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    border-top-style: solid;
    position: absolute;
    left: 10px;
    right: auto;
    z-index: 89;
    border-color: white transparent transparent transparent;
}

#drop1:after {
    bottom: -14px !important;
    top: auto !important;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 7px;
    border-color: #cccccc transparent transparent transparent;
    border-top-style: solid;
    position: absolute;
    left: 9px;
    right: auto;
    z-index: 88;
}

#drop1 {
    top: 227px !important;
}

Upvotes: 1

Intellidroid
Intellidroid

Reputation: 1055

You can align them with a data-options attribute...so for you align to the top :

<section class="top-bar-section">
<ul class="right">
   <li class="has-dropdown">
     <a href="#" data-options = "align:top" >Right Button Dropdown</a>
     <ul class="dropdown">
        <li><a href="#">First link in dropdown</a></li>
     </ul>
   </li>
</ul>
</section>

Documentation here : Dropdowns

Upvotes: 0

Related Questions