使用freemarker构建Liferay 7超级菜单(多级菜单)

时间:2017-09-14 08:41:13

标签: drop-down-menu freemarker liferay-7 megamenu

我想在liferay 7中使用freemarker语言构建一个超级菜单(多级菜单)。我使用的主题只打印菜单,但不是多级。

如何更改代码并添加我的类和js?

代码是:

<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>

1 个答案:

答案 0 :(得分:0)

我设法用freemarker语言打印链接:

我创建了custom_navigation.ftl文件,并使用以下代码将其添加到portal_normal.ftl中:

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

custom_navigation.ftl代码:

    <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>

我所遵循的bootstrap mega菜单示例是this

最后,您需要进行一些css更改以适应您的颜色和品味。

相关问题