Menu icon Foundation
Creating a responsive menu via js

I want to do a responsive menu, dropdown/mobile drilldown. Due to various reasons (CMS issues) I cannot add a data-attribute to the menu. I was hoping then to be able to do all the responsive stuff via javascript, but the documentation is a bit sketchy on how to do this (JS is not my strong suit)

say my menu is

<ul id="mainmenu">
<li><a>item 1</a></li>
<li><a>item 2</a>
<ul>
<li><a>item2a</a></li>
</ul>
</li>
</ul>

in theory, I'd like to have the behaviour of

data-responsive-menu="drilldown medium-dropdown"

I'm trying to include this in my js

$(document).foundation();

var element = $('#mainmenu')
var elem = new Foundation.ResponsiveMenu(element);

but nothing is happening.

is there anything else? how do i list the options I want?

Responsivemenujavascriptprogramatically

I want to do a responsive menu, dropdown/mobile drilldown. Due to various reasons (CMS issues) I cannot add a data-attribute to the menu. I was hoping then to be able to do all the responsive stuff via javascript, but the documentation is a bit sketchy on how to do this (JS is not my strong suit)

say my menu is

<ul id="mainmenu">
<li><a>item 1</a></li>
<li><a>item 2</a>
<ul>
<li><a>item2a</a></li>
</ul>
</li>
</ul>

in theory, I'd like to have the behaviour of

data-responsive-menu="drilldown medium-dropdown"

I'm trying to include this in my js

$(document).foundation();

var element = $('#mainmenu')
var elem = new Foundation.ResponsiveMenu(element);

but nothing is happening.

is there anything else? how do i list the options I want?