Menu icon Foundation
F6 Small Accordion to Medium Dropdown

Could anybody please shed some light on how I create a mobile accordion menu that translates to a top bar dropdown navigation on larger screens.

The issue i'm having is that accordion needs 'vertical' classes applied and li's at 100% width, where as the dropdown wants to be horizontal.

Adding the data-responsive-menu="accordion medium-dropdown" attribute changes the jquery elements but not the css layout, and I can't find a way of doing menu small-vertical for example.

Foundation Sites 6accordiondropdown

Could anybody please shed some light on how I create a mobile accordion menu that translates to a top bar dropdown navigation on larger screens.

The issue i'm having is that accordion needs 'vertical' classes applied and li's at 100% width, where as the dropdown wants to be horizontal.

Adding the data-responsive-menu="accordion medium-dropdown" attribute changes the jquery elements but not the css layout, and I can't find a way of doing menu small-vertical for example.

This post has been closed. No new replies can be added.

Rafi Benkual over 3 years ago

You can add the classes to the <ul>

So you're setting the classes in your HTML that affect the mobile device .vertical and the larger screens .medium-horizontal

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

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

Rafi Benkual over 3 years ago

We're now looking into a way to automatically set the style of the .vertical class based on the responsive toggle used. So data-responsive-menu="accordion medium-dropdown" will assume the accordion (or drilldown) is vertical

Ben Wills over 3 years ago

Almost works, but... the top-bar dropdown menu submenus show up hovered right with right arrows not dropdown with down arrows?

A4 over 3 years ago

Oooh. Glad I found this. Wish I'd looked before I spent an hour trying to figure out how to fix the arrows.

Just to make sure I understand, you can do class "dropdown" to get down-pointing arrows, but you can't do something like "medium-dropdown" so it works with the responsive menu chooser feature?

Rafi Benkual over 3 years ago

@A4 That sounds right - .medium-dropdown should do the same thing as .dropdown, just on medium and up breakpoints.

Ben Wills over 3 years ago

Hi Rafi,

Ok can you please explain to me what i'm doing wrong, there is a live site here: http://preview.funzoneatprioryprep.co.uk

I just can't get this to work.

Thanks

Ben

Leonard Monnier over 3 years ago

Hi Ben,

It seems to be a bug:
https://github.com/zurb/foundation-sites/issues/7095

Leo

Carlo Vinci over 3 years ago

I was after the same menu structure. Accordion for mobile (no arrows) and dropdown for medium up. The issue I found using the below code, was the dropdown menu would open up to the right and not below the nav.

To fix this I realigned the dropdown like this, hopes this helps.

.first-sub {
top: auto;
left: auto;
}

Ben Wills over 3 years ago

Thanks Carlo, thats perfect!