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

本文详细介绍了如何在织梦CMS v5.7中实现导航条的二级下拉菜单。通过在footer.htm文件中添加特定代码,并调整dropdown.js和css文件,可以成功创建并自定义下拉菜单的样式和位置。同时,文章提到了解决下拉菜单透明背景的问题,以及如何通过修改dedecms.css文件调整菜单宽度。
摘要由CSDN通过智能技术生成

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

欢迎拍砖!

 
一、引言

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

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

二、实现过程

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.dropme
  • 8
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值