<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5可拖拉的菜单</title>
<style>
@import "https://fonts.googleapis.com/css?family=Hind+Guntur";
@import "https://fonts.googleapis.com/css?family=Abril+Fatface";
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100vw;
height: 100vh;
position: relative;
background: #1e1e1e;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.no-ui {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden !important;
}
.mobile-body {
width: 40vh;
height: 70vh;
border-radius: 5px;
margin: auto;
background: white;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
box-shadow: 0 10px 30px black;
}
.container {
width: 40vh;
height: 70vh;
margin: 0 auto;
border-radius: 5px;
background: white;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
top: 0;
-webkit-transition: .5s ease all;
transition: .5s ease all;
}
article {
font-size: 14px;
font-family: 'Hind Guntur', sans-serif;
width: 100%;
opacity: 1;
}
article p,
article h1,
article h3 {
padding: 0px 35px 10px 35px;
font-weight: 100;
}
article h1 {
margin: 0;
padding: 10px 35px 0 35px;
font-family: 'Abril Fatface', cursive;
text-transform: uppercase;
}
article p {
color: #333;
margin: 0;
padding-bottom: 20px;
}
article h3 {
margin: 15px 0 0 0;
line-height: 24px;
opacity: .5;
}
article img {
width: 100%;
}
.menu-icon {
background: blue;
width: 50px;
height: 50px;
position: fixed;
top: 30px;
left: 30px;
cursor: move;
border-radius: 100%;
-webkit-transition: .1s ease all;
transition: .1s ease all;
box-shadow: 0 0 30px rgba(0, 0, 255, 0.3);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
z-index: 999;
}
.menu-icon span {
width: 24px;
height: 2px;
background: white;
position: relative;
display: block;
margin: 5px auto 0 auto;
border-radius: 5px;
}
.menu-icon span:nth-child(1) {
margin-top: 17px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.menu-icon span:nth-child(2) {
-webkit-transition: .1s ease all;
transition: .1s ease all;
}
.menu-icon span:last-child {
-webkit-transition: .3s ease all;
transition: .3s ease all;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.menu-icon.open span:nth-child(1) {
opacity: 1;
-webkit-transform: rotate(45deg) translate(3px, -3px);
transform: rotate(45deg) translate(3px, -3px);
}
.menu-icon.open span:nth-child(2) {
opacity: 0;
-webkit-transform: scale(0.2, 0.2);
transform: scale(0.2, 0.2);
}
.menu-icon.open span:last-child {
opacity: 1;
-webkit-transform: rotate(-45deg) translate(2px, 4px);
transform: rotate(-45deg) translate(2px, 4px);
}
.menu-icon.open ~ div {
-webkit-transform: scale(0.9) translate3D(0, 90%, 0);
transform: scale(0.9) translate3D(0, 90%, 0);
overflow: hidden;
}
.infos {
font-size: 12px;
position: absolute;
top: 24px;
left: 80px;
width: 100px;
font-family: 'Abril Fatface', cursive;
-webkit-transition: .5s .15s ease all;
transition: .5s .15s ease all;
color: #088BF0;
text-shadow: 0 0 10px rgba(8, 139, 240, 0.5);
}
nav {
position: absolute;
list-style-type: none;
font-family: 'Abril Fatface', cursive;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 10%;
}
nav li:nth-child(0) {
-webkit-transition: 1.2s 0s ease opacity, 0.275s ease color, 0.775s ease transform;
transition: 1.2s 0s ease opacity, 0.275s ease color, 0.775s ease transform;
opacity: 0;
color: #ddd;
font-size: 35px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
nav li:nth-child(0):hover,
nav li:nth-child(0):focus {
cursor: e-resize;
color: blue;
}
nav li:nth-child(1) {
-webkit-transition: 1.2s 0.1s ease opacity, 0.275s ease color, 0.775s ease transform;
transition: 1.2s 0.1s ease opacity, 0.275s ease color, 0.775s ease transform;
opacity: 0;
color: #ddd;
font-size: 35px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
nav li:nth-child(1):hover,
nav li:nth-child(1):focus {
cursor: e-resize;
color: blue;
}
nav li:nth-child(2) {
-webkit-transition: 1.2s 0.2s ease opacity, 0.275s ease color, 0.775s ease transform;
transition: 1.2s 0.2s ease opacity, 0.275s ease color, 0.775s ease transform;
opacity: 0;
color: #ddd;
font-size: 35px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
nav li:nth-child(2):hover,
nav li:nth-child(2):focus {
cursor: e-resize;
color: blue;
}
nav li:nth-child(3) {
-webkit-transition: 1.2s 0.3s ease opacity, 0.275s ease color, 0.775s ease transform;
transition: 1.2s 0.3s ease opacity, 0.275s ease color, 0.775s ease transform;
opacity: 0;
color: #ddd;
font-size: 35px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
nav li:nth-child(3):hover,
nav li:nth-child(3):focus {
cursor: e-resize;
color: blue;
}
nav li:nth-child(4) {
-webkit-transition: 1.2s 0.4s ease opacity, 0.275s ease color, 0.775s ease transform;
transition: 1.2s 0.4s ease opacity, 0.275s ease color, 0.775s ease transform;
opacity: 0;
color: #ddd;
font-size: 35px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
nav li:nth-child(4):hover,
nav li:nth-child(4):focus {
cursor: e-resize;
color: blue;
}
.menu-icon.open ~ nav li {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
@media only screen and (max-width: 600px) {
.mobile-body {
width: 100vw;
height: 100vh;
border-radius: 5px;
}
.container {
width: 100vw;
height: 100vh;
border-radius: 5px;
}
}
</style>
</head>
<body>
<div class="mobile-body">
<div class="menu-icon"><span></span><span></span><span></span>
</div><span class="infos">Hey, drag and move me, it's fun !</span>
<nav>
<li>Home</li>
<li>Categories</li>
<li>About</li>
<li>FAQ</li>
</nav>
<div class="container">
<article><img src="img/normal1.jpg" />
<h1>Elijah Price</h1>
<h3>Samuel L. Jackson declared this in Unbreakable (2000)</h3>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes
when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
</article>
</div>
</div>
<script>
//Me
