<!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>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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%;
}

}

web_qianduan的更多相关文章

  1. 只需两步删除 node_modules

    peng@PENG-PC /E/_My_File_____/home/learn/web_qianduan/mithril-demo/demo2/mithril -demo $ npm install ...

随机推荐

  1. (笔记)电路设计（十一）之DC/DC电源转换方案设计应用

    十大 法则之一:搞懂什么是DC/DC电源以及DC/DC转换电路分类 DC/DC电源电路又称为DC/DC转换电路,其主要功能就是进行输入输出电压转换.一般我们把输入电源电压在72V以内的电压变换过程称为 ...

  2. 第三百七十七节，Django+Xadmin打造上线标准的在线教育平台—apps目录建立，以及数据表生成

    第三百七十七节,Django+Xadmin打造上线标准的在线教育平台—apps目录建立,以及数据表生成 apps目录建立 我们创建一个apps目录,将所有的app放到apps目录里去,这样方便管理,也 ...

  3. [转]jQuery选择器 (详解)

    1).基本 #id 根据给定的ID匹配一个元素.例如:$("#id")element 根据给定的元素名匹配所有元素.例如:$("div").class 根据给定 ...

  4. EF5+MVC4系列(2) EF5报错 无法确定“XXX”关系的主体端。添加的多个实体可能主键相同

    情景:用户表和订单表是一对多的关系,即 一个 Userinfo  对应对应有 多个 Order表   如果我在EF中,先创建一个用户,然后创建3个订单,然后关联这1个用户和3个订单的关系,毫无问题. ...

  5. 转载：帮你提升 Python 的 27 种编程语言

    帮你提升 Python 的 27 种编程语言: 出处:http://www.oschina.net/translate/languages-to-improve-your-python

  6. zookeeper和dubbo的关系[转]

    Dubbo建议使用Zookeeper作为服务的注册中心. 1.   Zookeeper的作用:         zookeeper用来注册服务和进行负载均衡,哪一个服务由哪一个机器来提供必需让调用者知 ...

  7. CentOS系统很卡的基本排查方法

    来源:http://www.centoscn.com/CentOS/Intermediate/2017/1012/9032.html 一. 查看内存使用情况  1. free命令可查看内存使用情况 2 ...

  8. 【WPF】附加属性

    一直都对附加属性理解很模糊,今天看了一篇文章,恍然大悟,用个Demo掩饰一下对附加属性的理解 附加属性,简单的理解就是给一个对象外在的定义一个属性,使得该对象拥有和使用该属性,最典型的是Grid.Ro ...

  9. SharePoint 2013 显示“以其他用户身份登录”菜单项

    最近在SharePoint 2013的网站上发现,没有看到有切换不同用户登录的入口,在SharePoint 2010中是存在这样的菜单项能够很方便的进行用户切换的,不知道为什么,SharePoint ...

  10. angular.extend深拷贝(deep copy)

    在用到angular.extend的时候,正好碰到一个对象,是层层嵌套的Array, 结果发现只能extend第一层,查阅官文档,确实不支持deep copy: Note: Keep in mind ...