web_qianduan
<!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
<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的更多相关文章
- 只需两步删除 node_modules
peng@PENG-PC /E/_My_File_____/home/learn/web_qianduan/mithril-demo/demo2/mithril -demo $ npm install ...
随机推荐
- 【总结】牛客职播第九期:您的美团点评offer已送到门口,快来与我们一起影响世界!
一.介绍 美团点评2018校园春招流程介绍&面试答疑 讲师:燕鹏.Taylor 二.收获 面试时如果太紧张或者内向,容易吃亏,所以建议把面试当做展示自己的一次舞台. 遇见一道编程题目,如果无法 ...
- Keystone-all 命令
本文档介绍Icehouse版keystone-all命令 keystone-all命令在一个进程中同时启动服务和管理API,为openstack提供服务目录,授权和身份认证服务. 用法 $ keyst ...
- EXP 导出出错解决方案
前言: 今天想要把 当前用户下的数据库 导出来,使用命令 导出数据库可用语句: exp bpmp/bkc123@127.0.0.1:5050/bkcyunty file=D:\bak\db_61.dm ...
- C# 获取文件大小
当然了都需要引入System.IO这个命名空间 第一个: public static long GetDirectoryLength(string dirPath){//判断给定的路径是否存在,如果不 ...
- Dependency Scopes(maven)
Dependency scope 是用来限制Dependency的作用范围的, 影响maven项目在各个生命周期时导入的package的状态. 自从2.0.9后,新增了1种,现在有了6种scope: ...
- Maven的pom.xml文件结构之基本配置parent和继承结构[转]
1.Maven项目的继承 Maven项目之间不仅存在多模块的聚合关系,而且Maven项目之间还可以存在相互继承的关系. Maven项目之间的继承关系通过<parent>表示,在子Maven ...
- php判断所在的客户端
//判断是否是手机 function is_mobile() { $agent = strtolower($_SERVER['HTTP_USER_AGENT']); $is_pc = (strpos( ...
- 【转】IOS 学习之 NSPredicate 模糊、精确、查询
转自:http://blog.csdn.net/lianbaixue/article/details/10579117 简述:Cocoa框架中的NSPredicate用于查询,原理和用法都类似于S ...
- 【转】Spring Boot干货系列:常用属性汇总
转自Spring Boot干货系列:常用属性汇总 附录A.常用应用程序属性 摘自:http://docs.spring.io/spring-boot/docs/current/reference/ht ...
- [原]使用Fiddler捕获java的网络通信数据
[原]使用Fiddler捕获java的网络通信数据 System.setProperty("http.proxySet", "true"); System.se ...