Foundation 5 Dropdowns - have link click through AND hover

Question

I am using foundation 5 and have implemented a side bar "fly out" categories / sub categories menu using the Dropdowns feature.

This all works as expected however I need the top level category link to click through as well as hover to show the sub categories. Does anyone know how I would achieve this?

<ul class="side-nav nav-bar vertical">  
<li>
<a id="showDropdown" href="http://www.google.com" data-options="is_hover:true;align:right;" data-dropdown="drop_[CategoryID]" >[CategoryName]</a>
<ul id="drop_[CategoryID]" class="small f-dropdown" data-dropdown-content>
<li> <a href="http://www.google.com">[CategoryName]</a></li>
</ul>
</li>
</ul>

I imagine the dropdown feature works in the same way as the top bar and this also does not seem to support having a top level link that clicks through as well as a hover. Does anyone know why this is as this is pretty standard isn't it?

Many thanks

Answer 1

I believe the idea is that on mobile devices it's really quite annoying if you tap a dropdown menu then the page buggers off somewhere else before you can select a sub-option, so it's easier to just not listen for clicks on the parent link.

If you want to re-add the functionality you can do something simple enough such as this fiddle*:

<a data-follow-click id="showDropdown" href="http://www.google.com" data-options="is_hover:true;align:right;" data-dropdown="drop_7">[CategoryName]</a>

$(function() {
    $('[data-follow-click]').on('click', function() {
        location.href = this.href;
    });
});

Obviously this is a very rough example and doesn't fire any more complicated handlers, it just lets href go through, but that works for the OP example.

*Note: the fiddle doesn't follow links to Google - check the console to see when a request is or isn't going through :-)