Menu icon Foundation
Responsive Menu

I want to create a menu that behaves as a horizontal drop-down menu in medium/large screens and as vertical drildown in small screens.

The problem is that in 6.1.2 the sub menus appears to the right of the menu items and the arrow is directed to right:

http://codepen.io/anon/pen/NxeZgG

Here is how it looks in previous versions
http://codepen.io/anon/pen/VeqJrq

This is similar to document example. I only changed this

       <ul class="dropdown menu" data-dropdown-menu>     

to 


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

         

Responsivemenudropdowndrilldown

I want to create a menu that behaves as a horizontal drop-down menu in medium/large screens and as vertical drildown in small screens.

The problem is that in 6.1.2 the sub menus appears to the right of the menu items and the arrow is directed to right:

http://codepen.io/anon/pen/NxeZgG

Here is how it looks in previous versions
http://codepen.io/anon/pen/VeqJrq

This is similar to document example. I only changed this

       <ul class="dropdown menu" data-dropdown-menu>     

to 


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

         
Adam Wilson over 3 years ago

Hi Amir,
I thinks it's due to the 'vertical' class on the top level UL.
Removing that fixes the arrow direction, but then it stops the menu being vertical on small screens.
You'd need a way to apply 'vertical' only for small screens ('small-vertical' would be good but I don't think it exists).
Perhaps javascript can help here or you can do it server-side?

Rafi Benkual over 3 years ago

I think in the next version, the accordions and drilldowns are always going to be vertical by default. Can't think of a time where it wouldn't be.

Amir over 3 years ago

Thanks

Re: Adam. You are right. it is about vertical. I think I tried every possible combination but there is no such option.

Re: Rafi. I agree with you. I can not think of accordions and drilldowns to be horizontal.

Amir over 3 years ago

This answer is posted by Bill (http://foundation.zurb.com/forum/1568-bill)

Your codepen doesn't work for me, but I think I'm having the exact same issue.

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


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

Gives me a correct vertical drilldown menu on small screens, and gives me a mostly correct horizontal dropdown menu on bigger screens, EXCEPT that the dropdown arrows point right and the dropdowns appear to the right of the menu items.

Changing it to
HTML

Makes the bigger screen dropdown menu behave correctly, but then the small screen drill-down menu is horizontal instead of vertical.

It seems like the "medium-horizontal" and "large-horizontal" aren't completely overriding the "vertical".

Of course, the menu documentation is rather convoluted and unclear, but this seems like a pretty common use-case combination (given that it's basically recreating the default responsive menu from F5) so either I'm missing a key point or there is some kind of bug.

bill over 3 years ago

Following this because I have the exact same issue and I can't proceed with my site until it's fixed.

bill over 3 years ago

As a temporary solution, the following scss seems to fix the issue:

#site-menu>li {
    @include breakpoint(small only) { 
      display: block;
    }
}

I added it to app.scss after all the (at)includes.

I didn't use the "vertical" class in the html file, so the menu code looks like this:

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

I haven't done much testing on it yet though, so fingers crossed it does't break anything else.

PS/ is this forum the best place to report bugs like this? Do the devs read it?
PPS/ It seems like fixing it in the _menu.scss or _drilldown.scss shoudn't be too hard, but I decided not to mess with the core components as there was more risk of breaking something.