<!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. MyBatis分页

    搞清楚什么是分页(pagination) 例如,在数据库的某个表里有1000条数据,我们每次只显示100条数据,在第1页显示第0到第99条,在第2页显示第100到199条,依次类推,这就是分页. 分页 ...

  2. e840. 监听JTabbedPane中选中卡片的改变

    A tabbed pane fires a change event whenever the selected tab is changed either by the user or progra ...

  3. C#.NET MVC 枚举转dictionary自动装载生成下拉框

      /// <summary> /// 枚举转SelectListItem /// </summary> public class Enum_Helper { /// < ...

  4. com.ibm.msg.client.jms.DetailedJMSSecurityException: JMSWMQ2013: 为队列管理器提供的安全性认证无效

    com.ibm.msg.client.jms.DetailedJMSSecurityException: JMSWMQ2013: 为队列管理器“zm_queue_manager”提供的安全性认证无效, ...

  5. linux中crontab实战篇

    1.先安装crontab,之前的文章有介绍 2.查看 crontab -l 3.编辑 crontab -e 0 7 * * * /application/php/bin/php www.xialan. ...

  6. 5.5 进入编辑模式 5.6 vim命令模式 5.7 vim实践

    5.5 进入编辑模式 5.6 vim命令模式 5.7 vim实践 进入编辑模式 小写i在当前字符前插入 大写I 在光标所在行的行首插入 大写O 在光标上面一行插入编辑 小写o在光标下面一行插入编辑 小 ...

  7. wine for MacOS

    Installing Wine on Mac This tutorial is for intermediate users who want to install and use Wine on t ...

  8. js 事件详解 冒泡

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  9. 两个大数组foreach，找出相同的key数量，所用的时间对比

    <?php function microtime_float() { list($usec, $sec) = explode(" ", microtime()); retur ...

  10. MyEclipse如何恢复删掉的文件

    今天一不小心删了项目里的两个包,心里那个痛啊,一想MyEclipse这么强大,应该会有恢复文件的功能吧,要不就太坑了啊. 果不其然让我找到了方法: 如图:右击项目选择 然后在弹出的页面勾选需要恢复的文 ...