DedeCMS二级导航菜单如何实现

发布时间:2019-10-13编辑:脚本学堂
本文介绍下,dedecms系统中,实现二级导航菜单的方法,分享一个实例代码,帮助大家学习与掌握dedecms二级导航菜单的实现方法,有需要的朋友参考下。

本节内容:
dedecms二级导航菜单的实现方法。

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

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

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

例子:
 

复制代码 代码示例:
<!-- 一级菜单 --> 
 <ul class="sf-menu" id="nav"> 
        <li> 
          <a href='{dede:global.cfg_cmsurl/}/'>首 页</a> 
        </li> 
 
           {dede:channel type='top' currentstyle="<li id='item~id~' class='current'><a href='~typelink~' ~rel~>~typename~</a></li>"} 
           <li id="item[field:id/]"><a 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 `#@__arctype` AS a INNER JOIN `#@__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 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 href="/press/">首 页</a> </li> 
  <li id="item1" class="sf-parent"><a href="/press/a/shiyanshigaikuang/shiyanshijieshao">实验室概况<span class="sf-arrow"></span></a> 
    <ul style="left: auto; z-index: 1007; display: none;"> 
      <li><a href="/press/a/shiyanshigaikuang/shiyanshijieshao">实验室介绍</a></li> 
      <li><a href="/press/a/shiyanshizhuren">实验室主任</a></li> 
      <li><a href="/press/a/yanjiufangxiang">研究方向</a></li> 
      <li><a href="/press/a/zuzhijiagou">组织架构</a></li> 
    </ul> 
  </li> 
  <li id="item2" class="sf-parent"><a href="/press/a/keyanxiangmu/">科研项目<span class="sf-arrow"></span></a> 
    <ul style="left: auto; z-index: 1002; display: none;"> 
      <li><a href="/press/a/hengxiangxiangmu">横向项目</a></li> 
      <li><a href="/press/a/zongxiangxiangmu">纵向项目</a></li> 
    </ul> 
  </li> 
</ul>

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