本節(jié)內容：
DedeCMS二級導航菜單的實現(xiàn)方法。
DedeCMS 的 channel 標簽不支持嵌套，不能在模板上直接通過標簽來實現(xiàn)多級導航菜單。
有的同學通過修改 channel 標簽來實現(xiàn)。
我的方法不需要修改標簽庫，主要思路是用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}
// 根據(jù)父級菜單分類
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中二級導航菜單的制作，希望對大家有所幫助。
