DEDECMS的JS+CSS导航条下拉菜单(完美解决)

使用DEDECMS做网站的时候,有时候需要制作下拉菜单。dede5.5有下拉菜单,比较不错,有需要的可以直接到5.5的模板里面去借鉴。这里我分享一下个人的DEDECMS制作js+css下拉菜单的经验,此菜单兼容5.5到5.7版本的dedeCMS。

DEDECMS导航下拉菜单的调用DEDECMS下拉菜单实际上就是顶级栏目和每个栏目的子栏目的一个循环调用,我使用了以下代码,实现了这种调用。

<ul id="mainnav">
<li class="home"><a href="/">主页</a></li>
{dede:channelartlist typeid='top'}
<li>{dede:type}<a href="[field:typeurl/]">[field:typename/]</a>{/dede:type}
<ul>
{dede:channel type='son'}
<li><a href="[field:typeurl/]">[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}
</ul>

这种调用方法无法实现当前页效果,如果要实现当前页效果,请参考dedecms官方的下拉菜单制作方法。
比较重要的CSS样式这里比较重要的是注意CSS的应用,以下是该菜单完整的CSS代码。如果需要其他效果,请自行修改。

/* mainnav */
#mainnav {
background:#002a6c;
border:1px solid #0f2851;
border-top:none;
padding-left:20px;
width:878px;
height:30px;
position:relative;
clear:both;
}
#mainnav li {
float:left;
width:95px;
position:relative;
}
#mainnav li ul {
position: absolute;
left: 0px;
top: 30px;
display: none;
background:#133b7c;
z-index:1000;
}
#mainnav li a {
display: block;
font:bold 14px/30px "微软雅黑";
text-align:center;
text-decoration: none;
color:#fff;
}
#mainnav li a:hover, #mainnav li.on a {
text-decoration:none;
color:#fff;
background:#133b7c;
}
#mainnav li ul li a {
font-weight:normal;
width:150px;
text-align:left;
padding-left:25px;
line-height:25px;
font-size:12px;
color:#9cf;
background:#133b7c;
}
#mainnav li ul li a:hover { color: #9cf; background:#012a6c }
* html #mainnav li {
float: left;
height: 1%;
}
* html #mainnav li a { height: 1%; }
#mainnav li:hover ul, #mainnav li.over ul { display: block; }

实现下拉菜单效果的js本来打算使用纯CSS来解决下拉菜单问题,奈何垃圾IE6依然有着顽强的生命力,为了它去浪费时间做兼容,实在是耗时耗力。幸好本人没有js洁癖,于是选择了用简单的js来搞定,这里本人使用下面的代码:

startList = function() {
if (document.all && document.getElementById) {
var mainnavRoot = document.getElementById("mainnav");
for (var i = 0; i < mainnavRoot.childNodes.length; i++) {
var node = mainnavRoot.childNodes;
if (node.nodeName == "LI") {
node.onmouseover = function() {
this.className += "over";
}
node.onmouseout = function() {
this.className = this.className.replace("over", "");
}
}
}
}
}
window.onload = startList;

其中要注意的是getElementByid("mainnav")中dmainnav是导航条的ID。

到此,一款效果简洁的JS+CSS下拉菜单就搞定了。样式很粗糙,如果要实现更佳的视觉效果,可以自行修改CSS代码添加背景,或者使用其他的js效果。

This entry was posted in Technology and tagged , , , , . Bookmark the permalink. 2,903 views

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>