zoukankan      html  css  js  c++  java
  • 导航二级菜单实现思路

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

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

    在这个导航中,还是使用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';
                                };
                            })();
                        }
                   }
    
  • 相关阅读:
    新家开始了
    FreeMarker过时的方法 new Configuration()
    基于Spring封装的Javamail实现邮件发送
    Spring中PropertiesLoaderUtils应用
    SpringBoot基于数据库的定时任务统一管理
    ActiveMQ点对点模式
    springboot整合swagger2
    dubbo简单示例
    SpringCLoud之搭建Zuul网关集群
    微服务项目框架搭建
  • 原文地址:https://www.cnblogs.com/newmin/p/2083487.html
Copyright © 2011-2022 走看看