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>

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

随机推荐

Android 8 wifi blakclist
在连接wifi的时候,认证或者关联失败,有时会加入黑名单中.记录wpa_supplicant中blacklist的原理. 分析可以看到,如果是机器自己断开,是不会把AP加入黑名单的,只有AP侧出了问题 ...
SpringBoot系列六：SpringBoot整合Tomcat
声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.概念:SpringBoot 整合 Tomcat 2.背景 SpringBoot 本身支持有两类的 WEB 容器:默认的 To ...
6.查找单链表中的倒数第k个结点
普通思路:先将整个链表从头到尾遍历一次,计算出链表的长度size,得到链表的长度之后,就好办了,直接输出第(size-k)个节点就可以了(注意链表为空,k 为0,k为1,k大于链表中节点个数时的情况) ...
C语言中的数组问题
数组默认最后一位是结束符占一位, 假如是7个字节大小的数组实际输入为6个字节,最后一个字节为'\0' 这样写 char password_set[7]={"123456"}; ...
php 批量过滤关键字
代码: public function filterComment($content){ $string = "正品.真品.最.史上 .唯一.一流.独一无二.仅.独家.首.冠军. 国家级.领 ...
Salience Model
Who is a stakeholder? Simply anyone with a stake in the project either direct or indirect. PMBOK say ...
Win7下静态编译QT5.12源码
官方参考文档:https://doc.qt.io/qt-5/build-sources.html CSDN博客:https://blog.csdn.net/GG_SiMiDa/article/deta ...
妙味远程课堂-JS热身运动-上
希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性隐藏 width/height 改为0 透明度定位,left/top值为负值用与背景颜色一样 ...
添加额外的源, 使得yum可以安装更多的软件
RHEL 官方扩展源 yum localinstall http://dl.fedoraproject.org/pub/epel/7/x86_64/e/epel-release-7-5.noarch. ...
使用psutil库监控linux的系统资源和自定义进程的cpu 内存占用。
#coding=utf8 import time import psutil from pprint import pprint from logger_until import LoggerUnti ...

web_qianduan

web_qianduan的更多相关文章

随机推荐

热门专题