» »

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


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

Очередной смартфон от компании Apple получился достаточно компактным. Его толщина составляет чуть меньше семи миллиметров. Наибольший объем стандартной памяти равен 128 гигабайтам. Работает как навигация на сайте, вы устанавливаете этот дизайн, и уже в нем прописываете ссылки на категорий или материал. Безусловно, только под оригинальный ресурс такой скрипт подойдет, но сделан стильно и в оригинальности ему нет другого материала.

Код
<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>
24.04.2016 Просмотров: 319 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
ТОРНАДО
ТОРНАДО 24.04.2016 19:301
0
ВОТ DEMO - http://cs-nawigator.ru/kartinki/IKONKI/kartinki1/DEMO8.htm
Kosten
Kosten 24.04.2016 19:432
0
Вообще бы не понял глядя на изображение, что это навигация, это же надо где то разместить, думаю только по самой тематике подойдет.
ТОРНАДО
ТОРНАДО 24.04.2016 19:463
0
Если чесно я даже и не могу представить для какого сайта,этот скрипт может подойти,
может для реклам подойдет.
Kosten
Kosten 24.04.2016 19:504
0
Но оно реально же работает, если посмотреть на демонстрацию, здесь сайты есть, где материал появляется, может он так как раз будет, когда крутишь вниз и изображение выезжает, а здесь скрипт появится.
avatar