以下是 适合移动手机的侧边栏滑动代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/styles.css">
<style type="text/css">
body {
width: 100%;
height: 100%;
}
.slideout-menu {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 0;
width: 256px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: none;
}
.slideout-panel {
position:relative;
z-index: 1;
}
.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
overflow: hidden;
}
.slideout-open .slideout-menu {
display: block;
}
</style>
</head>
<body>
<nav id="menu" class="menu">
<a href="#" target="_blank">
<header class="menu-header">
<span class="menu-header-title">内容</span>
</header>
</a>
<section class="menu-section">
<h3 class="menu-section-title">脚本代码</h3>
<ul class="menu-section-list">
<li><a href="#" target="_blank">jQuery</a></li>
<li><a href="#" target="_blank">CSS3</a></li>
<li><a href="#" target="_blank">HTML5</a></li>
<li><a href="#" target="_blank">动画效果</a></li>
</ul>
</section>
<section class="menu-section">
<h3 class="menu-section-title">flash动画</h3>
<ul class="menu-section-list">
<li><a href="#" target="_blank">节日动画</a></li>
<li><a href="#" target="_blank">flash植物</a></li>
<li><a href="#">flash动物</a></li>
</ul>
</section>
<section class="menu-section">
<h3 class="menu-section-title">音效下载</h3>
<ul class="menu-section-list">
<li><a href="#" target="_blank">鸟叫声</a></li>
<li><a href="#" target="_blank">狗叫声</a></li>
</ul>
</section>
</nav>
<main id="main" class="panel">
<button class="btn-hamburger js-slideout-toggle">
<span class="tooltip">点击打开</span>
</button>
</main>
<script type="text/javascript" src="js/slideout.min.js"></script>
<script type="text/javascript">
var slideout = new Slideout({
'panel': document.getElementById('main'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
document.querySelector('.js-slideout-toggle').addEventListener('click', function() {
slideout.toggle();
});
document.querySelector('.menu').addEventListener('click', function(eve) {
if (eve.target.nodeName === 'A') { slideout.close(); }
});
function aload(t){"use strict";t=t||window.document.querySelectorAll("[data-aload]"),void 0===t.length&&(t=[t]);var a,e=0,r=t.length;for(e;r>e;e+=1)a=t[e],a["LINK"!==a.tagName?"src":"href"]=a.getAttribute("data-aload"),a.removeAttribute("data-aload");return t}
window.onload = function(){
aload();
document.querySelector('.iphone').className += ' shown';
}
</script>
</body>
</html>
JS代码(slideout.min.js):
!function(t){
if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();
else if("function"==typeof define&&define.amd)define([],t);
else{
var e;
"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.Slideout=t()}
}
(function(){
var t,e,n;
return function i(t,e,n){
function o(s,a){
if(!e[s]){
if(!t[s]){
var u=typeof require=="function"&&require;
if(!a&&u)return u(s,!0);
if(r)return r(s,!0);
var f=new Error("Cannot find module '"+s+"'");
throw f.code="MODULE_NOT_FOUND",f}
var l=e[s]={
exports:{
}
}
;
t[s][0].call(l.exports,function(e){
var n=t[s][1][e];
return o(n?n:e)}
,l,l.exports,i,t,e,n)}
return e[s].exports}
var r=typeof require=="function"&&require;
for(var s=0;
s<n.length;
s++)o(n[s]);
return o}
({
1:[function(t,e,n){
"use strict";
var i=t("decouple");
var o=t("emitter");
var r;
var s=false;
var a=window.document;
var u=a.documentElement;
var f=window.navigator.msPointerEnabled;
var l={
start:f?"MSPointerDown":"touchstart",move:f?"MSPointerMove":"touchmove",end:f?"MSPointerUp":"touchend"}
;
var c=function _(){
var t=/^(Webkit|Khtml|Moz|ms|O)(?=[A-Z])/;
var e=a.getElementsByTagName("script")[0].style;
for(var n in e){
if(t.test(n)){
return"-"+n.match(t)[0].toLowerCase()+"-"}
}
if("WebkitOpacity"in e){
return"-webkit-"}
if("KhtmlOpacity"in e){
return"-khtml-"}
return""}
();
function p(t,e){
for(var n in e){
if(e[n]){
t[n]=e[n]}
}
return t}
function h(t,e){
t.prototype=p(t.prototype||{
}
,e.prototype)}
function d(t){
t=t||{
}
;
this._startOffsetX=0;
this._currentOffsetX=0;
this._opening=false;
this._moved=false;
this._opened=false;
this._preventOpen=false;
this._touch=t.touch===undefined?true:t.touch&&true;
this.panel=t.panel;
this.menu=t.menu;
this.panel.className+=" slideout-panel";
this.menu.className+=" slideout-menu";
this._fx=t.fx||"ease";
this._duration=parseInt(t.duration,10)||300;
this._tolerance=parseInt(t.tolerance,10)||70;
this._padding=this._translateTo=parseInt(t.padding,10)||256;
this._orientation=t.side==="right"?-1:1;
this._translateTo*=this._orientation;
if(this._touch){
this._initTouchEvents()}
}
h(d,o);
d.prototype.open=function(){
var t=this;
this.emit("beforeopen");
if(u.className.search("slideout-open")===-1){
u.className+=" slideout-open"}
this._setTransition();
this._translateXTo(this._translateTo);
this._opened=true;
setTimeout(function(){
t.panel.style.transition=t.panel.style["-webkit-transition"]="";
t.emit("open")}
,this._duration+50);
return this}
;
d.prototype.close=function(){
var t=this;
if(!this.isOpen()&&!this._opening){
return this}
this.emit("beforeclose");
this._setTransition();
this._translateXTo(0);
this._opened=false;
setTimeout(function(){
u.className=u.className.replace(/ slideout-open/,"");
t.panel.style.transition=t.panel.style["-webkit-transition"]=t.panel.style[c+"transform"]=t.panel.style.transform="";
t.emit("close")}
,this._duration+50);
return this}
;
d.prototype.toggle=function(){
return this.isOpen()?this.close():this.open()}
;
d.prototype.isOpen=function(){
return this._opened}
;
d.prototype._translateXTo=function(t){
this._currentOffsetX=t;
this.panel.style[c+"transform"]=this.panel.style.transform="translate3d("+t+"px,0,0)"}
;
d.prototype._setTransition=function(){
this.panel.style[c+"transition"]=this.panel.style.transition=c+"transform "+this._duration+"ms "+this._fx}
;
d.prototype._initTouchEvents=function(){
var t=this;
i(a,"scroll",function(){
if(!t._moved){
clearTimeout(r);
s=true;
r=setTimeout(function(){
s=false}
,250)}
}
);
a.addEventListener(l.move,function(e){
if(t._moved){
e.preventDefault()}
}
);
this.panel.addEventListener(l.start,function(e){
if(typeof e.touches==="undefined"){
return}
t._moved=false;
t._opening=false;
t._startOffsetX=e.touches[0].pageX;
t._preventOpen=!t._touch||!t.isOpen()&&t.menu.clientWidth!==0}
);
this.panel.addEventListener("touchcancel",function(){
t._moved=false;
t._opening=false}
);
this.panel.addEventListener(l.end,function(){
if(t._moved){
t._opening&&Math.abs(t._currentOffsetX)>t._tolerance?t.open():t.close()}
t._moved=false}
);
this.panel.addEventListener(l.move,function(e){
if(s||t._preventOpen||typeof e.touches==="undefined"){
return}
var n=e.touches[0].clientX-t._startOffsetX;
var i=t._currentOffsetX=n;
if(Math.abs(i)>t._padding){
return}
if(Math.abs(n)>20){
t._opening=true;
var o=n*t._orientation;
if(t._opened&&o>0||!t._opened&&o<0){
return}
if(o<=0){
i=n+t._padding*t._orientation;
t._opening=false}
if(!t._moved&&u.className.search("slideout-open")===-1){
u.className+=" slideout-open"}
t.panel.style[c+"transform"]=t.panel.style.transform="translate3d("+i+"px,0,0)";
t.emit("translate",i);
t._moved=true}
}
)}
;
d.prototype.enableTouch=function(){
this._touch=true;
return this}
;
d.prototype.disableTouch=function(){
this._touch=false;
return this}
;
e.exports=d}
,{
decouple:2,emitter:3}
],2:[function(t,e,n){
"use strict";
var i=function(){
return window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(t){
window.setTimeout(t,1e3/60)}
}
();
function o(t,e,n){
var o,r=false;
function s(t){
o=t;
a()}
function a(){
if(!r){
i(u);
r=true}
}
function u(){
n.call(t,o);
r=false}
t.addEventListener(e,s,false)}
e.exports=o}
,{
}
],3:[function(t,e,n){
"use strict";
var i=function(t,e){
if(!(t instanceof e)){
throw new TypeError("Cannot call a class as a function")}
}
;
n.__esModule=true;
var o=function(){
function t(){
i(this,t)}
t.prototype.on=function e(t,n){
this._eventCollection=this._eventCollection||{
}
;
this._eventCollection[t]=this._eventCollection[t]||[];
this._eventCollection[t].push(n);
return this}
;
t.prototype.once=function n(t,e){
var n=this;
function i(){
n.off(t,i);
e.apply(this,arguments)}
i.listener=e;
this.on(t,i);
return this}
;
t.prototype.off=function o(t,e){
var n=undefined;
if(!this._eventCollection||!(n=this._eventCollection[t])){
return this}
n.forEach(function(t,i){
if(t===e||t.listener===e){
n.splice(i,1)}
}
);
if(n.length===0){
delete this._eventCollection[t]}
return this}
;
t.prototype.emit=function r(t){
var e=this;
for(var n=arguments.length,i=Array(n>1?n-1:0),o=1;
o<n;
o++){
i[o-1]=arguments[o]}
var r=undefined;
if(!this._eventCollection||!(r=this._eventCollection[t])){
return this}
r=r.slice(0);
r.forEach(function(t){
return t.apply(e,i)}
);
return this}
;
return t}
();
n["default"]=o;
e.exports=n["default"]}
,{
}
]}
,{
}
,[1])(1)}
);
CSS代码(default.css):
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:1em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}
CSS代码(styles.css):
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:700}
dfn{font-style:italic}
h1{font-size:2em;margin:.67em 0}
mark{background:#ff0;color:#000}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input{line-height:normal}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
/*! prismjs Styles */
code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
code[class*=language-]::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}
code[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-]::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}
@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}
}
pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}
:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}
.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}
.token.punctuation{color:#999}
.namespace{opacity:.7}
.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}
.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}
.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}
.token.atrule,.token.attr-value,.token.keyword{color:#07a}
.token.function{color:#DD4A68}
.token.important,.token.regex,.token.variable{color:#e90}
.token.bold,.token.important{font-weight:700}
.token.italic{font-style:italic}
.token.entity{cursor:help}
pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}
pre.line-numbers>code{position:relative}
.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}
.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
html,body{font:100%/1.4em 'Calibre Light','Helvetica Neue',Helvetica,Arial,sans-serif;margin:0 auto;color:#222;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased;}
pre{margin:0;font-size:14px;}
body,.panel{background-color:#fff;}
.menu{background-color:#1D1F20;background-image:linear-gradient(145deg,#1D1F20,#404348);}
a{color:#4B5;text-decoration:none;}
.menu a{color:#fff;}
.menu a:hover{text-decoration:underline;}
.menu-header{border-bottom:1px solid #2a2d2f;padding:20px 0 20px 60px;background:url('../images/github.png') no-repeat 15px 15px;background-size:32px;}
.menu-header-title{font-weight:400;letter-spacing:0.5px;margin:0;}
.menu-section{margin:25px 0;}
.menu-section-title{text-transform:uppercase;color:#85888d;font-weight:200;font-size:13px;letter-spacing:1px;padding:0 20px;margin:0;}
.menu-section-list{padding:0;margin:10px 0;list-style:none;}
.menu-section-list a{display:block;padding:10px 20px;}
.menu-section-list a:hover{background-color:rgba(255,255,255,0.1);text-decoration:none;}
.panel{text-align:center;padding-top:5px;min-height:100%;}
/** * Header */
.panel-header{margin:85px auto 55px;}
.title{font-size:3.2em;line-height:1em;margin:0 0 15px;color:#4B5;font-weight:400;padding-top:82px;background:url('../images/mango-logo.png') no-repeat center top;}
.subtitle{font-weight:400;font-size:1.3em;line-height:1.2em;margin:0 0 45px 0;color:#767676;}
/** * Action buttons */
.panel-actions{margin:20px 0;}
.btn{text-decoration:none;padding:0px 14px;border-radius:4px;line-height:50px;display:inline-block;border:1px solid #4B5;width:35%;font-size:1.2em;}
.btn-download{margin-right:5px;background-color:#4B5;color:#fff;font-weight:600;}
.btn-download:hover{background-color:#3da84b;border-color:#369643;}
.btn-fork{margin-left:5px;background-color:#fff;}
.btn-fork:hover{background-color:rgba(0,0,0,.02);}
/** * iPhone */
.iphone{background:url('../images/iphone5.png') no-repeat;position:relative;margin:0 auto;width:298px;height:597px;}
.iphone img,.iphone video{position:absolute;top:73px;left:25px;height:446px;max-width:100%;}
.iphone video{display:none;}
/** * hamburger */
.btn-hamburger{border:none;position:absolute;top:12px;left:12px;outline:none;background:url('../images/menu.png') no-repeat left center;}
.tooltip{font-size:20px;line-height:19px;display:inline-block;background:#4B5 url('../images/happy.png') no-repeat 135px 15px;color:#fff;padding:10px 45px 10px 20px;border-radius:4px;position:relative;left:50px;}
.tooltip:before{content:'';display:inline-block;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #4B5;position:absolute;top:50%;left:-5px;margin-top:-6px;}
/** * Boxes */
.box{border:1px solid #4b5;border-radius:4px;text-align:left;margin:50px 10px;position:relative;}
.box:before,.box:after{content:' ';display:inline-block;width:1px;height:50px;border-left:1px solid #4b5;position:absolute;left:50%;}
.box:before{top:-50px;}
.box:after{bottom:-50px;}
.box-title{margin:0;padding:10px 20px;border-bottom:1px solid #4b5;color:#4b5;font-size:1.2em;font-weight:400;}
.box-content{padding:20px;background-color:#f8f8f8;}
/** * Medium Screens */
@media all and (min-width:40em){.btn-hamburger{top:20px;left:30px;}
.panel-header{margin-top:40px;width:455px;}
.title{font-size:4.2em;}
.subtitle{font-size:1.8em;}
.btn-download{margin-right:20px;}
.btn-fork{margin-left:20px;}
/*.iphone{transition:transform 1s ease,top 1s ease;transform:translateY(305px);top:305px;}
.iphone.shown{transform:translateY(0);top:0;}
*/
}
/** * Large Screens */
@media all and (min-width:54em){.box{width:70%;max-width:1200px;margin:50px auto;}
.iphone video{display:block;}
.iphone img{display:none;}
}
/** * Footer */
.panel-footer{margin:10px auto 20px;}
.panel-footer p{padding-bottom:20px;}
.heart{font-style:normal;font-weight:500;color:#c0392b;text-decoration:none;}
.share-buttons{display:block;margin:20px auto 0;padding:15px 20px 5px;width:190px;overflow:hidden;}
#github-button{float:left;width:90px;}
/** * Slideout module styles */
html,body{width:100%;height:100%;}
.menu,.slideout-menu{position:fixed;left:0;top:0;bottom:0;right:0;z-index:0;width:256px;overflow-y:scroll;-webkit-overflow-scrolling:touch;display:none;}
.panel,.slideout-panel{position:relative;z-index:1;}
.slideout-open,.slideout-open body{overflow:hidden;}
.slideout-open .slideout-menu{display:block;}
/* Animation---------------------------------- */
@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
50%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0);}
}
@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
50%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0);}
}
.shake{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:4;animation-iteration-count:4;}
分享到QQ
分享到微博
微信扫一扫
