CODEWITHSUNDEEP
jquerydrop-down-menuzurb-foundationzurb-foundation-6
Simon Hayter
Simon Hayter

Reputation: 3171

Zurb Foundation 6: Dropdown JS data-options attribute not working as expected

I'm using the latest version of ZURB Foundation Flex with (cdnjs v6.3.1). I am using the dropdown JS component which works absolutely fine out of the box but I am unable to customize it using the inbuilt data-options="", its simply not detecting the options at all. Since I'm using Flex I considered that being a problem so I attempted to add a position class using data options and that option was also ignored.

Here is my HTML: 

<nav>
  <ul class="menu-one">
    <li><a href="/" title="">Link 1</a></li>
    <li><a href="/" title="">Link 2</a></li>
    <li><a data-toggle="link-three">Link 3</a></li>
  </ul>
  <div class="dropdown-pane bottom" id="link-three" data-dropdown data-options="data-v-offset: 300px; data-h-offset: 300px;">
    <ul class="menu-two">
      <li><a href="" title="">Link 3 A</a></li>
      <li><a href="" title="">Link 3 B</a></li>
      <li><a href="" title="">Link 3 C</a></li>
    </ul>
  </div>
</nav>

And basic JavaScript:

$(document).foundation();

I have also tested it in 6.3.0 with no luck and I do believe that this is either a bug or most likely something I'm doing wrong or simply because this may not be supported in flex.

JsFiddle:

To make things easier for the community of StackOverflow to answer I've made a jsFiddle.

Upvotes: 1

Views: 525

Answers (1)

tymothytym
tymothytym

Reputation: 1621

It is not fabulously well documented but you have to change the format of the option to remove the hyphens and "data-" when using the data-options attribute. Basically data-v-offset ==> vOffset e.g.

<nav>
  <ul class="menu-one">
    <li><a href="" title="">Link 1</a></li>
    <li><a href="" title="">Link 2</a></li>
    <li><a data-toggle="link-three">Link 3 (Dropdown)</a></li>
  </ul>
  <div class="dropdown-pane bottom" id="link-three" data-dropdown data-options="vOffset:300; hOffset:300;">
    <ul class="menu-two">
      <li><a href="" title="">Link 3 A</a></li>
      <li><a href="" title="">Link 3 B</a></li>
      <li><a href="" title="">Link 3 C</a></li>
      <li><a href="https://simonhayter.co.uk" title="Simon Hayter">SimonHayter.co.uk</a></li>
    </ul>
  </div>
</nav>

Updated JSFiddle

Vague documentation, you have to read between the lines.

Upvotes: 2

Related Questions