Toggled nav dropdown links
Closed this issue · 3 comments
oscarstranger commented
The toggled nav needs a simple toggle function out of the box in order to hide/show secondary menus. Currently, secondary menus are permanently hidden.
Basic idea:
theme-nav-toggled.liquid:
<a href="{{ link.url }}" data-trigger="toggle" data-target="#{{ child_list_handle }}" class="nav-link {% if link.active %} active{% endif %}">
{{ link.title }}
</a>
<ul class="dropdown_menu hidden" id="{{ child_list_handle }}">
// Linklist here
</ul>
navigation.js
concrete.Navigation = (function() {
$('[data-trigger="toggle"]').on('click', function(event) {
event.preventDefault();
var target = $(this).data('target');
$(target).toggle();
});
});
We can also remove the child_list_handle
IDs from the theme-nav-main.liquid
link elements as they are not needed and might interfere with this function's selectors.
georgebutter commented
Why don't we use css for this?
oscarstranger commented
Wouldn't that require additional markup for the dropdown menus like hidden checkboxes? Would be more verbose but perhaps more compatible for non-js browsers
oscarstranger commented
We should implement this as optional accordions, built into Focus