js+css3制作响应式导航菜单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js+css3制作响应式导航菜单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js+css3制作响应式导航菜单代码</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav>
	<div id="menu_button_wrapper">
		<div id="menu_button">
			Menu&nbsp;&nbsp;
			<div id="hamburger">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
	
	<ul id="menu_list">
		<li class="current_page"><a href="#">Home</a></li>
		<li><a href="#">Audio</a></li>
		<li><a href="#">Video</a></li>
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contacts</a></li>
	</ul>
</nav>

<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>
</body>
</html>

CSS代码(style.css):

body{margin:0;}
.clearfix{clear:both;}
nav{font-family:Helvetica;text-align:right;text-transform:uppercase;background-color:#222;}
nav ul{width:90%;max-width:1024px;margin:0 auto;list-style-type:none;}
nav ul li{display:inline-block;}
nav ul li a{color:#9d9d9d;font-weight:bold;text-decoration:none;display:inline-block;padding:1em;box-sizing:border-box;}
nav ul li a:hover{color:white;}
.current_page{background-color:black;}
.current_page a{color:white;}
#menu_button_wrapper{display:none;}
.hidden{display:none;}
/* Responsive for smaller screens */
@media (max-width:760px){#menu_button_wrapper{display:block;padding:1em;color:#9d9d9d;border-bottom:1px solid #101010;-webkit-box-shadow:0 1px 0 rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.1);margin-bottom:.5em;}
#menu_button{box-sizing:border-box;float:right;padding:.5em 1em;border:1px solid #333;border-radius:5px;color:white;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
#menu_button:hover{cursor:pointer;background-color:#333;}
#hamburger{float:right;padding-top:.15em;}
#menu_button span{display:block;background-color:#fff;width:1.2em;height:.15em;border-radius:1px;margin-bottom:.2em;}
nav ul{width:100%;margin:0 auto;padding:0;box-sizing:border-box;}
nav ul li{display:block;}
nav ul li a{width:100%;}
}

附件:下载该文件资源,减少时间成本(增值服务)