<!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> </title>
<style>
.fat-nav, .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before {
-moz-transition-duration: .4s;
-o-transition-duration: .4s;
-webkit-transition-duration: .4s
}
.hamburger {
display: block;
width: 50px;
height: 50px;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
padding: 12px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
-ms-touch-action: manipulation;
touch-action: manipulation
}
.hamburger__icon {
position: relative;
margin-top: 7px;
margin-bottom: 7px
}
.hamburger__icon, .hamburger__icon:after, .hamburger__icon:before {
display: block;
width: 25px;
height: 2px;
background-color: #222;
-moz-transition-property: background-color, -moz-transform;
-o-transition-property: background-color, -o-transform;
-webkit-transition-property: background-color, -webkit-transform;
transition-property: background-color, transform;
transition-duration: .4s
}
.hamburger__icon:after, .hamburger__icon:before {
position: absolute;
content: ""
}
.hamburger__icon:before {
top: -7px
}
.hamburger__icon:after {
top: 7px
}
.hamburger.active .hamburger__icon {
background-color: transparent
}
.hamburger.active .hamburger__icon:after, .hamburger.active .hamburger__icon:before {
background-color: #fff
}
.hamburger.active .hamburger__icon:before {
-moz-transform: translateY(7px) rotate(45deg);
-ms-transform: translateY(7px) rotate(45deg);
-webkit-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg)
}
.hamburger.active .hamburger__icon:after {
-moz-transform: translateY(-7px) rotate(-45deg);
-ms-transform: translateY(-7px) rotate(-45deg);
-webkit-transform: translateY(-7px) rotate(-45deg);
transform: translateY(-7px) rotate(-45deg)
}
.fat-nav {
top: 0;
left: 0;
z-index: 9999;
position: fixed;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
transition-duration: .4s;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch
}
.fat-nav__wrapper {
width: 100%;
height: 100%;
display: table;
table-layout: fixed
}
.fat-nav.active {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.fat-nav ul {
display: table-cell;
vertical-align: middle;
margin: 0;
padding: 0
}
.fat-nav li {
list-style-type: none;
text-align: center;
padding: 10px;
font-size: 2em
}
.fat-nav li, .fat-nav li a {
color: #fff
}
.fat-nav li a {
text-decoration: none
}
h1,
h2,
h3,
h4 {
margin-top: 20px;
margin-bottom: 20px;
}
h1 {
font-weight: 400;
font-size: 60px;
}
h2 {
font-weight: 300;
font-size: 36px;
}
h3 {
font-weight: 400;
font-size: 28px;
}
h4 {
font-weight: 400;
font-size: 20px;
}
.cta {
margin-top: 100px;
}
.avatar {
margin-top: 40px;
}
.hamburger__icon,
.hamburger__icon:before,
.hamburger__icon:after {
background-color: #666;
}
.text-center {
text-align: center;
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fat-nav">
<div class="fat-nav__wrapper">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PROJECT</a></li>
<li><a href="#">SOURCE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fatNav.min.js"></script>
<script type="text/javascript">
(function() {
$.fatNav();
}());
</script>
</body>
</html>
