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>