Foundation 5 Dropdowns - click link and click
I am using framework 5 and have implemented the crash sidebar categories / subcategories menu using the Dropdown .
This works as expected, however I need the top level category link to click and also hover over the subcategories. Does anyone know how I would go about doing 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 am guessing that the dropdown function works the same as the top bar and that also does not seem to support the top level link that clicks and also hangs. Does anyone know why this is the way it is pretty standard, right?
Many thanks
source to share
I believe the idea is that on mobile devices it is really quite frustrating if you click on the dropdown and then the page is disabled somewhere else before you can select the sub-parameter, so it's easier to just not listen for clicks on the parent link.
If you want to re-add functionality, you can do something simple enough like this script *:
<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 crude example and doesn't run more complex handlers, it just skips href
, but this works for the OP's example.
* Note: fiddle doesn't match links on google - check your console to see when request or fails :-)
source to share