下拉导航菜单

用JavaScript源码实现一些效果虽然代码有点繁琐,但是是掌握JavaScript最好方式。只有掌握了原生方法,以后对于jQuery等框架,才能了解的更深入。

实现下拉导航菜单基本过程

  • 通过id选取元素。
  • 设置鼠标事件移入事件及获取元素的style属性为block显示元素。
  • 定义定时器的变量null,然后先清除定时器。
  • 设置鼠标移出事件,并设置定时器及获取元素的style属性为none隐藏元素。
  • 设置元素的子侧边栏元素鼠标移入事件及style属性为block显示,同时清除定时器。
  • 设置元素的子侧边栏元素鼠标移出事件及style属性为none隐藏元素。

##JavaScript代码实例

window.onload=function(){

var oDt = document.getElementById('dt1');
var oDd = document.getElementById('dd1');
var oCx = document.getElementById('cx');

oDt.onmouseover=function(){
	oDd.style.display = 'block';
};
var  大专栏  下拉导航菜单timeer = null;
clearTimeout(timeer);
oDt.onmouseout = function(){
	timeer = setTimeout(function(){
		oDd.style.display = 'none';
	},10);
};
oDd.onmouseover=function(){
	clearTimeout(timeer);
	this.style.display = 'block';
	oCx.style.display = 'block';
};
oDd.onmouseout=function(){
	this.style.display = 'none';
	oCx.style.display = 'none';
};
};
原文地址:https://www.cnblogs.com/lijianming180/p/12288806.html