Menu icon Foundation
Split top-bar with selected state

Hi all,

I'm getting ever closer to my customized nave bar, but I still need to figure out two issues and I am hoping someone can point me in the right direction. I am using the basic code example in the docs: http://foundation.zurb.com/sites/docs/top-bar.html sans the search element; so a pretty vanilla setup to get things working. I was able to manipulate the js and _drop-menu.scss (thanks to @Robbert Stapel for his help), but I am now stuck on getting the top part of the nav to coincide with the sub items. I want the "one" main item to show the "one" sub menu. If I then select the "two" main menu I want the related sub menu to show. I know this is a bit cinfusing and its hard to explain, but attached are a few screen shots of what I want to happen.

Thanks everyone for the help. This forum is great with very helpful and patient members:)

-Scott

Screen shot 2016 03 04 at 10.13.50 pm

Screen shot 2016 03 04 at 10.16.55 pm

foundation 6top-barnavigationcustom design

Hi all,

I'm getting ever closer to my customized nave bar, but I still need to figure out two issues and I am hoping someone can point me in the right direction. I am using the basic code example in the docs: http://foundation.zurb.com/sites/docs/top-bar.html sans the search element; so a pretty vanilla setup to get things working. I was able to manipulate the js and _drop-menu.scss (thanks to @Robbert Stapel for his help), but I am now stuck on getting the top part of the nav to coincide with the sub items. I want the "one" main item to show the "one" sub menu. If I then select the "two" main menu I want the related sub menu to show. I know this is a bit cinfusing and its hard to explain, but attached are a few screen shots of what I want to happen.

Thanks everyone for the help. This forum is great with very helpful and patient members:)

-Scott

Screen shot 2016 03 04 at 10.13.50 pm

Screen shot 2016 03 04 at 10.16.55 pm
Robbert Stapel over 3 years ago

Hello Scott,

Im not sure if i understand your question the right way.
But it seems you just want a dropdown menu
-One main -on hover- shows One sub
-Two main -on hover- shows Two sub
-etc.....

Without an styling i would do it like this:

<ul class="dropdown menu" data-dropdown-menu>
  <li>
    <a href="#">One</a>
    <ul class="menu">
      <li><a href="#">One sub</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li>
    <a href="#">Two</a>
    <ul class="menu">
      <li><a href="#">Two sub</a></li>
      <!-- ... -->
    </ul>
  </li>
  <li>
    <a href="#">Three</a>
    <ul class="menu">
      <li><a href="#">Three sub</a></li>
      <!-- ... -->
    </ul>
  </li>
</ul>

Scott Koons over 3 years ago

Hi Robbert. Thank you so much for taking the time to review and respond to my post. Here is a link to an older website created in F5: http://cmb-nov15.yetignome.com/beer/regular-house-beers

Take a look at the nav bar and this is the desired effect.

Thank you for your help.

-Scott

Robbert Stapel over 3 years ago

Ahh oke!

What they did here is just a double topbar-menu with proper styling....
When you click the menu "beer" for example it automaticly takes you to: /beer/regular-house-beers
They insert a "new" topbar-menu everytime you click a main menu item. (causing the page to reload and the right sub menu items to appear when clicking a main menu item). 

Semanticly this the right way to navigate because "regular-house-beers" is indeed under "beer" so the URL must be "/beer/regular-house-beers".

However in my opinion you should consider the user's goal when visting the site... For example a user might be intrested in "take home beers". Logicaly the user will browse the menu "beer". Browsing the menu "beer" doesnt mean i want the "regular-house-beers" page to load. especialy when im on a slower internetconection or mobile device... it takes time and uses data..

Only for this reason i would go for a menu with javascript... This way you still have the same menu but it only loads a page when clicking a sub-menu item...

I made an Foundation 6 example to illustrate what i mean. I just used Foundation tabs to get the job done quickly. Note that if you want it to be semanticly correct you realy should go for <nav> tags with a main-menu and sub-menu container. By styling it and using some JS you can get the same result as in the example (or better). 

<div class="menu-centered">
  <ul class="menu" data-tabs id="example-tabs">
    <li class="tabs-title is-active"><a href="#main1" aria-selected="true">Food</a></li>
    <li class="tabs-title"><a href="#main2">Beer</a></li>
    <li class="tabs-title"><a href="#main3">Merchandise</a></li>
    <li class="tabs-title"><a href="#main4">Find us</a></li>
  </ul>
</div>

<div class="menu-centered">
  <div class="tabs-content" data-tabs-content="example-tabs">
    <div class="tabs-panel is-active" id="main1">
      <div class="menu-centered">
        <ul class="menu">
          <li><a href="#">Menu</a></li>
          <li><a href="#">Book group event</a></li>
          <li><a href="#">Catering</a></li>
        </ul>
      </div>
    </div>

    <div class="tabs-panel" id="main2">
      <div class="menu-centered">
        <ul class="menu">
          <li><a href="#">Regulars</a></li>
          <li><a href="#">Seasonals</a></li>
          <li><a href="#">Take home</a></li>
        </ul>
      </div>
    </div>
    
    <div class="tabs-panel" id="main4">
      <div class="menu-centered">
        <ul class="menu">
          <li><a href="#">Locations</a></li>
          <li><a href="#">News & events</a></li>
          <li><a href="#">Mailing list</a></li>
          <li><a href="#">Feedback</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

 

W3C also offers much information about how certain elements should be setup. Foundation offers a lot but some things (like this menu) should realy be build free hand... using a drop-down menu class for a menu that doesnt drop down is not the right way to get things done. A nav is a nav and a drop-down is a drop-down. That said you can alway pull Foundation styling from every element using their mixins.... See the @include statements at the bottom of every page.

Hope this helps to see things from a diffirent perspective.

 

 

Scott Koons over 3 years ago

Brilliant Robert!  I was so much in the mindset of using the top-bar I completely overlooked the tab concept.  Thanks for the help.  It's much appreciated!

 

-Scott

Robbert Stapel over 3 years ago

No problem, glad it helped!