Menu icon Foundation
Foundation 6.x Top Bar Responsive Menu

Dropdown

Hello, I have build a responsive menu following the instructions here https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6

The responsive bar works, but not the way I had hoped, in short I am looking for more of a v5 look: The responsive menu works only with (*1) "vertical" behavior in order for the menu arrows to point down and the menu to "dropdown" the level 2 lists I need to use a (*2) horizontal class but if I use this the mobile/small view is broken.

I could use the "small-only" @media to break the menu on to different levels but this would not be using the natural foundation menu?

*(1) 

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

            
*(2)

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

         

Broken

6top barmenu

Dropdown

Hello, I have build a responsive menu following the instructions here https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6

The responsive bar works, but not the way I had hoped, in short I am looking for more of a v5 look: The responsive menu works only with (*1) "vertical" behavior in order for the menu arrows to point down and the menu to "dropdown" the level 2 lists I need to use a (*2) horizontal class but if I use this the mobile/small view is broken.

I could use the "small-only" @media to break the menu on to different levels but this would not be using the natural foundation menu?

*(1) 

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

            
*(2)

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

         

Broken
Alejandro almost 4 years ago

This is an example i´ve been using, notice that it´s align-right, and for Foundation 6.1.2

<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="menu">
            <li class="menu-text"><span class="txt-white">Instituto Nacional de Tecnología Industrial</span></li>
          </ul>
        </div>
        <div class="top-bar-right">
          <ul id="site-menu" class="medium-horizontal menu align-right" data-responsive-menu="drilldown medium-dropdown">
          <li class="has-submenu">
                <a href="#"><span class="txt-white">Participan</span></a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Centro Entre Ríos</a></li>
                  <li><a href="#">Centro Córdoba</a></li>
                  <li><a href="#">Centro Santa Fé</a></li>
                </ul>
              </li>
            <li  class="has-submenu">
                <a href="#"><span class="txt-white">Otros Noticieros</span></a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Noticiero Centro</a></li>
                  <li><a href="#">Noticiero Mar y Sierra</a></li>
                  <li><a href="#">Noticiero Cuyo</a></li>
                  <li><a href="#">Noticiero NOA</a></li>
                  <li><a href="#">Noticiero NEA</a></li>
                </ul>
              </li>

            <li><a href="../"><span class="txt-white"> <i class="fi-home"></i> Inicio</span></a></li>              
          </ul>
        </div>
      </div>
// FLECHAS
.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
    transform: rotate(90deg);
    margin-top: .5rem;
}
.dropdown.menu .is-dropdown-submenu-parent.is-down-arrow > a::after{
  margin-top: .3rem;
}
.dropdown.menu:not(.vertical) .is-dropdown-submenu.first-sub {
    top: 100%;
    left: auto;
    right: 0;
}
#site-menu>li {
    @include breakpoint(small only) { 
      display: block;
    }
}
.menu.align-right>li {
    @include breakpoint(small only) { 
     float: inherit !important;
    }
}

Rafi Benkual almost 4 years ago

@Alejandro
That is helpful!

Now in Foundation 6.2 you don't need the .align-right class.

Example: http://codepen.io/rafibomb/pen/ZQEGog

Hannes Lehner almost 4 years ago

Dear Rafi,
Could you please write the code with sub-submenus? Because I do not know if I make a mistake, or there is a bug. As I posted already, to submenus sometimes open outside the screen.
See:
http://foundation.zurb.com/forum/posts/38688-top-bar-f62-alignment-submenu-wrong
Thanks,
Hannes

PHILL almost 4 years ago

Sorry for the slow reply. For me I need ed a quick simple solution.

@media #{$small-only} {
  nav.top-bar li
  {
    clear:both!important;
    display:block;
  }
}

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!

 

Lefthandmedia almost 3 years ago

@Stevie-Ray: hey that looks pretty cool. can you share which JS and SCSS need to bee included?

RDG