Menu icon Foundation
Foundation 6 Topbar like F5?

Trying to puzzle out how to make a topbar in F6 that looks and behaves like it does in F5 -- the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html toggles to the "hamburger" when the window is smaller, but displays the topbar horizontally (usually too wide) when clicked, rather than vertically.

Screenshot 2015 11 21 11.29.44

topbar

Trying to puzzle out how to make a topbar in F6 that looks and behaves like it does in F5 -- the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html toggles to the "hamburger" when the window is smaller, but displays the topbar horizontally (usually too wide) when clicked, rather than vertically.

Screenshot 2015 11 21 11.29.44
Thomas Ree Hjelm almost 4 years ago

I've only just started digging into foundation, but is this maybe what you're looking for?

class="vertical medium-horizontal menu"

Putting that on the menu container should make it stack on small screens.

R. Epple almost 4 years ago

...does anybody has a complete F6 source code example of a menu that will work like the top-bar in F5 - including "contain-to-grid sticky"
That would be very helpfull :-)

Started today to migrate a F5 project to F6 - I think it is not that easy in terms of the navigation...

Thanks in advance
Rainer

Bill Sholar almost 4 years ago

@Thomas that seems to work, thanks... @Ranier I added this to a test page and get pretty much what I was looking for:

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>

    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

The only change from the "Responsive Toggle" example at http://foundation.zurb.com/sites/docs/responsive-navigation.html was this line:

<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>

R. Epple almost 4 years ago

@Bill Sholar
Bill thanks for posting your solution!

It works well for the root nodes.

But I don't know how to handle the sub nodes and sub-sub-nodes :-) ?
Do I have to implement the new drilldown-menu?

Questions, questions, questions...

Bill Sholar almost 4 years ago

@Ranier - not quite there yet. Trying to get the subs to work with the output of the CMS's menu builder (to keep clients out of HTML)... that's next.

R. Epple almost 4 years ago

@Bill Sholar:
I will try to play around with the navigation - as soon as I have a solution, I'll post it here...

...may the fastest win :-)

R. Epple almost 4 years ago

My first solution - now I have to check the css for proper design :-)

<div class="large-12 columns">
<div class="title-bar" data-responsive-toggle="eMenu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menutext</div>
</div>
<div class="top-bar" id="eMenu">
<div class="top-bar-left">
<ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu"> <a href="#">1</a>
<ul class="vertical submenu menu" data-submenu>
<li><a href="#">1.1</a></li>
</ul>
</li>
<li class="has-submenu"> <a href="#">2</a>
<ul class="vertical submenu menu" data-submenu>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
</ul>
</li>
<li class="has-submenu"> <a href="#">3</a>
<ul class="vertical submenu menu" data-submenu>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
</ul>
</li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</div>
</div>

Andrzej Giniewicz almost 4 years ago

@R. Epple By any chance did you managed to get it work as sticky as well? I'm also interested in porting "sticky" or "fixed" and "contain-to-grid" to new top bar.

R. Epple almost 4 years ago

...nötig now, because I have a problem with not working links on my solution:
http://foundation.zurb.com/forum/posts/36254-links-in-top-bar-sub-menu-not-working#

Robert Walker almost 4 years ago

<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="vertical medium-horizontal menu" data-accordion-menu>
      <li class="menu-text">Site Title</li>
      <li class="has-submenu">
        <a href="#">One</a>
        <ul class="menu vertical nested" data-submenu>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
      <li><a href="#">Four</a></li>
      <li><a href="#">Five</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      </ul>
  </div>
</div>

As close as I can get it right now, also tried to make it sticky but with no luck.

Really liked how the old topbar worked, shamed they had to mess with that.

Zack Warren almost 4 years ago

Here's my top-bar component. I've added one custom class, .menu-items, otherwise it's completely native classes and markup... just a little extra styling.

For a drill down menu, just change data-responsive-menu="accordion medium-dropdown"> to data-responsive-menu="drilldown medium-dropdown"> and remove the .nested class from the sub ul's.

If you change the $topbar-breakpoint variable to large, remember to change all of the medium classes in the HTML as well.

Nav HTML:

<nav class="title-bar" data-responsive-toggle="top-bar-menu" data-hide-for="medium">
  <div class="title-bar-left">
    <a href="#"><img src="http://placehold.it/150x48&text=logo" alt="Logo"></a>
  </div>

  <div class="title-bar-right">
    <button class="menu-icon" type="button" data-toggle></button>
  </div>
</nav>

<nav class="top-bar" id="top-bar-menu">
  <div class="row">
    <div class="top-bar-left show-for-medium">
      <ul class="menu menu-items">
        <li><a href="#"><img src="http://placehold.it/150x48&text=logo" alt="logo"></a></li>
      </ul>
    </div>
    <div class="top-bar-right">
      <ul class="vertical medium-horizontal menu menu-items" data-responsive-menu="accordion medium-dropdown">
        <li>
          <a href="#">Item 1</a>
          <ul class="menu vertical nested">
            <li>
              <a href="#">Item 1A</a>
              <ul class="menu vertical nested">
                <li><a href="#">Item 1Ai</a></li>
                <li><a href="#">Item 1Aii</a></li>
                <li><a href="#">Item 1Aiii</a></li>
              </ul>
            </li>
            <li><a href="#">Item 1B</a></li>
            <li><a href="#">Item 1C</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Item 2</a>
          <ul class="menu vertical nested">
            <li><a href="#">Item 2A</a></li>
            <li><a href="#">Item 2B</a></li>
          </ul>
        </li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </div>
  </div>
</nav>

Custom SCSS:

/// Media query to show full menu
/// @type String
$topbar-breakpoint: medium !default;

/// Height of topbar at $topbar-breakpoint and up.
/// @type Number
$topbar-height: 65px !default;

/// Height of title bar below $topbar-breakpoint.
/// @type Number
$titlebar-height: 45px !default;

/// Adds styles for a top bar container.
@include breakpoint($topbar-breakpoint) {
  .top-bar {
    .menu-items {
      > li {
        > a {
          height: rem-calc($topbar-height);
          line-height: rem-calc($topbar-height);
          padding: 0 1rem;
        }
      }
    }
  }

  .dropdown.menu > .is-dropdown-submenu-parent.has-submenu > a::after {
    // Hides arrow on top-level menu items
    display: none;
  }
}

/// Removes float on 'medium' if $topbar-breakpoint equals large.
@if $topbar-breakpoint == 'large' {
  .top-bar-right {
    float: none;

    @include breakpoint($topbar-breakpoint) {
      float: right;
    }
  }
}

/// Adds styles for a title bar container.
.title-bar {
  height: rem-calc($titlebar-height);

  .title-bar-left {
    a {
      padding: 0 0 0 .5rem;
    }

    img {
      height: rem-calc($titlebar-height) - 1rem;
    }
  }
}

And from the _settings.scss file:

// 35. Top Bar
// -----------

$topbar-padding: 0rem;
...
$topbar-link-color: $dark-gray;

Felipe Martins over 3 years ago
Stevie-Ray Hartog over 3 years ago

I've build a complete responsive version of the Foundation 5 Top Bar in Foundation 6.

Check it out on CodePen.io!

 

Irina Fedorova over 3 years ago

All of the navigations looks great; the only thing I've noticed that parent links are not clickable. Is their a way to get it work in Foundation 6?

Himanshu Khurana almost 3 years ago

Thanks a lot for this information.

I also created a top menu after looking at the comments provided by R. Epple.

The menu works good, but when the width of the browser is changed and the hamburger icon shows up, I click on the menu item "3", this item has seven sub items and only four items show up in the drill down menu. What could be the issue?

<div class="top-bar">

        <div class="title-bar" data-responsive-toggle="eMenu" data-hide-for="medium">

            <button class="menu-icon" type="button" data-toggle></button>

            <div class="title-bar-title"><strong><a href="#">MENU</a></strong></div>

        </div>

        <div class="top-bar" id="eMenu">

            <div class="top-bar-left">

                <ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

                    <li><strong><a href="#">MENU</a></strong></li>

                    <li class="has-submenu">

                        <a href="#">1</a>

                        <ul class="vertical submenu menu" data-submenu>

                            <li><a href="#">1.1</a></li>

                            <li><a href="#">1.1</a></li>

                        </ul>

                    </li>

                    <li class="has-submenu">

                        <a href="#">2</a>

                        <ul class="vertical submenu menu" data-submenu>

                            <li><a href="#">2.1</a></li>

                            <li><a href="#">2.2</a></li>

                        </ul>

                    </li>

                    <li class="has-submenu">

                        <a href="#">3</a>

                        <ul class="vertical submenu menu" data-submenu>

                            <li><a href="#">3.1</a></li>

                            <li><a href="#">3.2</a></li>

                            <li><a href="#">3.3</a></li>

                            <li><a href="#">3.4</a></li>

                            <li><a href="#">3.5</a></li>

                            <li><a href="#">3.6</a></li>

                            <li><a href="#">3.7</a></li>

                        </ul>

                    </li>

                    <li class="has-submenu"><a href="#">4</a></li>

                </ul>

            </div>

            <div class="top-bar-right">

                <ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">

                    <li class="has-submenu">

                        <a href="#">5</a>

                        <ul class="vertical submenu menu" data-submenu>

                            <li><a href="#">5.1</a></li>

                            <li><a href="#">5.2</a></li>

                        </ul>

                </ul>

            </div>

        </div>

    </div>