原生JS实现导航下拉菜单效果

这个导航下拉菜单的功能是：下拉菜单的宽度和浏览器视口的宽度一样宽；只有两个主要导航项目。当鼠标移动到主导航上的导航项目时，会出现相应的辅助导航。在这种情况下，通过改变二次导航的高度来实现二次导航的显示和消失。为了便于理解，我画了一幅如下图：

在这种情况下，使用的主要知识是：设置定时器、清除定时器、mouseout和mouseover事件，以及css中与位置相关的知识。本案分为两部分。第一部分是html和css，第二部分是js。

I. html和css

将导航栏包装在一个div中，div的位置值是相对的，它的高度是50px(导航栏的高度是50px)，它的宽度是100%。将最外面的div的position属性设置为relative，因为辅助导航应该根据该div进行定位。这个导航栏的结构是一个两级嵌套的无序列表。每个第一级导航项目li与其对应的无序列表嵌套在一起。需要从文档流中移除嵌套的无序列表。因此，嵌套无序列表的位置值是绝对的，top:50px(导航栏的高度)。左：0；右：0；通过设置这些值，可以使嵌套无序列表的宽度等于浏览器视口的宽度。通过将li的显示值设置为内嵌块并将外部div的文本对齐设置为中心，导航项目显示在中心。

注意：在这种情况下，您必须将嵌套无序列表的位置值设置为绝对，以便它可以删除文档流。

Html和css代码如下：

！doctype html lang=' en ' Head metacarset=' utf-8 ' title下拉菜单/title link rel='样式表' type=' text/CSS ' href=' index . CSS ' rel=' external nofollow '/Head body div class=' Head ' ul class=' outer ' id=' outer ' Li class=' outer list ' id=' outer list 1 ' a href=' # ' id=' link 1 ' class=' link ' product span/span/A ul class=' inter' id=' inter 1 '阿利href=' #' img src=' img/01 FEA 55541 ed 7300001714 a 430253 . jpg ' strong NASS/strong/a/Li阿利href=' # ' img src=' img/Thumb _ image 3 . jpgjpgjpg ' strong纯色/strong/a/Li阿利href=' # ' img src=' img/白胡子. jpg ' Strong/a/li/ul/li liclass='外部列表' id='外部列表2 ' a href=' # ' id=' link 2 ' class=' link ' service span/span/a ul class=' inter ' id=' inter 2 '阿利href=' # Img src=' Img/Leo . jpg ' strong售后服务/strong/a/Li Li href=' # ' Img src=' Img/lotus Zen . jpg ' strong设计师/strong/a/Li/ul/div脚本类型

* { padd : 0；margin : 0；}.表头{位置：相对；宽度： 100%；高度： 50px；背景-color : # 000000；文本对齐：中心；z-index : 2；}.标题。外部li{ display:内联块；list-style:无；}.outerList { height: 50px线高： 50px；}.outerList a { display:块；padding: 0 15pxcolor: # fff文本装饰：无；} .outerList:hover将鼠标悬停在{ color: # EDECEC}.外部列表。链接跨度{ display:块；高度： 0；宽度： 100%；相对位置：top :-10px；left : 0；背景-color : # fff；} .outerList:hover。链接跨度{ height: 1px}.外部列表。inter{ position:绝对值；left : 0；高度： 0；飞越：隐藏；top: 50pxright : 0；背景-color:rgba(0，0，0，0.5)；}.外部列表。inter Li { margin-top : 30px；}.外部列表。inter strong { display:block高度： 25px；线高： 25px；文本对齐：中心；}第二部分。射流研究…

js涉及的知识主要包括：设置定时器、清除定时器、mouseout和mouseover事件。

鼠标移出事件当鼠标从一个元素移动到另一个元素时，它会在丢失鼠标的元素上触发鼠标移出事件。获得鼠标的元素可能是失去鼠标的元素的父元素或子元素，或者获得鼠标的元素可能位于失去鼠标的元素之外。当在一级导航项上触发mouseout事件时，我们需要判断得到鼠标的元素是否是一级导航项的后代元素。当一个元素触发mouseout事件时，鼠标移除的元素是目标元素，鼠标获取的元素是relatedTarget。因此，需要判断相关元素是否是一级导航项的后代。如果是后代，对应导航项的二级导航项的高度不会改变。如果它不是子代元素，则相应的辅助导航项会消失。判断是否是后代元素的代码如下：

var flag1=false，flag2=falseif(relatedTarget！==null){ var parent ed=related target . parent node；do { if(parent ed===outlist 1 | | related target===outlist 1){ flag 1=true；打破；} else if(parent ed===outlist 2 | | related target===outlist 2){ flag 2=true；打破；} else { parent ed=parent ed . parent node；} }while(parented！==null)；}注意：通过判断flag1和flag2的值来决定是否将二级菜单的高度改为0。如果flag1为假，则outerList1对应的二级菜单将消失；如果flag2为false，则对应于outerList2的二级菜单将消失。

当鼠标移动到元素中时，mouseover事件在获取鼠标的元素上触发此事件。获得鼠标的元素可能位于丢失鼠标的元素的外部或内部。获得鼠标的元素是目标元素，失去鼠标的元素是相关元素。在这种情况下，我们只需要判断mouseover的目标元素，但是我们需要判断mouseout事件的相关元素。

注意：在支持DOM的浏览器中，mouseout和mouseover的相关元素存储在event的relatedTagrget属性中，但在IE浏览器中，相关事件存储在mouseout事件的event的toElement属性中，相关事件存储在mouseover事件的event的fromElement属性中。

设置定时器和清除定时器在这种情况下，嵌套无序列表的消失和出现是通过改变其高度来实现的，其高度是逐渐变化的。因此，为了清除计时器，我使用setTimeout计时器将计时器标识符保存在一个变量中。清除计时器的目的是防止快速移动鼠标时嵌套无序列表的高度抖动(即一个计时器中的回调函数增加高度，另一个计时器中的回调函数降低高度)。

Js代码如下：

var Untilevent={ add event : function(元素，类型，hander){ if(元素。addevent listener){元素。addevent侦听器(类型，hander，false)；} else if(元素。attachevent){元素。attachevent(' on '类型，hander)；} else { element[' on ' type]=hander；} }，getevent :函数(事件){ return event？事件：窗口。事件；}，gettarget :函数(事件){ return event。目标| |事件。加速；}，getrelated :函数(事件){ if(事件。相关目标){//兼容数字正射影像图的浏览器将相关元素保持在相关目标属性中返回事件. event . related target } else if(event . to element){//在工业管理学(工业工程)浏览器中鼠标移出事件的相关元素保存在toElement属性中返回事件。到元素；}else if(event.fromElement){ //在工业管理学(工业工程)浏览器中鼠标悬停事件的相关元素保持在fromElement属性中返回event . FromElEMENT } else { return null } }；//下面这四个元素用于表示四个定时器的标识，最开始我只使用两个定时器，当快速移动时//动画会乱var timeDec1、timeAdd1、timeAdd2、timeDec2//定时器标识函数getOuter(){ var outer=document。getelementbyid(' outer ')；untilEvent.addEvent(外部、“鼠标悬停”，回调ver)；untilEvent.addEvent(外部，‘鼠标移出’，callBackOut)；}//mouseout事件：当鼠标从一个元素移入另一个元素时在鼠标离开的那个元素//上触发，获得鼠标的元素可能在失去鼠标元素的外部也可能在失去鼠标元素的//内部。所以需要判断鼠标移出事件的相关元素是否为外部li(即编号为外部列表或编号为外部列表2)元素//的子孙元素，如果是子孙元素，则内部无序列表无须收起。

函数callBackOut(event){ var event=until vent。getevent(事件)；var相关目标=未达到。getrelated(事件);var outlist 1=文档。getelementbyid(' outlist 1 ')；var inter 1=文档。getelementbyid(' inter 1 ')；var outlist 2=文档。getelementbyid(' outlist 2 ')；var inter 2=文档。getelementbyid(' inter 2 ')；var flag1=false，flag2=falseif(relatedTarget！==null){ var parent ed=相关目标。父节点；do { if(parent ed===outlist 1 | | related target===outlist 1){ flag 1=true；打破；} else if(父ed===outlist 2 | |相关目标===outlist 2){ flag 2=true；打破；} else { parent ed=parent ed。父节点；} }while(parented！==null)；} if(！标志1){ var str 1='标志1 '；changehightdec(国际米兰1号，时间地址1，圣R1)；} if(！标志2){ var str 2='标志2 '；changehightdec(inter 2，timeAdd2，str 2)；} }函数changeHeightDec(元素、计时器、标志){ var off height=70 var inverTimer=10 cleartime out(计时器);change()；函数change(){ var height=ParSeint(元素。风格。高度)；if(！高度)高度=0;if(高度0){ if(高度-关闭高度0){ element。风格。高度=高度-关闭高度' px '；} else { element。风格。高度=0 ' px} if(flag==' flag 1 '){ timedec 1=setTimeout(change，inverTimer)；} else { timedec 2=setTimeout(change，inverTimer)；} } } }函数回调ver(事件){ var event=untilevent。getevent(事件)；var target=untilEvent.getTarget(事件);var inter 1=文档。getelementbyid(' inter 1 ')；var inter 2=文档。getelementbyid(' inter 2 ')；if(目标。id==' outlist 1 ' | | target。id==“link 1”){ var str 1=“flag 1”；变更高度(中间1，时间12月1日，圣R1)；} if(target。id==' outlist 2 ' | | target。id==“link 2”){ var str 2=“flag 2”；changeHeight(inter2，timeDec2，str 2)；} }函数更改高度(元素、计时器、标志){ var total height=160 var inverHeight=10 var inverTimer=10 cleartime out(计时器);//当鼠标移入时清除让内部保险商实验所长度减小的定时器，保证鼠标移入后//内部保险商实验所长度立即增加change()；函数change(){ var height=ParSeint(元素。风格。高度)；if(！高度)高度=0;if(高度总高度){ if(高度反转高度总高度){ element。风格。高度=总高度' px '；} else { element。风格。高度=高度inverHeight ' px} if(flag==' flag 1 '){ timeAdd1=setTimeout(change，inverTimer)；} else { timeAdd2=setTimeout(change，inverTimer)；} } }}untilEvent.addEvent(窗口，' load '，getOuter)；以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。