Menu icon Foundation
Two Dropdowns, one Top-Bar Nav Area

Hi all,

I'm working on a mobile site, and I want to implement two navigations with two separate dropdowns (one is a menu, one is just a search bar) within one top-bar. Is that possible?

Let's say I'm working with the default top bar code, with only one dropdown, similar to this:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav 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>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>
            

         

When you size down the screen, you get one menu icon on the right side. Ideally, I'll have two of those, one on the left, one on the right, similar to when you implement something using offcanvas:

Screenshot 2014 06 24 17.01.21

It should look exactly like that screenshot, but instead of being offcanvas, the nav should appear as a dropdown.

I can't figure out how to do this successfully without hacking it like crazy.

There's gotta be an easy way to do this. Ideas?

dropdowntop-bartopbarnavigation

Hi all,

I'm working on a mobile site, and I want to implement two navigations with two separate dropdowns (one is a menu, one is just a search bar) within one top-bar. Is that possible?

Let's say I'm working with the default top bar code, with only one dropdown, similar to this:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav 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>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>
            

         

When you size down the screen, you get one menu icon on the right side. Ideally, I'll have two of those, one on the left, one on the right, similar to when you implement something using offcanvas:

Screenshot 2014 06 24 17.01.21

It should look exactly like that screenshot, but instead of being offcanvas, the nav should appear as a dropdown.

I can't figure out how to do this successfully without hacking it like crazy.

There's gotta be an easy way to do this. Ideas?

B C over 5 years ago

Hi all,

Anyone have any hints for this? Still struggling, same issue

Wing-Hou Chan over 5 years ago

Howdy!

I think the only way is to hack it like crazy.

B C over 5 years ago

@wing-hou, so there's currently no way to have two dropdowns display within one mobile nav menu? Would you be able to suggest a workaround?

I would only need one dropdown with one level of links, the other is I guess more like a button that displays a search field. So perhaps I won't need two actual dropdowns?

Wing-Hou Chan over 5 years ago

I'll take a look at such implementation, however I cannot guarantee I can produce anything, or anything quickly.

Joe Windeknecht about 5 years ago

Anyone able to figure this out? I was looking for the same results as B C.

Joe Windeknecht about 5 years ago

Alrighty, I have a very rough version of this working. It's by no means final and I'd like to do the following still:
- Get rid of the absolute positioning values
- Currently only work on small screens

http://codepen.io/jwindeknecht/pen/haekv

I hope this will at least get your guys started. Cheers.

Peter Gibb almost 5 years ago

Any progress with this? I'm trying to do something that combines B C's original query about a second dropdown (one for nav and one for account links) and a search dropdown like Joe Windeknecht's.