• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > DedeCMS教程 > DedeCMS模板标签 >

DedeCMS导航下拉菜单

来源: www.dedecms8.com 编辑:织梦吧 时间:2012-02-07点击:
 DedeCMS 导航下拉菜单是一个非常经典的js下拉菜单,有两个效果值得借用:

淡入淡出效果。DedeCMS导航下拉菜单有轻微的淡入淡出效果,这是通过setTimeout()方法实现的。
绝对定位效果。有没有注意到,无论一级栏目在哪个位置,下拉菜单总是位于当前一级栏目导航的下方。

以上两个效果如果自己写代码很难实现,很幸运,DedeCMS 为我们提供了这种效果。

DedeCMS导航下拉菜单的默认样式看起来很普通,那是因为我们没有对它进行美化,很多经典的下拉菜单效果都可以用 DedeCMS 的 dropdown.js 这个文件中的算法来实现。

网上大概查了一下,关于DedeCMS导航下拉菜单的问题有以下几个:

DedeCMS下拉菜单如何显示?
DedeCMS5.6版本下拉菜单不显示的解决办法。
如何去掉DedeCMS导航栏下拉菜单左侧的 DEDECMS BIZ 字样?
如何将DedeCMS下拉菜单的 onmouseover 事件改为 onclick 事件?

以下是答案:

DedeCMS下拉菜单如何显示?

跟 DedeCMS下拉菜单有关的代码有:

/templets/default/head.htm:

currentstyle="<li class='hover'><a href='~typelink~' ~rel~>~typename~</a></li>"

/templets/default/footer.htm:

<!-- //二级子类下拉菜单,考虑SEO原因放置于底部  -->

......

<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>

DedeCMS5.5版本中,只要有二级子栏目,默认就会显示导航下拉菜单。DedeCMS5.6版本中如何显示?请看下一个问题。

DedeCMS5.6版本下拉菜单不显示的解决办法。

打开DedeCMS5.5版本的 /templets/default/footer.htm,将二级子类下拉菜单相关代码拷贝到 DedeCMS5.6版本的 /templets/default/footer.htm 中。

如何去掉DedeCMS导航栏下拉菜单左侧的 DEDECMS BIZ 字样?

打开 /templets/default/style/dedecms.css,将 background:url(../images/mmenubg.gif); 删除,将 /templets/default/images/mmenubg.gif 删除。DedeCMS5.6没有这张背景图片。

如何将DedeCMS下拉菜单的 onmouseover 事件改为 onclick 事件?

打开 /images/js/dropdown.js,按如下步骤操作:

第31行,将 if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover") { 替换为 if (e.type=="click" && obj.visibility=="hidden" || e.type=="click") {
第76行,将 obj.onclick=function(){return !cssdropdown.disablemenuclick} 这句代码删除。
第138行,将 menuitems.onmouseover=function(e){ 改为 menuitems.onclick=function(e){

剩下的问题就是如何按照自己的想法修改CSS了,找一款漂亮的菜单,仿着做即可。

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ