Меню в виде смартфона IPhone компании Apple

<style>  
.phone {  
width:420px;  
height:808px;  
background:url(http://zornet.ru/Ajaxoskrip/Fekstura_tekst/iphone.png);  
position:relative;  
margin:50px auto;  
}  
.screen {  
width:320px;  
height:468px;  
background:#444;  
position:absolute;  
left:30px;  
top:170px;  
overflow:hidden;  
}  
.page {  
position:absolute;  
left:0;  
top:0;  
width:320px;  
height:470px;  
background:url(http://zornet.ru/Ajaxoskrip/Fekstura_tekst/sokhranennoe_izobrazhenie_2016-4-1-OkBrv.jpg);  
z-index:100;  
-webkit-transition:0.4s;  
-moz-transition:0.4s;  
-o-transition:0.4s;  
transition:0.4s;  
}  
.page h3 {  
padding:280px 0 0 0;  
margin:0;  
font:normal 28px/32px georgia, serif;  
color:#fff;  
text-align:center;  
}  
.screen input {position:absolute; display:none;}  
.m-open {  
width:50px;  
height:50px;  
position:relative;  
margin:10px auto;  
border:1px solid #ddd;  
border-radius:5px;  
}  
.m-open label {  
display:block;  
width:50px;  
height:50px;  
cursor:pointer;  
position:relative;  
}  
.m-open label:before {  
content:"";  
display:block;  
width:30px;  
height:15px;  
border-top:5px solid #fff;  
border-bottom:5px solid #fff;  
position:absolute;  
left:10px;  
top:12px;  
}  
.m-open label:after {  
content:"";  
display:block;  
width:30px;  
height:5px;  
background:#fff;  
position:absolute;  
left:10px;  
top:22px;  
}  
.menu li.m-close {position:relative; background:#505050;}  
.menu li.m-close label {  
display:block;  
width:40px;  
height:40px;  
position:absolute;  
left:145px;  
top:8px;  
cursor:pointer;  
}  
.menu li.m-close label:before {  
content:"";  
display:block;  
width:30px;  
height:15px;  
border-top:3px solid #eee;  
border-bottom:3px solid #eee;  
}  
.menu li.m-close label:after {  
content:"";  
display:block;  
width:30px;  
height:3px;  
background:#eee;  
position:absolute;  
left:0;  
top:9px;  
}  
.menu {position:absolute; left:320px; top:0; width:320px; z-index:50;  
-webkit-transition: left 0s 0.5s;  
-moz-transition: left 0s 0.5s;  
-o-transition: left 0s 0.5s;  
transition: left 0s 0.5s;  
}  
.menu ul {  
padding:0;  
margin:0;  
list-style:none;  
position:absolute;  
left:0;  
top:0;  
height:400px;  
background:#444;  
}  
.menu ul li {  
display:block;  
width:320px;  
float:left;  
height:40px;  
line-height:40px;  
background:#444;  
border-top:1px solid #666;  
border-bottom:1px solid #222;  
}  
.menu ul li a {  
display:block;  
color:#fff;  
text-decoration:none;  
font:normal 16px/40px arial, sans-serif;  
padding-left:30px;  
}  
.menu ul li a:hover {color:#6cf;}  
.menu ul ul {left:640px; z-index:100; opacity:0;  
-webkit-transform:scale(2);  
-moz-transform:scale(2);  
-o-transform:scale(2);  
transform:scale(2);  
-webkit-transform-origin: 50% 25%;  
-moz-transform-origin: 50% 25%;  
-o-transform-origin: 50% 25%;  
transform-origin: 50% 25%;  
-webkit-transition: opacity 0.5s, left 0s 0.5s, -webkit-transform 0.5s;  
-moz-transition: opacity 0.5s, left 0s 0.5s, -moz-transform 0.5s;  
-o-transition: opacity 0.5s, left 0s 0.5, -o-transform 0.5s;  
transition: opacity 0.5s, left 0s 0.5s, transform 0.5s;  
}  
.menu div {  
width:40px;  
height:40px;  
position:relative;  
float:right;  
}  
.menu div label {  
display:block;  
width:40px;  
height:40px;  
position:absolute;  
background:#505050;  
left:0;  
top:0;  
cursor:pointer;  
border-left:2px groove #666;  
}  
.menu div label:before {  
display:block;  
width:12px;  
height:12px;  
content:"";  
border-top:2px solid #fff;  
border-right:2px solid #fff;  
position:absolute;  
top:14px;  
left:10px;  
-webkit-transform:rotate(45deg);  
-moz-transform:rotate(45deg);  
-o-transform:rotate(45deg);  
transform:rotate(45deg);  
}  
.menu li.close {position:relative;}  
.menu li.close label {  
display:block;  
width:320px;  
height:40px;  
position:absolute;  
left:0;  
top:0;  
cursor:pointer;  
background:#505050;  
}  
.menu li.close label:before {  
display:block;  
width:12px;  
height:12px;  
content:"";  
border-bottom:2px solid #fff;  
border-left:2px solid #fff;  
position:absolute;  
top:14px;  
left:154px;  
-webkit-transform:rotate(45deg);  
-moz-transform:rotate(45deg);  
-o-transform:rotate(45deg);  
transform:rotate(45deg);  
}  
#menu-open:checked ~ .page {left:320px;}  
#menu-open:checked ~ .menu {  
left:0;  
transition: left 0s;  
}  
#sub1a-open:checked ~ .menu ul.sub1a,  
#sub1b-open:checked ~ .menu ul.sub1b,  
#sub1c-open:checked ~ .menu ul.sub1c,  
#sub1d-open:checked ~ .menu ul.sub1d,  
#sub2a-open:checked ~ .menu ul.sub2a,  
#sub2b-open:checked ~ .menu ul.sub2b,  
#sub2c-open:checked ~ .menu ul.sub2c,  
#sub2d-open:checked ~ .menu ul.sub2d,  
#sub2e-open:checked ~ .menu ul.sub2e,  
#sub3a-open:checked ~ .menu ul.sub3a,  
#sub3b-open:checked ~ .menu ul.sub3b {  
left:0; opacity:1;  
-webkit-transform:scale(1);  
-moz-transform:scale(1);  
-o-transform:scale(1);  
transform:scale(1);  
-webkit-transition: opacity 0.5s, left 0s, -webkit-transform 0.5s;  
-moz-transition: opacity 0.5s, left 0s, -moz-transform 0.5s;  
-o-transition: opacity 0.5s, left 0s, -o-transform 0.5s;  
transition: opacity 0.5s, left 0s, transform 0.5s;  
}  
</style>  
<div class="phone">  
<div class="screen">  
<input class="hidden" type="radio" name="m1" id="menu-open" />  
<input class="hidden" type="radio" name="m1" id="menu-close" />  
<input class="hidden" type="radio" name="s1" id="sub1a-open" />  
<input class="hidden" type="radio" name="s1" id="sub1b-open" />  
<input class="hidden" type="radio" name="s1" id="sub1c-open" />  
<input class="hidden" type="radio" name="s1" id="sub1d-open" />  
<input class="hidden" type="radio" name="s1" id="sub1-close" />  
<input class="hidden" type="radio" name="s2" id="sub2a-open" />  
<input class="hidden" type="radio" name="s2" id="sub2b-open" />  
<input class="hidden" type="radio" name="s2" id="sub2c-open" />  
<input class="hidden" type="radio" name="s2" id="sub2d-open" />  
<input class="hidden" type="radio" name="s2" id="sub2e-open" />  
<input class="hidden" type="radio" name="s2" id="sub2-close" />  
<input class="hidden" type="radio" name="s3" id="sub3a-open" />  
<input class="hidden" type="radio" name="s3" id="sub3b-open" />  
<input class="hidden" type="radio" name="s3" id="sub3-close" />  
<div class="menu">  
<ul>  
<li class="m-close">  
<label for="menu-close" title="Close Menu"></label></li>  
<li><a href="#">Home</a></li>  
<li><a href="#">Privacy</a></li>  
<li><div><label class="open" for="sub1a-open"></label></div>  
<a href="#">Contact Us</a>  
<ul class="sub1a">  
<li class="close"><label for="sub1-close"></label></li>  
<li><a href="#">Email</a></li>  
<li><a href="#">Telephone</a></li>  
<li><a href="#">Online Form</a></li>  
<li><a href="#">Snail Mail Address</a></li>  
</ul>  
</li>  
<li><div><label class="open" for="sub1b-open"></label></div>  
<a href="#">Resort</a>  
<ul class="sub1b">  
<li class="close"><label for="sub1-close"></label></li>  
<li><a href="#">Ski Hire Facilities</a></li>  
<li><a href="#">Night Life</a></li>  
<li><div><label class="open" for="sub2a-open"></label></div>  
<a href="#">Main Ski Slopes</a>  
<ul class="sub2a">  
<li class="close"><label for="sub2-close"></label></li>  
<li><a href="#">Beginners Slopes</a></li>  
<li><a href="#">Intermediate Slopes</a></li>  
<li><div><label class="open" for="sub3a-open"></label></div>  
<a href="#">Advanced Skill Levels</a>  
<ul class="sub3a">  
<li class="close"><label for="sub3-close"></label></li>  
<li><a href="#">Local</a></li>  
<li><a href="#">Nearby</a></li>  
<li><a href="#">With instructor</a></li>  
<li><a href="#">Snow boarding</a></li>  
</ul>  
</li>  
<li><a href="#">Expert</a></li>  
</ul>  
</li>  
<li><div><label class="open" for="sub2b-open"></label></div>  
<a href="#">Restaurants</a>  
<ul class="sub2b">  
<li class="close"><label for="sub2-close"></label></li>  
<li><a href="#">Snow Hotel</a></li>  
<li><a href="#">The Snowman</a></li>  
<li><a href="#">Ice Cavern</a></li>  
<li><a href="#">Ski Inn</a></li>  
</ul>  
</li>  
<li><div><label class="open" for="sub2c-open"></label></div>  
<a href="#">Car Hire</a>  
<ul class="sub2c">  
<li class="close"><label for="sub2-close"></label></li>  
<li><a href="#">From Airport</a></li>  
<li><a href="#">In Resort</a></li>  
<li><a href="#">Multiple Resorts</a></li>  
</ul>  
</li>  
</ul>  
</li>  
<li><div><label class="open" for="sub1c-open"></label></div>  
<a href="#">Information</a>  
<ul class="sub1c">  
<li class="close"><label for="sub1-close"></label></li>  
<li><a href="#">Money Exchange</a></li>  
<li><a href="#">Short Breaks</a></li>  
<li><div><label class="open" for="sub2d-open"></label></div>  
<a href="#">Resort Essential Information</a>  
<ul class="sub2d">  
<li class="close"><label for="sub2-close"></label></li>  
<li><a href="#">Lift Passes</a></li>  
<li><a href="#">Insurance</a></li>  
<li><div><label class="open" for="sub3b-open"></label></div>  
<a href="#">Gear Rental</a>  
<ul class="sub3b">  
<li class="close"><label for="sub3-close"></label></li>  
<li><a href="#">Boots</a></li>  
<li><a href="#">Skis</a></li>  
<li><a href="#">Ski Wear</a></li>  
<li><a href="#">Goggles</a></li>  
</ul>  
</li>  
<li><a href="#">Ski Schools</a></li>  
<li><a href="#">Snow Report</a></li>  
</ul>  
</li>  
<li><div><label class="open" for="sub2e-open"></label></div>  
<a href="#">Language</a>  
<ul class="sub2e">  
<li class="close"><label for="sub2-close"></label></li>  
<li><a href="#">Austrian</a></li>  
<li><a href="#">German</a></li>  
<li><a href="#">French</a></li>  
<li><a href="#">English</a></li>  
</ul>  
</li>  
</ul>  
</li>  
<li>  
<div><label class="open" for="sub1d-open"></label></div>  
<a href="#">Surrounding Area</a>  
<ul class="sub1d">  
<li class="close"><label for="sub1-close"></label></li>  
<li><a href="#">Where to go</a></li>  
<li><a href="#">What to do</a></li>  
<li><a href="#">Places of interest</a></li>  
<li><a href="#">National parks & Museums</a></li>  
</ul>  
</li>  
</ul>  
</div>  
<div class="page">  
<div class="m-open">  
<label for="menu-open" title="Open Menu"></label>  
</div>  
<h3>Ключевое слово</h3>  
</div>  
</div>  
</div>