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

作者 : 小刺猬 本文共990个字,预计阅读时间需要3分钟 发布时间: 2020-07-29 共68人阅读

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免费

已有0人支付


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

刺猬QQ交流群号多少?
363432

发表评论