织梦CMS v5.7 完美实现导航条下拉二级菜单
转载请标明是引用于 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.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.οnmοuseοut=function(){cssdropdown.delayhidemenu()}
obj.οnclick=function(){return !cssdropdown.disablemenuclick}
this.dropmenuobj=document.getElementById(dropmenuID)
if(!this.dropmenuobj) return;
this.dropmenuobj.οnmοuseοver=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.οnmοuseοut=function(e){cssdropdown.dynamichide(e)}
this.dropmenuobj.οnclick=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].οnmοuseοver=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 -->
织梦CMS v5.7 完美实现导航条下拉二级菜单相关推荐
- 帝国cms 主导航条下拉菜单功能实现,模板功能扩展
主导航条下拉菜单样式: 具体应用请查看我的个人网站:无知人生 实现步骤 1.在公共模板变量>页面头部模板中使用以下标签来加载菜单项 [listshowclass]'0',13,0,0[/list ...
- 织梦cms仿知名吧站长导航网站模板
简介: 织梦cms仿知名吧网站模板,带自动抓取网站信息功能,服务器直接打包,下载直接安装即可使用. 模板安裝方法: 网站域名/install/ 后台管理信息内容 后台管理详细地址:网站域名/dede ...
- 织梦ajax加载文章列表,织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果...
织梦dedecms实现点击下拉加载更多主要用到ajax技术.具体步骤如下: 一.首先找到并打开/plus/list.PHP文件,在里面找到如下代码: require_once(dirname(__FI ...
- 10款菜单导航代码_jquery 导航菜单_js 导航菜单_二级导航条下拉菜单(一)
jQuery左侧下拉导航菜单后台框架模板 js侧边隐藏菜单收缩特效 黑色的左侧导航管理面板ui特效 企业官网tab下拉菜单特效 Facebook自定义多级导航菜单查询 jQuery圆形转盘多级菜单代码 ...
- bootstrap导航窗格响应式二级菜单
这次碰到的需求是响应式二级导航窗格,默认的导航窗格只有点击下拉框的二级窗格,会有如下问题:一级菜单无法添加超链接,二级菜单展示要多点一下. 实现目标: 1.滑动到指定区域,展示二级菜单. 2.一级菜单 ...
- 织梦cms第四版仿七猫技术导航源码 附安装教程
介绍: 织梦系统仿七猫技术导航源码,包含了安装教程和使用教程,大家可以拿着这套源码来搭建个技术导航来玩 网站源码集成导航栏目.资讯栏目.在线工具.视频.高清壁纸等 内置生成网站地图插件 在插件生成网 ...
- 完美天空下载站php程序,织梦CMS高仿天空软件站|软件下载站源码整站带数据
织梦CMS高仿天空软件站|软件下载站源码整站带数据是一款基于DEDECMS5.5开发制作的仿天空软件站的源码,适用于软件下载.资源下载等网站使用. 安装方法: 1.首先打开你的网址 然后就会出现ded ...
- 古典风格园林景观织梦cms模板
介绍: 古典风格园林景观织梦CMS模板,带手机端,非常适合市政园林.景观.苗木种植类企业都可使用, 自带的手机移动端,同一个后台,数据即时同步,简单适用! 完美兼容IE7+.Firefox.Chrom ...
- dede织梦html手机模板,dede织梦cms手机站模板制作和调用方法
dede织梦cms电脑站制作网站模板很简单.这里说说对应的手机站模板制作方法和调用方法. 首先我们分析下手机站的模板命名方式. index_m.htm 首页模板 index_default_m.htm ...
最新文章
- 计算机网络离不开光缆,九年级物理全册 第二十一章 第四节 越来越宽的信息之路习题课件 新人教版.ppt...
- 天气情况(思维,dp思想)
- 2020年美团春招 技术综合试卷第一题
- python array的应用
- flink 3-转换
- jquery设置输入框为只读_将SQL中几张表设为只读,这是什么奇怪需求?
- python阈值计算_python – 在numpy中计算超过阈值的数组值的最快方法
- Python的psutil模块监控内存代码
- 通达信服务器文件是那个文件夹,通达信的公式在哪个文件夹?
- android 基站分布,android 基站定位
- C语言拍皮球双重循环,山东理工大学ACM平台题答案关于C语言 1184 C语言实验——拍皮球...
- 微信开发服务器端口号,微信公众号开发步骤
- C语言基础学习——基本数据类型(float型)
- 几何分布的期望公式的推导
- 全国第17届计算机辅助设计与图形学(cad/cg)学术会议论文集,征稿资讯-CCF第24届全国计算机辅助设计与图形学学术会议 (CCF CAD/CG 2021)...
- 利用原生JavaScript--实现小球无限转圈
- 有趣的海盗分金币问题
- 【Python】使用pdfkit报错:OSError: wkhtmltopdf exited with non-zero code 1. error:
- 软考程序员c语言、Java和c++考点
- 15个iOS的视频播放控件