Js 导航菜单

最新推荐文章于 2023-02-11 16:40:11 发布

OPPPPOP

最新推荐文章于 2023-02-11 16:40:11 发布

阅读量648

点赞数 1

文章标签： javascript menu html

本文链接：https://blog.csdn.net/antiwise/article/details/6718615

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<style type="text/css">
#menu ul{margin:0;padding:0;border-bottom:1px solid #888;list-style:none;width:126px;}
#menu li{padding:2px;border-style:solid;border-width:1px 1px 0 1px;border-color:#888;width:120px;line-height:22px;position:relative;background-color:#ccc;}
#menu ul ul{display:none;position:absolute;top:-1px;right:-123px;z-index:1;}
#menu a{color:#00f;text-decoration:none;display:block;font-size:12px;}
#menu a:hover{text-decoration:underline;color:#e82;}
</style>
<body>
<div id="menu" style="margin:100px;padding:2px;">
	<ul>
		<li><a href="javascript:void(0);">menu></a>
			<ul>
				<li><a href="javascript:void(0);">menu></a>
					<ul>
						<li><a href="javascript:void(0);">menu</a></li>
						<li><a href="javascript:void(0);">menu</a></li>
					</ul>
				</li>
				<li><a href="javascript:void(0);">menu></a>
					<ul>
						<li><a href="javascript:void(0);">menu</a></li>
						<li><a href="javascript:void(0);">menu></a>
							<ul>
								<li><a href="javascript:void(0);">menu</a></li>
								<li><a href="javascript:void(0);">menu</a></li>
								<li><a href="javascript:void(0);">menu</a></li>
								<li><a href="javascript:void(0);">menu</a></li>
							</ul>
						</li>
						<li><a href="javascript:void(0);">menu</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
</body>
<script type="text/javascript">
(function () {
	function addEvent(ele, type, fn) {
		if (ele.addEventListener) {
            ele.addEventListener(type, fn, false);
            return true;
        } else if (ele.attachEvent) {
            return ele.attachEvent('on' + type, fn);
        } else {
            elem['on'+ type] = fn;
        }
    };
	var mi = function (_e) {
		this.style.backgroundColor = '#fff';
		var e = _e || window.event;
		var that = e.relatedTarget || e.fromElement;
		if (that) {
			if (typeof(this.compareDocumentPosition) === 'function' && this.compareDocumentPosition(that) == 20 || typeof(this.contains)==='function' && this.contains(that)) {
				return;
			}
		}
		var ds = this.getElementsByTagName('ul');
		if (ds.length > 0) {
			ds[0].style.display = 'block';
		}
	};
	var mo = function (_e) {
		var e = _e || window.event;
		var that = e.relatedTarget || e.toElement;
		if (that) {
			if (typeof(this.compareDocumentPosition) === 'function' && this.compareDocumentPosition(that) == 20 || typeof(this.contains)==='function' && this.contains(that)) {
				return;
			}
		}
		this.style.backgroundColor = '';
		var ds = this.getElementsByTagName('ul');
		if (ds.length > 0) {
			ds[0].style.display = 'none';
		}
	};
	var el = document.getElementById('menu');
	var ms = el.getElementsByTagName('li');
	for(var i = 0, l = ms.length; i < l; i ++) {
		addEvent(ms[i], 'mouseover', mi);
		addEvent(ms[i], 'mouseout', mo);
	}
})();	
</script>
</html>