JPress多级导航菜单的开发设置

JPress之家发布 开发教程 2016-10-14 2174

全部系列教程目录:教程目录

最近开发主题的人渐渐多了起来,多级导航菜单始终是个过不去的坑,所以今天特意发布这篇教程,希望能帮到大家。

说到JPress二级、三级菜单,技术含量并不高,也不需要特别定制后台代码,只是没有人捅破那层纸。

好了,不说废话了!先贴代码,代码一贴大家基本就明白了!

<@menus >
       	<#list menus as menu>
       	  <#if !menu.parentId?? >
       		<li class="navto-${menu.id}">
		       		<a href="${menu.text!}">${menu.title!}<#if menu.childList??> <i class="fa fa-angle-down"></i></#if></a>
		       		<#if menu.childList??>
		       		  <ul class="sub-menu">
		       		      <#list menu.childList as two>
		       		        <li class="navto-${two.id} <#if two.childList??> hasThree </#if>"><a href="${two.text!}">${two.title!}</a>
	                        <#if two.childList??>
	                            <ul class="three-menu">
	                                <#list two.childList as three>
	                                   <li class="navto-${three.id}"><a href="${three.text!}">${three.title!''}</a></li>
	                                </#list>
	                            </ul>
	                        </#if>
		       		      </#list>
		       		  </ul>
		       		</#if>
       		</li>   
       	  </#if>
       	</#list>
     </@menus>

这段代码支持jpress设置的三级菜单,说到原理,其实就是在加载当前菜单的时候判断是否还有下一级菜单,然后根据判断结果分配不同的样式,相信这段代码稍微看看就能明白了。