在制作DEDECMS織夢(mèng)網(wǎng)站的模板時(shí)，最頭痛的莫過(guò)于去制作網(wǎng)站的多級(jí)菜單導(dǎo)航了，很多時(shí)候制作出來(lái)的下拉菜單導(dǎo)航很多都會(huì)移位，使用固定的二級(jí)菜單導(dǎo)航代碼，又不能自動(dòng)調(diào)用網(wǎng)站的內(nèi)容。

學(xué)習(xí)DedeCMS教程，我們就可以使用下面的織夢(mèng)網(wǎng)站下拉菜單導(dǎo)航代碼就可以輕松制作出動(dòng)態(tài)調(diào)用后臺(tái)菜單的導(dǎo)航了。此方法已由學(xué)做網(wǎng)站論壇實(shí)測(cè)可用，學(xué)建網(wǎng)站學(xué)員可以放心使用。

方法/步驟

1. 下載DEDECMS二級(jí)下拉菜單導(dǎo)航必需要JS文件jquery-xl.js。下載地址：http://pan.baidu.com/s/1eQH7EP8
2. 將下載下來(lái)的jquery-xl.js通過(guò)FTP軟件上傳到DEDECMS程序根目錄的images文件夾。如圖：
3. 打開(kāi)自己DEDECMS網(wǎng)站的頭部文件head.htm，在代碼頂部放上以下的代碼，用于調(diào)用jquery-xl.js文件。

   
   <script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/jquery-xl.js'></script>
   
   

   

4. 使用以下的代碼替換原來(lái)調(diào)用導(dǎo)航菜單的代碼，這個(gè)代碼也是在head.htm中。（原來(lái)的代碼只會(huì)調(diào)用一級(jí)菜單欄目）

   
   <div class="base-nav">
   
   ? <ul id="ermeau" class="wrap clearfix">
   
   ?   <li {dede:field name=typeid runphp="yes"}(@me=="")? @me=" class='current'":@me="";{/dede:field}><a href="/">網(wǎng)站首頁(yè)</a></li>
   
   
   
   ?       {dede:channelartlist row='9' typeid='top'}
   
   
   
   ?       <li class="nLi"> <a {dede:field name='currentstyle'/} href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
   
   
   
   ?          <ul class="sub">
   
   
   
   ?           {dede:channel type='son' noself='yes'}
   
   
   
   ?           <li> <a href="[field:typelink/]">[field:typename/]</a></li>
   
   
   
   ?           {/dede:channel}
   
   
   
   ?         </ul>
   
   
   
   ?       </li>
   
   
   
   ?       {/dede:channelartlist} 
   
   
   
   ?   <li class="last"></li>
   
   ? </ul>
   
   </div>
   
   
   
   <script type="text/javascript">
   
   var topMenuNum = 0;
   
   $("#ermeau li").hover(
   
   function(){
   
   topMenuNum++;
   
   $(this).attr("id","kindMenuHover"+topMenuNum);
   
   $("#kindMenuHover" + topMenuNum + " > ul").show();
   
   $(this).parent().addClass("hover");
   
   },
   
   function(){
   
   $("#"+$(this).attr("id")+" > ul").hide();
   
   $(this).attr("id","");
   
   $(this).parent().removeClass("hover");
   
   }
   
   );
   
   </script>
   
   

5. 最后，還要在放幾句CSS代碼，用于控制下拉二級(jí)菜單導(dǎo)航的樣式�？梢灾苯臃旁趆ead.htm頂部。（CSS樣式可以根據(jù)自己網(wǎng)站進(jìn)行調(diào)整。）

   
   <style>
   
   /* Base-nav */
   
   .base-nav{background-color:#ec1a6c;width:100%;padding:15px 0;height:30px;}
   
   .base-nav ul{}
   
   .base-nav li,.base-nav h3,.base-nav .cont,.base-nav p a{float:left;display:inline;}
   
   .base-nav li{float:left;position:relative; height:30px; line-height:30px; margin-right:16px;}
   
   .base-nav li.current,.base-nav li:hover{background:#B73551; }
   
   .base-nav li.current a,.base-nav li:hover a{color:#fff;}
   
   .base-nav a{display:block;font-size:16px;color:#f8d3d9; padding:0 10px; line-height:30px;height:30px;}
   
   #ermeau>li{position:relative}
   
   .base-nav #ermeau ul {display: none}
   
   .base-nav #ermeau ul li {   background: #ec1a6c;    border-top: 1px solid #b73551;    padding: 5px 0;    width: 86px;    text-align: center; overflow: hidden;
   
   ?white-space: nowrap;}
   
   .sub li:hover{background:#b73551;}
   
   </style>
   
   

6. 代碼部分結(jié)束了。接下來(lái)，在自己網(wǎng)站后臺(tái)欄目里創(chuàng)建幾個(gè)子欄目。
7. 最后去生成一下整個(gè)網(wǎng)站，清除一下網(wǎng)站緩存。就可以發(fā)現(xiàn)自己的DEDECMS網(wǎng)站已經(jīng)擁有了二級(jí)下拉菜單導(dǎo)航了。

標(biāo)簽： isp 代碼 建網(wǎng)站 網(wǎng)站的模板 學(xué)建網(wǎng)站 制作網(wǎng)站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。