<!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. Unity下Iso和Persp两种模式的区别

    Iso模式 平行视野.在Iso模式下,不论物体距离摄像头远近都给人的感觉是一样大的. Persp模式 透视视野.在persp模式下,物体在scene界面上所呈现的画面是给人一种距离摄像头近的物体显示的 ...

  2. 第三百六十三节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mget和bulk批量操作

    第三百六十三节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的mget和bulk批量操作 注意:前面讲到的各种操作都是一次http请求操作一条数据,如果想 ...

  3. linux 日志查询

    tail -n 400 logname | grep "AAA" grep 简单使用 1.把要查询的行写到文本里面去: grep WXCP IC.NotifyIndexServer ...

  4. (转)Live555单线程原理

    1. 概述 在live555-Server库中,使用单线程实现了多用户请求视频数据,这似乎多线程才能实现的功能,并且用户请求视频数据各个流程衔接的都十分完美,其执行效率非常高. live555是如何实 ...

  5. Python——os（一）进程参数

    python的os模块提供了一种使用操作系统相关函数的通用手段,如果只是想读或写文件请移步 open(),向操作路径请查阅 os.path 模块,如果想要读取命令行中所有文件里的所有行请查阅 file ...

  6. CSS :after、before、<!DOCTYPE>

    <!DOCTYPE> <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. CSS :选择器 after,before

  7. Maven的pom.xml文件结构之基本配置parent和继承结构[转]

    1.Maven项目的继承 Maven项目之间不仅存在多模块的聚合关系,而且Maven项目之间还可以存在相互继承的关系. Maven项目之间的继承关系通过<parent>表示,在子Maven ...

  8. Vue 404页面处理

    问题原因: 刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径 解决方案: 第一步:后端配置 Apache <IfModule mod_rewrite.c& ...

  9. Lucene基础学习笔记

    在学校和老师一起做项目,在老师的推荐下深入学习了一些SqlServer的知识,看一些书下来哎也没记住多少,不过带来了新疑问. 不使用模糊查询,我应该用什么呢?如何能不影响数据库性能,还能做模糊查询呢? ...

  10. Thinkphp5 iis环境下安装报错400 500

    要求一:服务器需要开启伪静态功能 要求二:新建文件夹web.config 放到入口目录下(如public/web.config  或者/web.config),内容如: <?xml versio ...