1:15 AM Iphone Menu | |
დასახელება: Iphone Menu აღწერა: ლამაზი, 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> | |
|
| |
| სულ კომენტარები: 0 | |