DedeCMS二级导航菜单的实现

最新推荐文章于 2023-09-21 15:04:31 发布

afeiqiang

最新推荐文章于 2023-09-21 15:04:31 发布

阅读量3.5k

点赞数 1

分类专栏： php 文章标签： menu class sql html join url

本文链接：https://blog.csdn.net/afeiqiang/article/details/7964916

版权

php 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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>