CODE

Self-Configuring Foundation Menu Layouts

Save time with a reusable menu layout to dynamically configure a menu for Foundation's 3 menu types; Dropdown, Drilldown, and Accordion.

Adam Wilson's:
CODE Items Profile

v1.0.0

1. Foundation's menu types require you to set both classes and data attributes to your menu markup.

   By simply adding the required Foundation data attribute to a custom menuType parameter in Menu component tag, the following layout code will configure the menu markup for use with Foundation.

   You can swap and change the menu type as needed, or dynamically set this based on device type or other conditions.

   Optionally, you can add additional classes to the menu via the custom menuClasses parameter (for additional styling such as 'align-center'. You do not need to add Foundation's menu type classes here):

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   {% component type: "menu", alias: "main-menu", layoutGroup: "Default", menuType: "data-drilldown", menuClasses: "align-center" %}

2. Now, add the below code to the 'menu' layout in your Menus layout group:

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   <ul class="menu icons {{params.menuClasses}} {{params.menuType | replace: 'data-accordion-menu', 'vertical' | replace: 'data-dropdown-menu', 'dropdown' | replace: 'data-drilldown', 'vertical'}}" {{params.menuType}} data-options="multiOpen:false;">
       {% for item in this.items %}
           {% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/item.layout" %}
       {% endfor %}
   </ul>

3. Finally, add the below code to the 'sub_items' layout in your Menus layout group to correctly configure sub menu items for Foundation's markup requirements:

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   {% if item.items != null %}
   {% assign currentItem = item %}
       <ul class="menu nested {{params.menuType | replace: 'data-accordion-menu', 'vertical' | replace: 'data-dropdown-menu', 'vertical' | replace: 'data-drilldown', 'vertical'}}">
           {% for item in currentItem.items %}
               {% include "/Content/MenuLayouts/{{this.alias}}/{{this.layoutGroup}}/item.layout" %}
           {% endfor %}
       </ul>
   {% endif %}

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.