这是第三次修改网站的导航条效果了,现在确定的效果如下图:

之前是用样式表创建的菜单,也是特别不想用脚本,但终于想通了,用脚本做出来,效果更好。
在这个导航中,还是使用css控制菜单,用到脚本的是,鼠标移动到产品中心,背景颜色更改
鼠标移出二级菜单层保持"产品中心"的背景颜色 , 鼠标移出二级菜单层,去掉背景颜色
这是一个思路,其他控制二级菜单显示均保留使用css控制。
脚本如下:
var navlist=j.$('navlist');
//导航栏目
var parentLinks=j.$(navlist,'a',{className:'p'});
for(var i=0;i<parentLinks.length;i++){
parentLinks[i].onmouseover=(function(links){
return function(){
for(i=0;i<links.length;i++){
links[i].className=links[i]==this?'p hover':'p';
}
};
})(parentLinks);
}
var secondLayers=j.$(navlist,'span');
for(var i=0;i<secondLayers.length;i++){
if(secondLayers[i].className.indexOf('second')!=-1){
secondLayers[i].onmouseout=(function(){
return function(){
this.parentNode.getElementsByTagName('a')[0].className='p';
};
})();
secondLayers[i].onmouseover=(function(){
return function(){
this.parentNode.getElementsByTagName('a')[0].className='p hover';
};
})();
}
}