导航菜单优化制作

以前制作导航菜单,总要加许多id在HTML中,js代码也要将id挨个加上去,今日终于习得破解之法,不在用以前那种笨拙的方法了。

以下是HTML代码:

<body>
    <nav id="navlist">
        <ul>
            <li class="fucaidan xiaoshi">前端开发</li >
            <li class="fucaidan xiaoshi">后端开发</li >
            <li class="fucaidan xiaoshi">移动开发</li >
            <li class="fucaidan xiaoshi">数据库</li >
            <li class="fucaidan xiaoshi">大数据</li >
            <li class="fucaidan xiaoshi">运维&amp;测试</li >
            <li class="fucaidan xiaoshi">UI设计</li >
        </ul>
        <div class="zicaidan xiaoshi">
        <h3>基础1</h3>

        HTML/CSS JavaScript jQuery
        </div>
        <div class="zicaidan xiaoshi">
        <h3>基础2</h3>

        HTML/CSS JavaScript jQuery
        </div>
        <div class="zicaidan xiaoshi">
        <h3>基础3</h3>

        HTML/CSS JavaScript jQuery
        </div>
        <div class="zicaidan xiaoshi">
        <h3>基础4</h3>

        HTML/CSS JavaScript jQuery
        </div>
        <div class="zicaidan xiaoshi">
        <h3>基础5</h3>

        HTML/CSS JavaScript jQuery
        </div>
        <div class="zicaidan xiaoshi">
        <h3>基础6</h3>

        HTML/CSS JavaScript jQuery
        </div>
        <div class="zicaidan xiaoshi">
        <h3>基础7</h3>

        HTML/CSS JavaScript jQuery
        </div>
    </nav>

内容没有细做,以下是CSS代码:

<style>
    ul{
        list-style: none;
        box-sizing: border-box;
        padding: 15px 0;
        padding-left: 15px;
        border-radius: 10% 0 0 10%;
        color: white;
        background-color:#555;
        width: 150px;
        height: 320px;
    }
    ul li{
        padding: 10px 10px;
        cursor: pointer;
        background-color: #555;
    }
    div{
        box-shadow: 1px 0 2px #666;
        background-color: #999;
        color: white;
        height: 318px;
        width: 500px;
        position: absolute;
        left: 158px;
        top: 17px;
        padding-left: 20px;
        display: none;
        cursor: pointer;
    }
    </style>

js我使用了构造函数进行封装,这样可以有效的避免js中命名重复的问题,并且修改起来很方便,不需要在HTML中加入许多id,代码简洁了不少:

function navList(id){   
            var dad=document.getElementById(id);
            var fucaidan=dad.getElementsByClassName('fucaidan');
            var zicaidan=dad.getElementsByClassName('zicaidan');
            var xiaoshi=dad.getElementsByClassName('xiaoshi');
            var ul=dad.getElementsByTagName('ul');
        }
        new navList('navlist');

接下来将菜单的onmouse事件写入构造函数中就ok了,但在其中遇到了问题:

for(var i=0;i<fucaidan.length;i++){
        fucaidan[i].addEventListener('mouseenter',function(){
                zicaidan[i].style.display='block';
                this.style.backgroundColor='#999';
});

我们知道,for循环的便利在上面的函数中并不是我们所想的那样,而是一个定值。那么该如何解决这个问题呢?

event.target

event.target可以指出当前鼠标所指的元素,我们可以利用这一点写一个函数:

function findIndex(target,list){
                for(var i=0;i<list.length;i++){
                    if(target==list[i])    return i;
                }
                return -1;
            }

该函数的返回值便是与所指父菜单相同的索引值:

for(var i=0;i<fucaidan.length;i++){
                    fucaidan[i].addEventListener('mouseenter',function(event){
                        var a=findIndex(event.target,fucaidan);
                        zicaidan[a].style.display='block';
                        this.style.backgroundColor='#999';
                    });

这样问题就得到了完美解决。

最后再附上完整js代码:

<script>
        //利用构造函数进行封装,防止名字滥用,HTML动态添加
        function navList(id){   
            var dad=document.getElementById(id);
            var fucaidan=dad.getElementsByClassName('fucaidan');
            var zicaidan=dad.getElementsByClassName('zicaidan');
            var xiaoshi=dad.getElementsByClassName('xiaoshi');
            var ul=dad.getElementsByTagName('ul');
            //错误抛出,方便检查
            if(fucaidan.length!=zicaidan.length)     throw '父类菜单和子类菜单长度不匹配';
            //检索与父菜单索引相同子菜单
            function findIndex(target,list){
                for(var i=0;i<list.length;i++){
                    if(target==list[i])    return i;
                }
                return -1;
            }
            //子菜单和父菜单onmouse样式
            function appear(){    
                for(var i=0;i<fucaidan.length;i++){
                    fucaidan[i].addEventListener('mouseenter',function(event){
                        var a=findIndex(event.target,fucaidan);
                        zicaidan[a].style.display='block';
                        this.style.backgroundColor='#999';
                    });    
                    fucaidan[i].addEventListener('mouseleave',function(event){
                        var a=findIndex(event.target,fucaidan);
                        zicaidan[a].style.display='none';
                        this.style.backgroundColor='#555';
                        zicaidan[a].onmouseenter=function(){
                            zicaidan[a].style.display='block';
                            fucaidan[a].style.backgroundColor='#999';
                        }
                        zicaidan[a].onmouseleave=function(){
                            zicaidan[a].style.display='none';
                            fucaidan[a].style.backgroundColor='#555';
                        }
                    });
                }
            }
            appear();
        }
        new navList('navlist');
    </script>

不妨在上面的导航菜单中加入轮播效果:

<script>
        //利用构造函数进行封装,防止名字滥用,HTML动态添加
        function navList(id){   
            var N=1;
            var dad=document.getElementById(id);
            var fucaidan=dad.getElementsByClassName('fucaidan');
            var zicaidan=dad.getElementsByClassName('zicaidan');
            var xiaoshi=dad.getElementsByClassName('xiaoshi');
            var ul=dad.getElementsByTagName('ul');
            //错误抛出,方便检查
            if(fucaidan.length!=zicaidan.length)     throw '父类菜单和子类菜单长度不匹配';
            //设置菜单样式
            function addStyle(a){
                zicaidan[a].style.display='block';
                fucaidan[a].style.backgroundColor='#999';
            }
            //清除菜单样式
            function clearAll(){
                for(var i=0;i<fucaidan.length;i++){
                    zicaidan[i].style.display='none';
                    fucaidan[i].style.backgroundColor='#555';
                }
            }
            //检索与父菜单索引相同子菜单
            function findIndex(target,list){
                for(var i=0;i<list.length;i++){
                    if(target==list[i])    return i;
                }
                return -1;
            }
            //计时器
            function timeList(){
                clearAll();
                zicaidan[N].style.display='block';
                fucaidan[N].style.backgroundColor='#999';
                N++;
                if(N>fucaidan.length-1)    N=0;
            }
            //计时器开始
            var timeBegin=function(a){
                zicaidan[a].style.display='block';
                fucaidan[a].style.backgroundColor='#999';
                N=a;
                timing=setInterval(timeList,1000);
            }
            timeBegin(N-1);
            //计时器停止
            function timeEnd(){
                for(var i=0;i<fucaidan.length;i++){
                    fucaidan[i].onmouseenter=function(){
                        clearInterval(timing);
                        zicaidan[N-1].style.display='none';
                        fucaidan[N-1].style.backgroundColor='#555';
                    }
                    zicaidan[i].onmouseenter=function(){
                        clearInterval(timing);

                    }
                }
            }
            //子菜单和父菜单onmouse样式
            this.appear=function(){    
                for(var i=0;i<fucaidan.length;i++){
                    fucaidan[i].addEventListener('mouseenter',function(event){
                        var a=findIndex(event.target,fucaidan);
                        clearInterval(timing);
                        clearAll();
                        addStyle(a);
                    });
                    zicaidan[i].addEventListener('mouseenter',function(event){
                        var a=findIndex(event.target,fucaidan);
                        clearInterval(timing);
                        addStyle(a);
                    });
                    zicaidan[i].addEventListener('mouseleave',function(event){
                        var a=findIndex(event.target,zicaidan);
                        timeBegin(a);
                        addStyle(a);
                    });    
                    fucaidan[i].addEventListener('mouseleave',function(event){
                        var a=findIndex(event.target,fucaidan);
                        timeBegin(a);
                        addStyle(a);
                        zicaidan[a].onmouseenter=function(){
                            clearAll();
                            clearInterval(timing);
                            addStyle(a);
                        }
                    });
                }
            }
        }
        var navlist=new navList('navlist');
        navlist.appear();
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王磊的博客

富编译器汇总及二次开发Demo

富文本编译器汇总 名称 总大小 当前版本 官方地址 扩展方法 xhEditor 1.43 MB v1.1.14 http://xheditor.com...

2855
来自专栏奔跑的蛙牛技术博客

证明angular2+只会维护一个相同的service实例

693
来自专栏Java社区

6小时 jQuery开发一个前端应用教程视频

1443
来自专栏Jerry的SAP技术分享

微信小程序开发系列七:微信小程序的页面跳转

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

882
来自专栏专注研发

记一次<iframe>的使用

将jsp拆分frame框架,因为采用了第一种方式,一直在考虑用jquery异步请求获取数据,总是但不到效果,

652
来自专栏菜鸟计划

我的HTML总结之表单

表单是Web中实现交互的重要方法,用于收集用户信息并提交给服务器。 ? 表单中的9大控件 <input type="text" name="key" value...

3507
来自专栏coder修行路

python爬虫从入门到放弃(三)之 Urllib库的基本使用

 官方文档地址:https://docs.python.org/3/library/urllib.html 什么是Urllib Urllib是python内置的...

2958
来自专栏noteless

spring原理案例-基本项目搭建 01 spring framework 下载 官网下载spring jar包

All avaible features and modules are described in the Modules section of the ref...

724
来自专栏coding

vue.js组件切换

482
来自专栏Java Edge

Nginx入门到实践之场景实践篇1 静态资源 web 服务

1736

扫码关注云+社区