Меню aTmplMenuAnimation

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Меню aTmplMenuAnimation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/design/adaptive-slider/2014/juicy-slider/jquery-1.10.2.js"></script>
<script src="/design/adaptive-menu/2014/animation/atmplmenuanimation.min.js"></script>
<style>
@-webkit-keyframes aTmplMenuEffect{
from{
-webkit-transform:scale(0)
}
80%{
-webkit-transform:scale(0)
}
90%{
-webkit-transform:scale(1.2)
}
to{
-webkit-transform:scale(1)
}
}
@-moz-keyframes aTmplMenuEffect{
from{
-moz-transform:scale(0)
}
80%{
-moz-transform:scale(0)
}
90%{
-moz-transform:scale(1.2)
}
to{
-moz-transform:scale(1)
}
}
@-o-keyframes aTmplMenuEffect{
from{
-o-transform:scale(0)
}
80%{
-o-transform:scale(0)
}
90%{
-o-transform:scale(1.2)
}
to{
-o-transform:scale(1)
}
}
@keyframes aTmplMenuEffect{
from{
transform:scale(0)
}
80%{
transform:scale(0)
}
90%{
transform:scale(1.2)
}
to{
transform:scale(1)
}
}
.aTmplMenuButton{
-webkit-animation:aTmplMenuEffect 1.5s ease-in;
-moz-animation:aTmplMenuEffect 1.5s ease-in;
animation:aTmplMenuEffect 1.5s ease-in
}
@media only screen and (max-width: 800px){
@-webkit-keyframes aTmplMenuEffectleft{
from{
-webkit-transform:translateX(-80%)
}
80%{
-webkit-transform:translateX(5%)
}
90%{
-webkit-transform:translateX(-5%)
}
to{
-webkit-transform:translateX(0)
}
}
@-moz-keyframes aTmplMenuEffectleft{
from{
-moz-transform:translateX(-80%)
}
80%{
-moz-transform:translateX(5%)
}
90%{
-moz-transform:translateX(-5%)
}
to{
-moz-transform:translateX(0)
}
}
@-o-keyframes aTmplMenuEffectleft{
from{
-o-transform:translateX(-80%)
}
80%{
-o-transform:translateX(5%)
}
90%{
-o-transform:translateX(-5%)
}
to{
-o-transform:translateX(0)
}
}
@keyframes aTmplMenuEffectleft{
from{
transform:translateX(-80%)
}
80%{
transform:translateX(5%)
}
90%{
transform:translateX(-5%)
}
to{
transform:translateX(0)
}
}
@-webkit-keyframes aTmplMenuEffectright{
from{
-webkit-transform:translateX(80%)
}
80%{
-webkit-transform:translateX(-5%)
}
90%{
-webkit-transform:translateX(5%)
}
to{
-webkit-transform:translateX(0)
}
}
@-moz-keyframes aTmplMenuEffectright{
from{
-moz-transform:translateX(80%)
}
80%{
-moz-transform:translateX(-5%)
}
90%{
-moz-transform:translateX(5%)
}
to{
-moz-transform:translateX(0)
}
}
@-o-keyframes aTmplMenuEffectright{
from{
-o-transform:translateX(80%)
}
80%{
-o-transform:translateX(-5%)
}
90%{
-o-transform:translateX(5%)
}
to{
-o-transform:translateX(0)
}
}
@keyframes aTmplMenuEffectright{
from{
transform:translateX(80%)
}
80%{
transform:translateX(-5%)
}
90%{
transform:translateX(5%)
}
to{
transform:translateX(0)
}
}
#aTmplMenuAnimation ul.open li:nth-of-type(odd){
-webkit-animation:aTmplMenuEffectleft 0.4s ease-in;
-moz-animation:aTmplMenuEffectleft 0.4s ease-in;
animation:aTmplMenuEffectleft 0.4s ease-in
}
#aTmplMenuAnimation ul.open li:nth-of-type(even){
-webkit-animation:aTmplMenuEffectright 0.4s ease-in;
-moz-animation:aTmplMenuEffectright 0.4s ease-in;
animation:aTmplMenuEffectright 0.4s ease-in
}
}
@media only screen and (min-width: 800px){
@-webkit-keyframes menumediaeffect{
from{
-webkit-transform:scale(0)
}
to{
-webkit-transform:scale(1)
}
}
@-moz-keyframes menumediaeffect{
from{
-moz-transform:scale(0)
}
to{
-moz-transform:scale(1)
}
}
@-o-keyframes menumediaeffect{
from{
-o-transform:scale(0)
}
to{
-o-transform:scale(1)
}
}
@keyframes menumediaeffect{
from{
transform:scale(0)
}
to{
transform:scale(1)
}
}
@-webkit-keyframes aTmplMenuEffectleft{
from{
-webkit-transform:translateX(-80%)
}
to{
-webkit-transform:translateX(0)
}
}
@-moz-keyframes aTmplMenuEffectleft{
from{
-moz-transform:translateX(-80%)
}
to{
-moz-transform:translateX(0)
}
}
@-o-keyframes aTmplMenuEffectleft{
from{
-o-transform:translateX(-80%)
}
to{
-o-transform:translateX(0)
}
}
@keyframes aTmplMenuEffectleft{
from{
transform:translateX(-80%)
}
to{
transform:translateX(0)
}
}
@-webkit-keyframes aTmplMenuEffectright{
from{
-webkit-transform:translateX(80%)
}
to{
-webkit-transform:translateX(0)
}
}
@-moz-keyframes aTmplMenuEffectright{
from{
-moz-transform:translateX(80%)
}to{-moz-transform:translateX(0)
}
}
@-o-keyframes aTmplMenuEffectright{
from{
-o-transform:translateX(80%)
}
to{
-o-transform:translateX(0)
}
}
@keyframes aTmplMenuEffectright{
from{
transform:translateX(80%)
}
to{
transform:translateX(0)
}
}
#aTmplMenuAnimation ul.open{
-webkit-animation:menumediaeffect 0.6s ease-in;
-moz-animation:menumediaeffect 0.6s ease-in;
animation:menumediaeffect 0.6s ease-in
}
#aTmplMenuAnimation ul.open li:nth-of-type(odd){
-webkit-animation:aTmplMenuEffectleft 0.6s ease-in;
-moz-animation:aTmplMenuEffectleft 0.6s ease-in;
animation:aTmplMenuEffectleft 0.6s ease-in
}
#aTmplMenuAnimation ul.open li:nth-of-type(even){
-webkit-animation:aTmplMenuEffectright 0.6s ease-in;
-moz-animation:aTmplMenuEffectright 0.6s ease-in;
animation:aTmplMenuEffectright 0.6s ease-in
}
}
#aTmplMenuAnimation{
padding:0;
height:90px;
text-align:center;
position:fixed;
top:0;
width:100%;
background:transparent;
z-index:10;
max-height:100%;
overflow-y:hidden
}
#aTmplMenuAnimation:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
margin-right:-0.25em
}
#aTmplMenuAnimation ul#aTmplMenuUp{
display:inline-block;
vertical-align:middle
}
#aTmplMenuAnimation.open{
height:100%;
-webkit-overflow-scrolling:touch;
z-index:666
}
#aTmplMenuAnimation ul{
list-style:none;
margin:-50rem 0 5rem 0;
padding:0
}
#aTmplMenuAnimation ul.open{
margin-top:10rem
}
#aTmplMenuAnimation ul.open li{
margin-left:0
}
#aTmplMenuAnimation li{
display:block;
font-size:4rem;
line-height:6rem
}
#aTmplMenuAnimation li a{
text-decoration:none;
color:#333;
display:block
}
#aTmplMenuAnimation li a:hover{
color:#ff00ff
}
#aTmplMenuAnimation li a:active{
color:#00fa9a
}
#aTmplMenuAnimation .aTmplMenuButton{
position:absolute;
right:6%;
top:22px;
cursor:pointer
}
#aTmplMenuAnimation .aTmplMenuButton span{
width:32px;
height:4px;
margin-bottom:6px;
background-color:#000;
display:block
}
#aTmplMenuAnimation .aTmplMenuButton.open{
display:block;
height:27px;
width:35px
}
#aTmplMenuAnimation.open{
background:#fff;
background:rgba(255,255,255,0.8)
}
#aTmplMenuAnimation ul{
list-style:none;
margin:-50rem 0 5rem 0;
padding:0
}
#aTmplMenuAnimation ul.open{
margin-top:10rem
}
#aTmplMenuAnimation ul.open li{
margin-left:0
}
#aTmplMenuAnimation li{
display:block;
font-size:4rem;
line-height:6rem
}
#aTmplMenuAnimation li a{
text-decoration:none;
color:#333;
display:block
}
#aTmplMenuAnimation li a:hover{
color:#ff00ff
}
#aTmplMenuAnimation li a:active{
color:#00fa9a
}
#aTmplMenuAnimation .aTmplMenuButton{
position:absolute;
right:22px;
top:22px;
cursor:pointer
}
#aTmplMenuAnimation .aTmplMenuButton span{
width:32px;
height:4px;
margin-bottom:6px;
background-color:#000;
display:block
}
#aTmplMenuAnimation .aTmplMenuButton.open{
display:block;
height:27px;
width:35px
}
#aTmplMenuAnimation .aTmplMenuButton.open span{
margin:0;
position:absolute;
right:6%;
top:10px;
background:red
}
#aTmplMenuAnimation .aTmplMenuButton.open span:nth-of-type(1){
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)
}
#aTmplMenuAnimation .aTmplMenuButton.open span:nth-of-type(2){
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg)
}
#aTmplMenuAnimation .aTmplMenuButton.open span:nth-of-type(3){display:none}
#aTmplMenuAnimation ul.open{margin-top:5rem}
#aTmplMenuAnimation .aTmplMenuButton{top:39px}
@media only screen and (max-width: 320px){
#aTmplMenuAnimation li{
font-size:1rem;
line-height:1.75rem
}
}
@media only screen and (max-width: 480px){
#aTmplMenuAnimation li{
font-size:2rem;
line-height:2.25rem
}
}
@media only screen and (min-width: 1200px){
#aTmplMenuAnimation{
background:transparent;
border:none;
pointer-events:visible
}
#aTmplMenuAnimation .aTmplMenuButton{
right:2.5%;
pointer-events:visible
}
#aTmplMenuAnimation.open{
background:#fff;
background:rgba(255,255,255,0.8)
}
#aTmplMenuAnimation.open a{
pointer-events:visible
}
}
@media only screen and (min-width: 1600px){
#aTmplMenuAnimation .aTmplMenuButton{
right:60px;top:60px
}
}
</style>
</head>
<body>
<nav id="aTmplMenuAnimation" role="navigation">
<ul id="aTmplMenuUp">
<li><a href="//atmpl.ru/">Главная</a></li>
<li><a href="//atmpl.ru/publ">Дизайн</a></li>
<li><a href="//atmpl.ru/load">Шаблоны</a></li>
<li><a href="//atmpl.ru/index/to_make_responsive_website/0-2">Сайт</a></li>
<li><a href="//atmpl.ru/test/responsive/check-the-site-for-adaptability.html">Тест</a></li>
</ul>
<div class='aTmplMenuButton'>
<span></span><span></span><span></span>
</div>
</nav>
</body>
</html>