DedeCMS二级导航菜单如何如何实现

DedeCMS二级导航菜单的实现方法。

 

DedeCMS 的 channel 标签不支持嵌套，不能在模板上直接通过标签来实现多级导航菜单。

 

有的同学通过修改 channel 标签来实现。

 

我的方法不需要修改标签库，主要思路是用JS构造下级菜单，把下级菜单的HTML注入到上级DOM。

 

例子：

 

代码示例:

<!-- 一级菜单 -->  

 <ul class="sf-menu" id="nav">  

        <li>  

          <a rel="nofollow noopener noreferrer" href='{dede:global.cfg_cmsurl/}/'>首 页</a>  

        </li>  

  

           {dede:channel type='top' currentstyle="<li id='item~id~' class='current'><a rel="nofollow noopener noreferrer" href='~typelink~' ~rel~>~typename~</a></li>"}  

           <li id="item[field:id/]"><a rel="nofollow noopener noreferrer" href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li>  

           {/dede:channel}  

     </ul>  

<!-- 构造二级菜单 -->  

<script type="text/javascript">  

var cmspath = '{dede:global.cfg_cmspath/}';  

var s = [], menu = [];  

// SQL读出全部二级菜单项  

{dede:sql sql="SELECT b.* FROM `dede_arctype` AS a INNER JOIN `dede_arctype` AS b ON b.reid = a.id AND a.reid = 0   

               WHERE b.ishidden<>1 order by b.reid, b.sortrank asc " db='default'}  

s[[field:id/]] = [[field:id/], [field:reid/], '[field:typename/]', '[field:typedir/]'];  

{/dede:sql}  

// 根据父级菜单分类  

for (var i in s){  

     var p = s[i];  

     if (!menu[p[1]]){  

          menu[p[1]] = [];  

     }  

     menu[p[1]].push({ id: p[0], name: p[2], url: p[3].replace(/\{cmspath\}/, cmspath)});  

}  

// 构造二级菜单的HTML，注入到一级菜单项  

for (var j in menu){  

     var str = '<ul>';  

     for (var k in menu[j]){  

          var submenu = menu[j][k];  

          str += '<li><a rel="nofollow noopener noreferrer" href="'+ submenu.url + '">' + submenu.name + '</a></li>';  

     }  

     str += '</ul>';  

     $('#item'+j).append(str);  

}  

</script> 

 

首先，channel 标签读出一级菜单，使用 “item+ID” 作为菜单项目的id，以后注入二级菜单的HTML时会用到。

第二步，使用SQL取出二级菜单项目。在模板上使用SQL不是个好主意，但也是不得已而为之。

然后，使用Js代码，从代码当中穿插的注释也能看明白。

 

最终生成的HTML类似这样，代码：

 

代码示例:

 

<ul id="nav" class="sf-menu">  

  <li> <a rel="nofollow noopener noreferrer" href="/press/">首 页</a> </li>  

  <li id="item1" class="sf-parent"><a rel="nofollow noopener noreferrer" href="/press/a/shiyanshigaikuang/shiyanshijieshao">实验室概况<span class="sf-arrow"></span></a>  

    <ul style="left: auto; z-index: 1007; display: none;">  

      <li><a rel="nofollow noopener noreferrer" href="/press/a/shiyanshigaikuang/shiyanshijieshao">实验室介绍</a></li>  

      <li><a rel="nofollow noopener noreferrer" href="http://www.genban.org/css/">实验室主任</a></li>  

      <li><a rel="nofollow noopener noreferrer" href="/press/a/yanjiufangxiang">研究方向</a></li>  

      <li><a rel="nofollow noopener noreferrer" href="/press/a/zuzhijiagou">组织架构</a></li>  

    </ul>  

  </li>  

  <li id="item2" class="sf-parent"><a rel="nofollow noopener noreferrer" href="http://www.genban.org/">科研项目<span class="sf-arrow"></span></a>  

    <ul style="left: auto; z-index: 1002; display: none;">  

      <li><a rel="nofollow noopener noreferrer" href="/press/a/hengxiangxiangmu">横向项目</a></li>  

      <li><a rel="nofollow noopener noreferrer" href="http://www.genban.org/seo/">纵向项目</a></li>  

    </ul>  

  </li>  

</ul>

至此，我们就完成dedecms中二级导航菜单的制作，希望对大家有所帮助。