织梦二级导航制作 DEDE下拉菜单制作方法

在制作DEDECMS织梦网站的模板和学习仿站教程时，特别头痛的莫过于去制作网站的多级菜单导航了，很多时候制作出来的下拉菜单导航很多都会移位，使用固定的二级菜单导航代码，又不能自动调用网站的内容。

学习DedeCMS教程，我们就可以使用下面的织梦网站下拉菜单导航代码就可以轻松制作出动态调用后台菜单的导航了。此方法已由学做网站论坛实测可用，学建网站学员在学习网站建设教程时，可以放心使用。

方法/步骤

1. 下载DEDECMS二级下拉菜单导航必需要JS文件jquery-xl.js。下载地址：https://pan.baidu.com/s/1eQH7EP8
2. 将下载下来的jquery-xl.js通过FTP软件上传到DEDECMS程序根目录的images文件夹。如图：
3. 打开自己DEDECMS网站的头部文件head.htm，在代码顶部放上以下的代码，用于调用jquery-xl.js文件。

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

   

4. 使用以下的代码替换原来调用导航菜单的代码，这个代码也是在head.htm中。（原来的代码只会调用一级菜单栏目）

   
   <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="/">网站首页</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代码，用于控制下拉二级菜单导航的样式。可以直接放在head.htm顶部。（CSS样式可以根据自己网站进行调整。）

   
   <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. 代码部分结束了。接下来，在自己网站后台栏目里创建几个子栏目。
7. 最后去生成一下整个网站，清除一下网站缓存。就可以发现自己的DEDECMS网站已经拥有了二级下拉菜单导航了。