导航二级菜单实现思路

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

之前是用样式表创建的菜单，也是特别不想用脚本，但终于想通了，用脚本做出来，效果更好。

在这个导航中，还是使用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';

                           };

                       })();

                   }

              }