一、引言

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

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

二、实现过程

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

DEDECMS v5.7 完美实现导航条下拉二级菜单的更多相关文章

  1. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  2. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  3. React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)

    摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. JS部分 相关技术栈:react.antd.re ...

  4. Javascript实现简单的下拉二级菜单

    在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"& ...

  5. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  6. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  7. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  8. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  9. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

随机推荐

  1. Java50道经典习题-程序26 求星期

    题目:请输入星期几的第一个字母来判断一下是星期几,如果第一个字母一样,则继续 判断第二个字母.分析:用情况语句比较好,如果第一个字母一样,则判断用情况语句或if语句判断第二个字母.周一至周日的英文单词 ...

  2. C++时间操作的汇总

    . 获取当前时间 time_t cur_time = time(NULL); . 把整数时间转为字符串时间 string GetStringTime(const time_t time) { stru ...

  3. ubuntu - 14.04,如何操作Gnome的任务栏?

    搜索到的答案: in gnome classic you must press both the Alt & Super keys at the same time while right-c ...

  4. Js判断参数(String,Array,Object)是否为undefined或者值为空

    在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空.如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型,通过 ...

  5. 洛谷 P3806 【模板】点分治1

    P3806 [模板]点分治1 题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条边a,b,c描述 ...

  6. 解读人:董鑫,Disease Development Is Accompanied by Changes in Bacterial Protein Abundance and Functions in a Refined Model of Dextran Sulfate Sodium (DSS)-Induced Colitis

    文章中文名:在葡聚糖硫酸钠(DSS)诱导下的结肠炎模型伴随着细菌蛋白质丰度和功能的改变 单位: 1 Helmholtz-Centre for Environmental Research - UFZ, ...

  7. P2446 [SDOI2010]大陆争霸

    \(\color{#0066ff}{ 题目描述 }\) 幻想历8012年5月12日深夜,斯普林·布拉泽降下神谕:"Trust me, earn eternal life."克里斯军 ...

  8. P3356 火星探险问题

    \(\color{#0066ff}{题目描述}\) 火星探险队的登陆舱将在火星表面着陆,登陆舱内有多部障碍物探测车.登陆舱着陆后,探测车将离开登陆舱向先期到达的传送器方向移动.探测车在移动中还必须采集 ...

  9. USACO 1.3.6 Ski Course Design[滑雪课程设计]

    先说说思路: 这题比上一道坑人的wormholes简单多了!我一看到这题,“XXX设计”,还以为要用到什么dp呢,没想到是水题 用两层循环,第一层循环相差17中的上界,第二层遍历所有的山峰计算答案.并 ...

  10. DockerFile一键搭建环境(一)

    点击查看文件详情 FROM centos:7 COPY --chown=root:root nginx /etc/init.d/ Run set -ex \  && yum insta ...