導(dǎo)讀:DEDE技術(shù)DEDE技術(shù)★DedeCMS二級(jí)導(dǎo)航菜單如何實(shí)現(xiàn)★簡(jiǎn)介: 本節(jié)內(nèi)容：DedeCMS二級(jí)導(dǎo)航菜單的實(shí)現(xiàn)方法。 DedeCMS 的 channel 標(biāo)簽不支持嵌套，不能在模板上織夢(mèng)模板安裝織夢(mèng)模板免費(fèi)。

 本節(jié)內(nèi)容：

DedeCMS二級(jí)導(dǎo)航菜單的實(shí)現(xiàn)方法。   DedeCMS 的 channel 標(biāo)簽不支持嵌套，不能在模板上直接通過標(biāo)簽來實(shí)現(xiàn)多級(jí)導(dǎo)航菜單。   有的同學(xué)通過修改 channel 標(biāo)簽來實(shí)現(xiàn)。   我的方法不需要修改標(biāo)簽庫，主要思路是用JS構(gòu)造下級(jí)菜單，把下級(jí)菜單的HTML注入到上級(jí)DOM。   例子：   代碼示例: <!-- 一級(jí)菜單 -->    <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>   <!-- 構(gòu)造二級(jí)菜單 -->   <script type="text/javascript">   var cmspath = '{dede:global.cfg_cmspath/}';   var s = [], menu = [];   // SQL讀出全部二級(jí)菜單項(xiàng)   {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ù)父級(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)});   }   // 構(gòu)造二級(jí)菜單的HTML，注入到一級(jí)菜單項(xiàng)   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 標(biāo)簽讀出一級(jí)菜單，使用 “item+ID” 作為菜單項(xiàng)目的id，以后注入二級(jí)菜單的HTML時(shí)會(huì)用到。 第二步，使用SQL取出二級(jí)菜單項(xiàng)目。在模板上使用SQL不是個(gè)好主意，但也是不得已而為之。 然后，使用Js代碼，從代碼當(dāng)中穿插的注釋也能看明白。   最終生成的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">實(shí)驗(yàn)室概況<span class="sf-arrow">dede下瓻模板下載</span></a>       <ul style="left: auto; z-index: 1007; display: none;">         <li><a href="/press/a/shiyanshigaikuang/shiyanshijieshao">實(shí)驗(yàn)室介紹</a></li>         <li><a href="http://www.genban.org/css/">實(shí)驗(yàn)室主任</a></li>         <li><a href="/press/a/yanjiufangxiang">研究方向</a></li>         <li><a href="/press/a/zuzhijiagou">組織架構(gòu)</a></li>       </ul>     </li>     <li id="item2" class="sf-parent"><a href="http://www.genb織夢(mèng)模板下載an.org/">科研項(xiàng)目<span class="sf-arrow"></span></a>       <ul style="left: auto; z-index: 1002; display: none;">         <li><a href="/press/a/hengxiangxiangmu">橫向項(xiàng)目</a></li>         <li><a href="http://www.genban.org/seo/">縱向項(xiàng)目</a></li>       </ul>     </li>   </ul> 至此，我們就完成dede模板免費(fèi)dedecms中二級(jí)導(dǎo)航菜單的制作，希望對(duì)大家有所幫助。  相關(guān)織夢(mèng)模板安裝織夢(mèng)模板免費(fèi)。

關(guān)鍵詞標(biāo)簽: CMS 菜單 如何實(shí)現(xiàn)