51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
织梦DEDECMS
当前位置:首页>实用代码>织梦DEDECMS>

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

时间:2017-08-09 12:19点击:
一、引言

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

按照我的步骤走!记住一步也不能错哦!
二、实现过程

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.in
nerWidth-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.in
nerHeight-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:DX
ImageTransform.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 -->  


51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开