各类知识收集,PHP技术分享与解决方案各类知识收集,PHP技术分享与解决方案各类知识收集,PHP技术分享与解决方案

Str Tom,为分享PHP技术和解决方案,贡献一份自己的力量!
收藏本站(不迷路),每天更新好文章!
当前位置:首页 > CMS教程 > dedecms

DedeCMS二级导航菜单如何实现

管理员 2014-12-04
dedecms
149

 本节内容:

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 `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 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="http://www.genban.org/css/">实验室主任</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="http://www.genban.org/">科研项目<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="http://www.genban.org/seo/">纵向项目</a></li>      </ul>    </li>  </ul>至此,我们就完成dedecms中二级导航菜单的制作,希望对大家有所帮助。  本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

扫码关注

qrcode

QQ交谈

回顶部