导航菜单优化制作

以前制作导航菜单,总要加许多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 条评论
登录 后参与评论

相关文章

来自专栏Java技术分享圈

杨老师课堂之JavaScript案例之自动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

964
来自专栏IT 指南者专栏

前端系列之CSS基础知识概述

1、什么是DIV (1)、div就是html一个普通标签,进行区域划分。div特性:独自占一行。独自不能实现复杂效果。必须结合css样式进行渲染。 (2)、d...

38211
来自专栏小筱月

jQuery 事件绑定 和 JavaScript 原生事件绑定

jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on,

1612
来自专栏落花落雨不落叶

关于Html与css的一些解释

30612
来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

4167
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

1174
来自专栏前端知识分享

第77天:jQuery事件绑定触发

返回值不同,.height()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数...

1183
来自专栏小程序的道路

小程序事件

当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数,跳转到demo页面。然后在对应的js中写出事件的具体实现方法

1696
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

1828
来自专栏cnblogs

Bootstrap源码分析之transition、affix

一、Transition(过滤) 作为一个基础支持的组件,被其他组件多次引用。实现根据浏览器支持transition的能力,然后绑定动画的结束事件; 首先:创建...

2047

扫码关注云+社区