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

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

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

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

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

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

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

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>

以上代码只是实现了:

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

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

上一篇:C# WPF 进度条,根据读取数据显示进度条进度,根据Excel文件读取数据,进度条样式


下一篇:关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)