<!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. java.sql.SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Date

    架构使用jsp+servlet+java+mysql mysql里time字段类型为datetime java实体类中该字段类型为Date 页面中,时间字段类型为空的信息显示不出来,且报错信息如下: ...

  2. 关于session_cache_expire 的理解

    session_cache_limiter,它是session在客户端的缓存方式,有nocache,private,private_no_expire,publice主这几种. cache是属于浏览器 ...

  3. Java如何处理运行时异常？

    在Java编程中,如何处理运行时异常? 此示例显示如何处理java程序中的运行时异常. package com.yiibai; public class RuntimeExceptions { sta ...

  4. 让你的MyEclipse像Visual Studio 2008一样拥有强大功能智能感知功能

    Windows→Preferences→Java→Editor→Content Assist 我们看到其中的AutoActivation Delay默认值为200(单位是毫秒)也就是说在打“.”之后停 ...

  5. Android 开源动画框架：NineOldAndroids

    介绍 Android 平台提供两种动画系统:Property Animation(Android 3.0引入)和View Animation.这两种动画都可供选择,但是Property Animati ...

  6. QComboBox：类似于的百度的搜索提示

    参考: http://blog.csdn.net/lingchen214/article/details/17960789 http://blog.sina.com.cn/s/blog_a6fb6cc ...

  7. array_multisort—对多个数组或多维数组进行排序

    From: http://www.cnblogs.com/lwbqqyumidi/archive/2013/01/31/2887188.html PHP中array_multisort可以用来一次对多 ...

  8. RTC教程

    Tutorial: Get started with Rational Team Concert Getting Started with Jazz Source Control RTC入门教程及冲突 ...

  9. .net 图片上传

      /// <summary>      /// asp.net上传图片并生成缩略图      /// </summary>      /// <param name=& ...

  10. iOS模拟(糟糕的)网络环境

    有时候为了模拟在糟糕的网络环境下app的表现,会故意拔网线(断wifi),苹果其实提供了专门的工具来精确地模拟你在几个预设的场景下的网络连接情况:Network Link Conditioner 点击 ...