<!-- Checkbox to show/hide the navigation menu -->
<input type="checkbox" name="menu" value="toggle" id="toggle">
<!-- navigation menu container -->
<section id="menu">
    
    <!-- Lable for #showmenu to hide the menu/uncheck the checkbox -->
    <label class="toggle" for="toggle"><div id="iphone2"><div id="innerscreen2"><h2>&#8801;</h2>Menu</div><div id="buttons2"></div></div></label>
    
    <!-- Menu content -->
<nav class="menuContent">
    
    <!-- Menu Section title -->
    <span>Navigation Links</span>
    
    <!-- First Menu -->
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</section>
<!-- /#menu -->
<br clear="all">
<!-- iphone div -->
<div id="iphone"><div id="innerscreen"><p>&nbsp;</p><h2>iPhone 4</h2></div><div id="buttons"></div></div>

<br clear="all">
<!-- iphone div -->
<div id="iphone2"><div id="innerscreen2"><h2>\\\</h2></div><div id="buttons2"></div></div>



<br clear="all"><br clear="all"><br clear="all"><br clear="all">
<div class="module"></div>
#menu {
    display: block;
    width: 189px;
    min-height: 308px;
    top: 0;
    z-index: 9999;
    position:fixed;
   /* border:2px solid black;*/
    border-radius:25px;
    background-image:url('http://old.maquinadenoticias.com/iphone3.png');
    background-image-repeat:no-repeat;
    background-image-size: 100% 100%;
}
#menu  .toggle {
    top: 0;
    left: 200px;
    padding:0px;
    position: absolute;
  cursor:pointer;
}
#toggle{
   display: none;
  cursor:pointer;
  /*width:200px;height:200px;*/
  /*position: absolute;
  left:500px;*/
}
/* Pushing the Menu off the canves */
#menu {
    left: -200px; /* must be the same as the width of the menu */
    -webkit-transition: left 1.5s;
    transition: left 1.5s;
}
/* Showing the menu then the Checkbox is checked */
#toggle:checked + #menu {
    left: 0;
    -webkit-transition: left 1.5s; /* Safari 3.1 to 6.0 */
    transition: left 1.5s;
}

#menu span {
    display: block;
    font-size: 20px;
    margin: 15px 10px;
    padding-top:12px;
    padding-bottom:0px;
    color:red;
}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu ul li {
    font-size:19px;
    border: 1px solid #fff;
}
#menu ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color:white;
}
#menu ul ul li {
    background-color: #2c3e50;
}
#menu ul li a:hover,
#menu ul ul li a {
    padding: 10px 10px 10px 60px;
}
#menu ul ul li a:hover {
    padding: 10px 10px 10px 90px;
}
#menu ul li a,
#menu ul li a:hover,
#menu ul ul li a,
#menu ul ul li a:hover {
    -webkit-transition: padding 0.5s; /* Safari 3.1 to 6.0 */
    transition: padding 0.5s;
}
/* iphone block by Shane Zentz */
#iphone { float:right;display:block;width:250px;height:420px;background:white;border:2px solid black; border-radius: 28px; box-shadow: 3px 3px rgba(0,0,0,.3);}
#innerscreen {display:block; position:relative;width:220px; height:350px; background-color:black;top:-4px; left:15px;box-shadow: inset 0px 0px 14px rgba(255,255,255,1);color:white;text-align:center;}
#innerscreen h2{font-size:32px;font-weight:bold;}
#buttons { display:block; position:relative; width:40px;height:40px; background-color:rgba(0,0,0,.2);border-radius:50%;left:110px;top:2px;}


/* smaller version (icon) */
#iphone2 { float:right;display:block;width:80px;height:120px;background:white;border:2px solid black; border-radius: 8px; box-shadow: 3px 3px rgba(0,0,0,.3);}
#innerscreen2 {display:block; position:relative;width:65px; height:100px; background-color:black;top:-22px; left:8px;box-shadow: inset 0px 0px 14px rgba(255,255,255,1);color:white;text-align:center;}
#innerscreen2 h2{font-size:32px;font-weight:bold;}
#buttons2 { display:block; position:relative; width:10px;height:10px; background-color:rgba(0,0,0,.2);border-radius:50%;left:35px;top:-18px;}

.module {
  width: 200px;
  height: 200px;
  background: #f06d06;
  position: relative;
  margin: 20px;
  box-shadow: 
    0 0 0 10px hsl(0, 0%, 50%),
    0 0 0 15px hsl(0, 0%, 60%),
    0 0 0 20px hsl(0, 0%, 70%),
    0 0 0 25px hsl(0, 0%, 80%),
    0 0 0 30px hsl(0, 0%, 90%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.