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

一、引言

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

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

二、实现过程

1、首先：

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

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

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

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

var cssdropdown={
disappeardelay: 250,
disablemenuclick: false,
enableswipe: 1,
enableiframeshim: 1,
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

swipeeffect:function(){
if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
this.bottomclip+=10+(this.bottomclip/10)
this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
}
else
return
this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
},

showhide:function(obj, e){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (this.enableswipe==1){
if (typeof this.swipetimer!="undefined")
clearTimeout(this.swipetimer)
obj.clip="rect(0 auto 0 0)"
this.bottomclip=0
this.swipeeffect()
}
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure)
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null)
	this.dropmenuobj.style.visibility="hidden"
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
obj.onclick=function(){return !cssdropdown.disablemenuclick}
this.dropmenuobj=document.getElementById(dropmenuID)
if(!this.dropmenuobj) return;
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim()
}
},

positionshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
this.shimobject.style.left=this.dropmenuobj.style.left
this.shimobject.style.top=this.dropmenuobj.style.top
}
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
}
},

hideshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined")
this.shimobject.style.display='none'
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'; cssdropdown.hideshim()",this.disappeardelay)
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("rel"))
}
}
}
}
if (window.createPopup && !window.XmlHttpRequest){
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>')
this.shimobject=document.getElementById("iframeshim")
}
}

}

由上可以看出，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 没错就是他控制着呢？

/*-------- 下拉菜单 --------------*/
.dropMenu {
	position:absolute;
	top: 0;
	z-index:100;
	width: 120px;
	visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA, direction=135, strength=4);
	margin-top: -1px;
	border: 1px solid #93E1EB;
	border-top: 0px solid #3CA2DC;
	background-color: #FFF;
	background:url(../images/mmenubg.gif);
	padding-top:6px;
	padding-bottom:6px;
}

.dropMenu li {
	margin-top:2px;
	margin-bottom:4px;
	padding-left:6px;
}
.dropMenu a {
	width: auto;
	display: block;
	color: black;
	padding: 2px 0 2px 1.2em;
}
* html .dropMenu a {
	width: 100%;
}
.dropMenu a:hover {
	color:red;
	text-decoration: underline;
}

如果只是调整宽度，只用修改 ：

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

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

三、原理

1、

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

<!-- /flink -->
<div id="footAD" style="margin:10px auto; width:726px">{dede:myad name='indexfooterAD'/}</div>
{dede:include filename="footer.htm"/}
<!-- /footer -->
</body>
</html>

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

<!-- //底部模板 -->
<div class="footer w960 center mt1 clear">
	<!--
		为了支持织梦团队的发展,请您保留织梦内容管理系统的链接信息.
		我们对支持织梦团队发展的朋友表示真心的感谢!织梦因您更精彩!
	-->
    <div class="footer_left"></div>
    <div class="footer_body">
	<p class="powered">
		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>
<!-- /powered -->
   </div>
   <div class="footer_right"></div>
</div>

以上代码只是实现了：

2、

index如何引用到head.htm文件

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

</head>
<body class="index">
{dede:include filename="head.htm"/}
<!-- /header -->

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

</head>
<body class="index">
<div class="w960 center">
    <!-- /header -->
    {dede:include filename="head_i.htm"/}
    <!-- /header -->

另一模板是：

</HEAD>
<!-- header -->
<BODY class=index>{dede:include filename="head.htm"/}
<!-- /header -->

转载请标明是引用于 http://blog.csdn.net/chenyujing5678