dedecms是支持二级菜单了,但是我们需要分开来做,现在我们稍加改一下就可以实现调用时不需要知道ID即可根据大类小子类了,具体如下.

例子1,修改channelartlist.lib.php,代码如下:

1. if($typeid==0 || $typeid=='top') { 
2.         $tpsql = " reid=0 AND ispart<>2 AND ishidden<>1 AND channeltype>0 "; 
3.     } 
4. //修改为: 
5. if($typeid=='tops') { 
6.         $tpsql = " reid=0 AND ispart<>2 AND ishidden<>1 "; 
7.     }elseif($typeid==0 || $typeid=='top') { 
8.         $tpsql = " reid=0 AND ispart<>2 AND ishidden<>1 AND channeltype>0 "; //开源软件:phpfensi.com 
9.     } 

然后页面调用如下代码:

1. {dede:channelartlist typeid='tops' row=10} 
2.      <li> 
3.         <a href="{dede:field.typeurl/}">{dede:field.typename/}</a> 
4.                 <ul> 
5.                   {dede:channel row='10'} 
6.                         <li><a href='[field:typeurl/]' [field:rel/]>[field:typename/]</a></li> 
7.                     {/dede:channel} 
8.         </ul> 
9.      </li> 
10. {/dede:channelartlist} 

例子2,首先在你的css里面加入如下代码:

1. *            
2. {           
3.     PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px 
4. }           
5. A {           
6.     text-decoration:none;           
7. }           
8. DIV {           
9.     WORD-WRAP: break-word; WORD-BREAK: break-all 
10. }           
11. LI {           
12.     LIST-STYLE-TYPE: none; LIST-STYLE-IMAGE: none 
13. }           
14. .nav {           
15.     MARGIN: 7px auto 0px; WIDTH: 968px; OVERFLOW: hidden 
16. }           
17. .nav LI {           
18.     FLOAT: left; HEIGHT: 48px 
19. }           
20. .nav_left {           
21.     WIDTH: 8px; BACKGROUND: url(img/s02.gif) no-repeat 
22. }           
23. .nav_center {           
24.     WIDTH: 952px; BACKGROUND: url(img/s03.gif) repeat-x; FONT-SIZE: 16px 
25. }           
26. .nav_right {           
27.     WIDTH: 8px; BACKGROUND: url(img/s04.gif) no-repeat 
28. }           
29. .nav_li_li {           
30.     PADDING-RIGHT: 2px; BACKGROUND: url(img/s05.gif) no-repeat right top 
31. }           
32. .nav A {           
33.     PADDING-BOTTOM: 0px; LINE-HEIGHT: 42px; PADDING-LEFT: 49px; PADDING-RIGHT: 49px; FLOAT: left; HEIGHT: 48px; COLOR: #fff; PADDING-TOP: 0px 
34. }           
35. .nav .nav_on {           
36.     BACKGROUND: url(img/s06.jpg) no-repeat center top; TEXT-DECORATION: none 
37. }           
38. .nav A:hover {           
39.     BACKGROUND: url(img/s06.jpg) no-repeat center top; TEXT-DECORATION: none 
40. }           
41. .nav_li_li DIV {           
42.     Z-INDEX: 1000; BORDER-BOTTOM: #5970b2 1px solid; POSITION: absolute; BORDER-LEFT: #5970b2 1px solid; PADDING-BOTTOM: 5px; MARGIN-TOP: 42px; PADDING-LEFT: 5px; WIDTH: 190px; PADDING-RIGHT: 5px; ZOOM: 1; BACKGROUND: #ffffff 0px 0px; VISIBILITY: hidden; BORDER-TOP: #5970b2 1px solid; BORDER-RIGHT: #5970b2 1px solid; PADDING-TOP: 5px 
43. }           
44. .nav_li_li DIV A {           
45.     POSITION: relative; TEXT-ALIGN: center; PADDING-BOTTOM: 5px; LINE-HEIGHT: 18px; MARGIN: 0px; PADDING-LEFT: 5px; WIDTH: 80px; PADDING-RIGHT: 5px; DISPLAY: block; WHITE-SPACE: nowrap; BACKGROUND: #ffffff 0px 0px; HEIGHT: 18px; COLOR: #2875de; FONT-SIZE: 12px; TEXT-DECORATION: none; PADDING-TOP: 5px 
46. }           
47. .nav_li_li DIV A:hover {           
48.     BACKGROUND: #49a3ff; COLOR: #fff 
49. } 

调用js,记得修改路径,代码如下:

<SCRIPT  type="text/javascript" src="foot.js"></SCRIPT>

dedecms标签实现的方法,代码如下:

1. <UL class=nav>           
2.   <LI class=nav_left></LI>           
3.   <LI class=nav_center>           
4.   <UL>           
5.     <LI class=nav_li_li><A  href="{dede:global.cfg_cmsurl/}/">首页</A></LI>           
6.     {dede:channelartlist  typeid='top' row='2'}           
7.     <LI class="nav_li_li">           
8.     <A onmouseover="mopen('{dede:field.typeid/}')"   onmouseout=mclosetime() href="{dede:field.typeurl/}">{dede:field.typename/}</A>            
9.     <DIV id={dede:field.typeid/} onmouseover=mcancelclosetime() onmouseout=mclosetime()>           
10.     <A href="{dede:field.typeurl/}">全部分类</A>           
11.     {dede:channel type='son' }           
12.     <A href="[field:typeurl/]">[field:typename/]</A>           
13. {/dede:channel}           
14.  </DIV></LI>           
15.     </UL></LI>           
16.   <LI class=nav_right></LI></UL> 

js代码,代码如下:

1. var timeout=500; 
2. var closetimer=0; 
3. var ddmenuitem=0; 
4. function mopen(id) 
5. { 
6.  mcancelclosetime(); 
7.  if(ddmenuitem)ddmenuitem.style.visibility='hidden'; 
8.  ddmenuitem=document.getElementById(id); 
9.  ddmenuitem.style.visibility='visible'; 
10. } 
11. function mclose() 
12. { 
13.  if(ddmenuitem)ddmenuitem.style.visibility='hidden'; 
14. } 
15. function mclosetime() 
16. { 
17.  closetimer=window.setTimeout(mclose,timeout); 
18. } 
19. function mcancelclosetime() 
20. { 
21.  if(closetimer) 
22. { 
23.   window.clearTimeout(closetimer); 
24.   closetimer=null; 
25.  } 
26. } 
27. document.onclick=mclose;

Tags: dedecms二级菜单 dedecms下拉菜单

分享到：