7×24小时服务热线 171 9866 1244
栏目列表
推荐内容

织梦CMS v5.7 完美实现导航条下拉二级菜单

时间:2016-01-15 15:35来源:未知 作者:admin 点击:
一、引言 好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系! 按照我的步骤走!记住一步也不能错哦! 二、实现过程 1、首先: 将下面这段代

一、引言

好多人都问,织梦的下拉导航怎么做呢?其实很简单!即使你对代码一点也不熟悉,没关系!

按照我的步骤走!记住一步也不能错哦!

二、实现过程

1、首先:

将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓啦!自己看着办!)

[html] view plaincopy
 
  1. <!-- //二级子类下拉菜单,考虑SEO原因放置于底部 -->  
  2.    <script type='text/javascript' src='{dede:global.cfg_cmsurl/}/images/js/dropdown.js'></script>  
  3.    {dede:channelartlist typeid='top' cacheid='channelsonlist'}  
  4.    <ul id="dropmenu{dede:field.typeid/}" class="dropMenu">  
  5.        {dede:channel type='son' noself='yes'}  
  6.        <li><a href="[field:typelink/]">[field:typename/]</a></li>  
  7.        {/dede:channel}  
  8.    </ul>  
  9.    {/dede:channelartlist}  
  10.    <script type="text/javascript">cssdropdown.startchrome("navMenu")</script>  

以上代码可以看出,二级子类下拉菜单是由dropdown.js控制的,我们来看dropdown.js文件:

由以上的cssdropdown.startchrome("navMenu"),可以看出我们调用的是  startchrome:function()

[javascript] view plaincopy
 
  1. var cssdropdown={  
  2. disappeardelay: 250,   
  3. disablemenuclick: false,   
  4. enableswipe: 1,   
  5. enableiframeshim: 1,   
  6. dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,  
  7.   
  8. getposOffset:function(what, offsettype){  
  9. var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;  
  10. var parentEl=what.offsetParent;  
  11. while (parentEl!=null){  
  12. totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;  
  13. parentEl=parentEl.offsetParent;  
  14. }  
  15. return totaloffset;  
  16. },  
  17.   
  18. swipeeffect:function(){  
  19. if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){  
  20. this.bottomclip+=10+(this.bottomclip/10)   
  21. this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"  
  22. }  
  23. else  
  24. return  
  25. this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)  
  26. },  
  27.   
  28. showhide:function(obj, e){  
  29. if (this.ie || this.firefox)  
  30. this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"  
  31. if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){  
  32. if (this.enableswipe==1){  
  33. if (typeof this.swipetimer!="undefined")  
  34. clearTimeout(this.swipetimer)  
  35. obj.clip="rect(0 auto 0 0)"   
  36. this.bottomclip=0  
  37. this.swipeeffect()  
  38. }  
  39. obj.visibility="visible"  
  40. }  
  41. else if (e.type=="click")  
  42. obj.visibility="hidden"  
  43. },  
  44.   
  45. iecompattest:function(){  
  46. return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body  
  47. },  
  48.   
  49. clearbrowseredge:function(obj, whichedge){  
  50. var edgeoffset=0  
  51. if (whichedge=="rightedge"){  
  52. var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15  
  53. this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth  
  54. if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)    
  55. edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth  
  56. }  
  57. else{  
  58. var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset  
  59. var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18  
  60. this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight  
  61. if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){   
  62. edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight  
  63. if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure)   
  64. edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge  
  65. }  
  66. }  
  67. return edgeoffset  
  68. },  
  69.   
  70. dropit:function(obj, e, dropmenuID){  
  71. if (this.dropmenuobj!=null)   
  72.     this.dropmenuobj.style.visibility="hidden"   
  73. this.clearhidemenu()  
  74. if (this.ie||this.firefox){  
  75. obj.onmouseout=function(){cssdropdown.delayhidemenu()}  
  76. obj.onclick=function(){return !cssdropdown.disablemenuclick}   
  77. this.dropmenuobj=document.getElementById(dropmenuID)  
  78. if(!this.dropmenuobj) return;  
  79. this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}  
  80. this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}  
  81. this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}  
  82. this.showhide(this.dropmenuobj.style, e)  
  83. this.dropmenuobj.x=this.getposOffset(obj, "left")  
  84. this.dropmenuobj.y=this.getposOffset(obj, "top")  
  85. this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"  
  86. this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"  
  87. this.positionshim()   
  88. }  
  89. },  
  90.   
  91. positionshim:function(){   
  92. if (this.enableiframeshim && typeof this.shimobject!="undefined"){  
  93. if (this.dropmenuobj.style.visibility=="visible"){  
  94. this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"  
  95. this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"  
  96. this.shimobject.style.left=this.dropmenuobj.style.left  
  97. this.shimobject.style.top=this.dropmenuobj.style.top  
  98. }  
  99. this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"  
  100. }  
  101. },  
  102.   
  103. hideshim:function(){  
  104. if (this.enableiframeshim && typeof this.shimobject!="undefined")  
  105. this.shimobject.style.display='none'  
  106. },  
  107.   
  108. contains_firefox:function(a, b) {  
  109. while (b.parentNode)  
  110. if ((b = b.parentNode) == a)  
  111. return true;  
  112. return false;  
  113. },  
  114.   
  115. dynamichide:function(e){  
  116. var evtobj=window.event? window.event : e  
  117. if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))  
  118. this.delayhidemenu()  
  119. else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))  
  120. this.delayhidemenu()  
  121. },  
  122.   
  123. delayhidemenu:function(){  
  124. this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'; cssdropdown.hideshim()",this.disappeardelay)   
  125. },  
  126.   
  127. clearhidemenu:function(){  
  128. if (this.delayhide!="undefined")  
  129. clearTimeout(this.delayhide)  
  130. },  
  131.   
  132. startchrome:function(){  
  133. for (var ids=0; ids<arguments.length; ids++){  
  134. var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")  
  135. for (var i=0; i<menuitems.length; i++){  
  136. if (menuitems[i].getAttribute("rel")){  
  137. var relvalue=menuitems[i].getAttribute("rel")  
  138. menuitems[i].onmouseover=function(e){  
  139. var event=typeof e!="undefined"? e : window.event  
  140. cssdropdown.dropit(this,event,this.getAttribute("rel"))  
  141. }  
  142. }  
  143. }  
  144. }  
  145. if (window.createPopup && !window.XmlHttpRequest){   
  146. document.write('<IFRAME id="iframeshim"  src="" style="display: none; left: 0; top: 0; z-index: 90; position: absolute; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')  
  147. this.shimobject=document.getElementById("iframeshim")   
  148. }  
  149. }  
  150.   
  151. }  


由上可以看出,var cssdropdown变量中有多个函数:

getposOffset:function(what, offsettype)

swipeeffect:function()

showhide:function(obj, e) 

iecompattest:function()

clearbrowseredge:function(obj, whichedge)

dropit:function(obj, e, dropmenuID)

positionshim:function()

hideshim:function()

dynamichide:function(e)

delayhidemenu:function()

clearhidemenu:function()

startchrome:function()

 

2、然后,奇迹就出现了,跟新一下!会发现导航栏已经出现下拉菜单了,只是背景是透明的,原因是没有背景图片。是不是很简单呢??

3、可是头疼的是,这个下拉菜单是透明的!咋么办??

接着来你需要把DedeCMS5.7程序文件夹\dede\img里的mmenubg.gif(绿色背景图片,适用于绿色主题模板)或者DedeCMS5.5程 序文件夹\templets\images里的mmenubg.gif(蓝色背景图片,适用于蓝色主题模板)复制到DedeCMS5.6程序文件夹 /templets/default/images下面

现在你再看一下效果,呵呵,导航栏是不是已经出现熟悉的下拉菜单了:

4、此时,你想要的效果基本上已经完成了!如果你还想做其他的设置,比如调整位置,呵呵。。。只需要去/templets/default/style/dedecms.css

里你可以ctrl+f   寻找 .dropMenu 没错就是他控制着呢?

[css] view plaincopy
 
  1. /*-------- 下拉菜单 --------------*/  
  2. .dropMenu {  
  3.     position:absolute;  
  4.     top: 0;  
  5.     z-index:100;  
  6.     width120px;  
  7.     visibilityhidden;  
  8.     filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA, direction=135, strength=4);  
  9.     margin-top-1px;  
  10.     border1px solid #93E1EB;  
  11.     border-top0px solid #3CA2DC;  
  12.     background-color#FFF;  
  13.     background:url(../images/mmenubg.gif);  
  14.     padding-top:6px;  
  15.     padding-bottom:6px;  
  16. }  
  17.   
  18. .dropMenu li {  
  19.     margin-top:2px;  
  20.     margin-bottom:4px;  
  21.     padding-left:6px;  
  22. }  
  23. .dropMenu a {  
  24.     widthauto;  
  25.     displayblock;  
  26.     colorblack;  
  27.     padding2px 0 2px 1.2em;  
  28. }  
  29. * html .dropMenu a {  
  30.     width100%;  
  31. }  
  32. .dropMenu a:hover {  
  33.     color:red;  
  34.     text-decorationunderline;  
  35. }  


 

如果只是调整宽度,只用修改 :

width: 100px;/*------ //原来参数是120-,如果二级标题字数少,还可以把参数调整到80,乃至是60--------*/

在此,就不多说了,如果看不懂,希望去学一学css的知识!

三、原理

1、

我们来看默认模板index.htm中有:

[html] view plaincopy
 
  1. <!-- /flink -->  
  2. <div id="footAD" style="margin:10px auto; width:726px">{dede:myad name='indexfooterAD'/}</div>  
  3. {dede:include filename="footer.htm"/}  
  4. <!-- /footer -->  
  5. </body>  
  6. </html>  


它其实就是链接到了footer.htm中,而在footer.htm的所有内容为:

[html] view plaincopy
 
  1. <!-- //底部模板 -->  
  2. <div class="footer w960 center mt1 clear">  
  3.     <!--   
  4.         为了支持织梦团队的发展,请您保留织梦内容管理系统的链接信息.  
  5.         我们对支持织梦团队发展的朋友表示真心的感谢!织梦因您更精彩!  
  6.     -->  
  7.     <div class="footer_left"></div>  
  8.     <div class="footer_body">  
  9.     <p class="powered">      
  10.         Powered by <a href="http://www.dedecms.com" title="织梦内容管理系统(DedeCms)--国内最专业的PHP网站管理系统,轻松建站的首选利器。" target="_blank"><strong>DedeCMS_{dede:global.cfg_version/}</strong></a> © 2004-2011 <a href="http://www.desdev.cn/" target="_blank">DesDev</a> Inc.<br /><div class="copyright">{dede:global.cfg_powerby/}  {dede:global.cfg_beian/}</div></p>          
  11. <!-- /powered -->  
  12.    </div>  
  13.    <div class="footer_right"></div>  
  14. </div>  


以上代码只是实现了:

 

2、

index如何引用到head.htm文件

在系统默认模板中的index.htm中有:

[html] view plaincopy
 
  1. </head>  
  2. <body class="index">  
  3. {dede:include filename="head.htm"/}  
  4. <!-- /header -->  

 

 

在我的模板中的index.htm中有:

[html] view plaincopy
 
  1. </head>  
  2. <body class="index">  
  3. <div class="w960 center">  
  4.     <!-- /header -->  
  5.     {dede:include filename="head_i.htm"/}  
  6.     <!-- /header -->  


另一模板是:

[html] view plaincopy
 
  1. </HEAD>  
  2. <!-- header -->  
  3. <BODY class=index>{dede:include filename="head.htm"/}   
  4. <!-- /header -->  

 

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
关闭
171 9866 1244 工作日:9:00-18:00
点击这里给我发消息

邮箱:
abit@design.com