Build Liferay freemarker가있는 7 메가 메뉴 (다단계 메뉴)

Question

freemarker 언어로 liferay 7에 메가 메뉴 (다단계 메뉴)를 만들고 싶습니다. 내가 사용하는 테마는 메뉴를 인쇄하지만 다단계가 아닙니다.

어떻게 코드를 변경하고 클래스와 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> 

Answer 1

나는 프리 마커 언어에의 링크를 인쇄 관리 :

: 나는 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> 

그리고 제가 따르는 부트 스트랩 메가 메뉴 예는 this입니다.

결국 색상과 취향에 맞게 CSS를 약간 변경해야합니다.