Toggled nav dropdown links

[oscarstranger]

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]

Why don't we use css for this?

[oscarstranger]

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]

We should implement this as optional accordions, built into Focus