js+css3电脑手机端自适应响应式导航菜单代码-刺猬源码

js+css3电脑手机端自适应响应式导航菜单代码

js+css3实现响应式导航菜单代码是一款类似bootstrap导航菜单，它通过media query制作760像素断点，当视口小于760像素时，菜单会收缩为隐藏的汉堡包菜单，根据浏览窗口大小自适应手机电脑平板端。

JS代码

<script type="text/javascript">

	function addListener(element, type, callback) {
		if (element.addEventListener) {
			element.addEventListener(type, callback);
		} else if (element.attachEvent) {
			element.attachEvent('on' + type, callback);
		}
	}

	addListener(document, 'DOMContentLoaded', function () {
		
		var mq = window.matchMedia("(max-width: 760px)");
		if (mq.matches) {
			document.getElementById("menu_list").classList.add("hidden");
		}

		addListener(document.getElementById("menu_button"), 'click', function () {
			document.getElementById("menu_list").classList.toggle("hidden");
		});
		
		addListener(window, 'resize', function () {
			var width = window.innerWidth ||
						document.documentElement.clientWidth ||
						document.body.clientWidth;
			
			if (width > 760) {
				document.getElementById("menu_list").classList.remove("hidden");
			} else {
				document.getElementById("menu_list").classList.add("hidden");
			}
		});
		
	});
</script>
VIP免费 永久VIP免费当前隐藏内容需要支付1金币
已有0人支付