MENU
მთავარი » 2014 » ივლისი » 3 » Iphone Menu
1:15 AM
Iphone Menu

დასახელება: Iphone Menu
ავტორი: noza

აღწერა: ლამაზი,  Html მენიუ IPHONE-ს სტილში

 

კოდი:

<style>
.phone {
width:420px;
height:808px;
background:url(http://all-skripts.com/zarybezka/foni/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://209.160.24.97/ds_img_direct.php?i=htcwallpape_16.jpg&t=8&d=kgds4b2s13&x=360&y=480&l1=166&l2=601);
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>*** GelessoN.Net ***</h3>
</div>
</div>
</div>
კატეგორია: Ucoz სკრიპტები | ნანახია: 364 | დაამატა: noza | რეიტინგი: 5.0/1
სულ კომენტარები: 0
დაამატე კომენტარი
სახელი *:
Email:
ხელმოწერა:1
კოდი *: