<section id="mobilescreen">
<div id="speaker"></div>
<section id="maincontainer">
<nav id="mainmenu">
<h2>Menu</h2>
<ul>
<li>Main Page</li>
<li>Setting</li>
<li>Logout</li>
</ul>  
</nav>
<section id="mainscreen">
<header>
<i class="fa fa-align-justify" id="menu"></i>
<h1>App Title</h1>
<i class="fa fa-shopping-cart"></i>
</header>
<section id="container">
<p class="intro">User, your current status is...</p>
<ul id="listlink">
<li><div></div><span class="titles"><i class="fa fa-plus-square"></i>Latest Points</span><span class="offdata">54</span></li>
<li><div></div><span class="titles"><i class="fa fa-tag"></i>New Offers</span><span class="offdata">12</span></li>
<li><div></div><span class="titles"><i class="fa fa-bar-chart-o"></i>Discount</span><span class="offdata">24</span></li>
<li><div></div><span class="titles"><i class="fa fa-tags"></i>Special Offer</span><span class="offdata">35</span></li>
<li><div></div><span class="titles"><i class="fa fa-bullhorn"></i>Sale</span><span class="offdata">5</span></li>
<li><div></div><span class="titles"><i class="fa fa-bookmark"></i>Wish List</span><span class="offdata">1</span></li>
</ul>
</section>
<footer>
<nav><button id="showcode">Show Code</button><button id="buyproduct">Buy Product</button></nav>
</footer>
</section>
</section>
<div id="controlder"></div>
</section> 

@import url(https://fonts.googleapis.com/css?family=Andika);

*
{
margin:0px;
padding:0px;
outline:none;
}

html{height:100%}
 
body{
background: #f2f2f2;
padding:10px;
font-family:'Andika', sans-serif;
color:#000;
}

#mobilescreen
{
width:340px;
height:480px;
background:#fff;
margin:0 auto;
position:relative;
overflow:hidden;
border:2px solid #ccc;
padding:20px 5px 100px 5px;
border-radius:20px;
box-shadow:0px 5px 5px 0px #ccc;
}

#maincontainer
{
width:320px;
margin:0 auto;
background:#282a36;
position:relative;
overflow: hidden;
height:100%;
}

#mainscreen
{
position:absolute;
height:100%;
left:0px;
top:0px;
width:100%; 
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;     
}

section
{
padding:0px;
margin:0px;
}

header
{
width:100%;
height:50px;
background:#1b2125;
position:relative;
}

.fa-align-justify
{
color:#f36175;
position:absolute;
left:0px;
top:0px;
height:50px;
width:50px;
display:table-cell;
line-height:55px;
text-align:center;
cursor:pointer;
}

.fa-shopping-cart
{
color:#f36175;
position:absolute;
right:0px;
top:0px;
height:50px;
width:50px;
display:table-cell;
line-height:50px;
text-align:center;
cursor:pointer;
}

h1
{
width:100%;
text-align:center;
color:#fff;
font-size:1em;
height:50px;
line-height:50px;
}

button
{
width:50%;
border:none;
height:50px;
font-size:0.8em;
font-weight:bold;
cursor:pointer;
}

footer
{
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:50px;
}

#showcode
{
background:#f36175;
}
#buyproduct
{
background:#ffd371;
}

.intro
{
text-align:center;
font-size:0.9em;
color:#58626b;
}

#container
{
padding:10px 30px;
}

#listlink{margin:0px; padding:0px 0px 0px 0px;}
li{
list-style-type:none;
padding:20px 10px;
position:relative;
background:#1b2125;
border-radius:5px;
margin-top:15px;
color:#58626b;
cursor:pointer;
}
#listlink li i
{
margin-right:20px;
z-index:99;
}
#listlink li .titles
{
z-index:5;
position:absolute;
left:1em;
top:0.4em;
}

.offdata
{
position:absolute;
right:1em;
top:0.3em;
color:#fff;
font-size:1.1em;
}
#listlink li div
{
position:absolute;
left:0px;
top:0px;
height:100%;
width:3px;
border-radius:5px 0px 0px 5px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

#listlink li:nth-child(1) div{background:#fe7559;}
#listlink li:nth-child(2) div{background:#1280e3;}
#listlink li:nth-child(3) div{background:#19b9c3;}
#listlink li:nth-child(4) div{background:#76f361;}
#listlink li:nth-child(5) div{background:#e3aa12;}
#listlink li:nth-child(6) div{background:#12e392;}

#listlink li span
{
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

#listlink li:hover div
{
width:100%;
border-radius:5px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}
#listlink li:hover span
{
color:#fff;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-ms-transition:0.5s;
-o-transition:0.5s;
transition:0.5s;
}

#controlder
{
width:50px;
height:50px;
border-radius:50%;
background:#f2f2f2;
margin:15px auto;
box-shadow:inset 0px 0px 10px 0px #bdbdbd;
border:1px solid #c6c6c6;
}

#speaker
{
width:50px;
height:5px;
border-radius:15px;
background:#f2f2f2;
margin:0px auto 15px;
box-shadow:inset 0px 0px 10px 0px #bdbdbd, inset 0px 5px 0px 0px #bdbdbd;
border:1px solid #c6c6c6;
}

#mainmenu
{
width:125px;
height:100%;
background:#1b2125;
position:absolute;
top:0px;
left:-125px;
z-index:99;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}

.showmenu
{
left:0px!important;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}

.movemaincontainer
{
margin-left:125px!important;
-webkit-transition:0.2s;
-ms-transition:0.2s;
-o-transition:0.2s;
-moz-transition:0.2s;
transition:0.2s;
}

h2
{
text-align:center;
color:#58626b;
font-size:1.1em;
padding:10px 0px;
}

#mainmenu ul li
{
padding:5px 10px;
}

#mainmenu ul li:hover
{
color:#f36175;
}

$("#menu").click(function(){
  $("#mainmenu").toggleClass("showmenu");
  $("#mainscreen").toggleClass("movemaincontainer");
});