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

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

<!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>
<style>
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%;}
}
</style>
</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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

提示:可以修改后运行.

<< 详解HTML中字体使用line-height依然不能垂直居中解决办法CSS自适应导航菜单的实例代码 >>

查看所有评论