导航菜单优化制作

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

相关文章

来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

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

canvas画简单电路图

88711
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8908
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

27510
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4224
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

39410
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5278
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5847
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2787

扫码关注云+社区