淡入淡出效果。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了,找一款漂亮的菜单,仿着做即可。