<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Yudo/pen/KXMEWK?depth=everything&order=popularity&page=60&q=shop&show_forks=false" />
<style class="cp-pen-styles">body{
background-color:#353535;
font-family:verdana;
}
#iPhoneScreen{
position:relative;
background-color:black;
background-image:url('http://www.yudo.it/FOTO/iPhone-X-wallpaper.jpg');
background-size:cover;
background-position:center center;
margin:auto;
border-radius:10px;
overflow:hidden;
transition: all 0.3s;
}
.CenterMenu{
width:100px;
padding-top:15px;
margin:auto;
}
#ChangeScreenOrientation{
cursor:pointer;
position:absolute;
right:20px;
top:20px;
width:20px;
height:20px;
border:solid 1px black;
border-radius:50%;
font-size:12px;
line-height:20px;
text-align:center;
}
.TopMenu{
position:relative;
height:60px;
background-color:#ddddee;
box-shadow:0px 1px 5px 5px rgba(0,0,0,0.35);
}
.iOSMenu{
position:fixed;
left:0px;
top:0px;
width:100vw;
height:calc(100vh - 60px);
background-color:rgba(0,0,0,0.85);
transition: all 0.3s;
}
.HomeSandwich{
display:block;
width:30px;
height:30px;
left:14px;
top:14px;
cursor:pointer;
position:absolute;
}
.L1O {
transform:translate(0px,15px) rotate(45deg);
}
.L2O {
display:none;
}
.L3O {
transform:translate(0px,-15px) rotate(-45deg);
}
#Line1{
position:absolute;
top:0px;
left:0px;
width:100%;
border-top:solid 3px black;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#Line2{
position:absolute;
top:50%;
left:0px;
width:100%;
border-top:solid 3px black;
}
#Line3{
position:absolute;
top:100%;
left:0px;
width:100%;
border-top:solid 3px black;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#OverScreenBlack{
transform:scale(3,3);
display:none;
opacity:0;
position:absolute;
left:0px;
top:60px;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.75);
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#InnerBlocks{
width:100%;
position:relative;
height:100%;
padding:26px;
box-sizing: border-box;
overflow:scroll;
}
.SingleBlock{
position:relative;
float:left;
width:75px;
max-width:25%;
padding:6px 6px 20px 6px;
box-sizing: border-box;
}
.SingleBlockInn{
cursor:pointer;
width:100%;
height:0px;
padding-top:100%;
border:solid 1px transparent;
border-radius:10%;
color:white;
text-align:center;
font-size:10px;
font-weight:normal;
line-height:20px;
background-color:rgba(255,255,255,0);
background-repeat:no-repeat;
background-position:center center;
background-size:100% 100%;
}
.S1{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S1.png');
}
.S2{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S2.png');
}
.S3{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S3.png');
}
.S4{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S4.png');
}
.S5{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S6.png');
}
.S6{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S5.png');
}
.S7{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S7.png');
}
.S8{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S8.png');
}
.S9{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S9.png');
}
.S10{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S10.png');
}
.S11{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S11.png');
}
.S12{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S12.png');
}
.S13{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S13.png');
}
.S14{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S14.png');
}
.S15{
background-image:url('http://www.yudo.it/FOTO/ICONE/icon_latorrente_S15.png');
}
.SingleBlockInn:hover{
background-color:rgba(0,0,0,1);
border:solid 1px rgba(255,255,255,0.85);
}</style></head><body>
<br />
<div id="iPhoneScreen" style="width:360px;height:667px;">
<div class="TopMenu">
<div onclick="OpenMenuPhone();" class="HomeSandwich">
<div id="Line1"> </div>
<div id="Line2"> </div>
<div id="Line3"> </div>
</div>
<div class="CenterMenu">
<select onchange="SwitchSize(this)" class="PhoneSize">
<option value="360|667">iPhone X</option>
<option value="640|960">iPad Air2</option>
<option value="512|682">iPad Mini</option>
<option value="320|480">iPod 1st</option>
<option value="360|640">Google Pixel</option>
</select></div>
<div onclick="ChangeScreenOrientation()" id="ChangeScreenOrientation">▶</div>
</div>
<div id="iOSMenu">
<div onclick="OpenMenuPhone()" id="OverScreenBlack">
<div id="InnerBlocks">
<div onclick="GoWeb('home')" class="SingleBlock">
<div class="SingleBlockInn S1">Home</div>
</div>
<div onclick="GoWeb('info')" class="SingleBlock">
<div class="SingleBlockInn S2">Info</div>
</div>
<div onclick="GoWeb('company')" class="SingleBlock">
<div class="SingleBlockInn S3">Company</div>
</div>
<div onclick="GoWeb('products')" class="SingleBlock">
<div class="SingleBlockInn S4">Products</div>
</div>
<div onclick="GoWeb('quality')" class="SingleBlock">
<div class="SingleBlockInn S5">Quality</div>
</div>
<div onclick="GoWeb('contacts')" class="SingleBlock">
<div class="SingleBlockInn S6">Contacts</div>
</div>
<div onclick="GoWeb('adv')" class="SingleBlock">
<div class="SingleBlockInn S7">ADV</div>
</div>
<div onclick="GoWeb('users')" class="SingleBlock">
<div class="SingleBlockInn S8">Users</div>
</div>
<div onclick="GoWeb('events')" class="SingleBlock">
<div class="SingleBlockInn S11">Events</div>
</div>
<div onclick="GoWeb('video')" class="SingleBlock">
<div class="SingleBlockInn S12">Video</div>
</div>
<div onclick="GoWeb('shop')" class="SingleBlock">
<div class="SingleBlockInn S9">Shop</div>
</div>
<div onclick="GoWeb('ordini')" class="SingleBlock">
<div class="SingleBlockInn S10">Orders</div>
</div>
<div onclick="GoWeb('social')" class="SingleBlock">
<div class="SingleBlockInn S13">Social</div>
</div>
<div onclick="GoWeb('games')" class="SingleBlock">
<div class="SingleBlockInn S14">Games</div>
</div>
<div onclick="GoWeb('blog')" class="SingleBlock">
<div class="SingleBlockInn S15">Blog</div>
</div>
</div>
</div>
</div>
</div>
<div alt="Only for provide a jpeg when sharing on fb, you can delete this image." style="display:none;"><img width="1024" height="768" src="https://i.redd.it/qpgih677v9nz.gif" /></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >function g(w){
return document.getElementById(w);
}
function OpenMenuPhone(){
if(g("Line1").className=="L1O"){
HideSB();
g("Line1").className="";
g("Line2").className="";
g("Line3").className="";
}
else{
ShowSB();
g("Line1").className="L1O";
g("Line2").className="L2O";
g("Line3").className="L3O";
}
}
function HideSB(){
g("OverScreenBlack").style.transform="scale(3,3)";
g("OverScreenBlack").style.opacity=0;
setTimeout(function(){ HideScreenBlack(); }, 400);
}
function HideScreenBlack(){
g("OverScreenBlack").style.display="none";
}
function ShowSB(){
g("OverScreenBlack").style.transform="scale(3,3)";
g("OverScreenBlack").style.display="block";
setTimeout(function(){ ShowScreenBlack(); }, 30);
}
function ShowScreenBlack(){
g("OverScreenBlack").style.transform="scale(1,1)";
g("OverScreenBlack").style.opacity=1;
}
function GoWeb(w){
alert("Here you can set the links for: "+w);
}
function ChangeScreenOrientation(){
w=g("iPhoneScreen").style.width.split("px")[0];
h=g("iPhoneScreen").style.height.split("px")[0];
if(w<h){
g("ChangeScreenOrientation").innerHTML='▼';
}
else{
g("ChangeScreenOrientation").innerHTML='▶';
}
g("iPhoneScreen").style.height=w+"px";
g("iPhoneScreen").style.width=h+"px";
}
function SwitchSize(v){
wh=v.value.split("|")
g("iPhoneScreen").style.width=wh[0]+"px";
g("iPhoneScreen").style.height=wh[1]+"px";
}
//# sourceURL=pen.js
</script>
</body></html>
