Build Liferay 7 mega menu (multilevel menu) with freemarker

Question

I would like to build a mega menu (multilevel menu) in liferay 7 with freemarker language. The theme I use just prints the menu but is not multilevel.

How can i change the code and add my classes and js?

The code is:

<nav class="navbar-nav navbar-right site-navigation" id="navigation" role="navigation">
        <#assign
        VOID = freeMarkerPortletPreferences.setValue("displayDepth", "1")
        VOID = freeMarkerPortletPreferences.setValue("portletSetupPortletDecoratorId", "barebone")
        />

        <@liferay.navigation_menu
        instance_id="main_navigation_menu"
        default_preferences="${freeMarkerPortletPreferences}"
        />

        <#assign VOID = freeMarkerPortletPreferences.reset() />

    </nav>

Answer 1

I managed to print the links with freemarker language:

I created custom_navigation.ftl file and added it in portal_normal.ftl with the following code:

<#if has_navigation>
    <#include "${full_templates_path}/custom_navigation.ftl" />
</#if>

The custom_navigation.ftl code:

    <ul class="nav navbar-nav">
    <#assign  count = 0 />
    <#list nav_items as nav_item>
        <#assign  count = count +1  />
        <#assign  nav_item_class = "item-" + count />

        <#if count == 1>
            <#assign  nav_item_class = nav_item_class + " first" />
        </#if>

        <#if nav_item.isSelected() >
            <#assign nav_item_class = nav_item_class + " selected" />
        </#if>

        <#if nav_item.hasChildren() >
            <#assign nav_item_class = nav_item_class + " dropdown mega-dropdown" />
        </#if>

        <#if nav_item.hasChildren()>
            <li class="${nav_item_class}">
                <a href="${nav_item.getURL()}" ${nav_item.getTarget()} class="dropdown-toggle" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-menu-hamburger pull-left"></span> ${nav_item.getName()}
                </a>

                <ul class="dropdown-menu mega-dropdown-menu row">
                    <#list nav_item.getChildren() as nav_child>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header"><a href="${nav_child.getURL()}" ${nav_child.getTarget()}>${nav_child.getName()}</a></li>
                                <#if nav_child.hasChildren()>
                                    <#list nav_child.getChildren() as nav_child_2>
                                        <li><a href="${nav_child_2.getURL()}" ${nav_child_2.getTarget()}>${nav_child_2.getName()}</a></li>
                                    </#list>
                                </#if>
                            </ul>
                        </li>
                    </#list>
                </ul>
            </li>
        <#else>
            <li class="${nav_item_class}">
                <a href="${nav_item.getURL()}" ${nav_item.getTarget()}>
                    <span>${nav_item.getName()}</span>
                </a>
            </li>
        </#if>

    </#list>
    </ul>
</nav>

and the bootstrap mega menu example I followed is this.

In the end you need a few css changes to adapt to your colors and taste.