<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/made-on-mars/pen/qqEgXP?depth=everything&order=popularity&page=37&q=translate&show_forks=false" />
<style class="cp-pen-styles">body, html {
margin: 0;
padding: 0;
}
body {
background: #f8f7f5;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #888888;
}
#mobile {
height: 667px;
width: 375px;
background: #c6c4c1;
position: relative;
margin: 30px auto;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-khtml-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
#mobileBodyContent {
background: #f8f7f5;
position: relative;
z-index: 20;
width: 100%;
height: 100%;
overflow: hidden;
visibility: visible;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#header {
height: 60px;
background: #eae8e5;
}
#image {
height: 280px;
width: 100%;
overflow: hidden;
position: relative;
}
#image img {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#title {
height: 20px;
width: 200px;
margin: 40px auto;
background: #eae8e5;
}
#text .item {
height: 10px;
width: calc(100% - 40px);
margin: 20px auto;
background: #eae8e5;
}
#burgerBtn {
border-top: 2px solid #f85051;
height: 25px;
width: 30px;
box-sizing: border-box;
position: absolute;
z-index: 30;
left: 20px;
top: 15px;
cursor: pointer;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#burgerBtn:before {
content: "";
display: block;
position: absolute;
height: 2px;
width: 30px;
left: 0;
background: #f85051;
top: 10px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#burgerBtn:after {
content: "";
display: block;
position: absolute;
height: 2px;
width: 30px;
left: 0;
background: #f85051;
bottom: 0;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#nav {
position: absolute;
z-index: 10;
list-style-type: none;
margin: 100px 0 0 20px;
padding: 0;
overflow: hidden;
}
#nav li {
height: 30px;
width: 0;
margin: 30px 0;
background: #eae8e5;
-webkit-transition: all 0.6s ease-in;
-moz-transition: all 0.6s ease-in;
-khtml-transition: all 0.6s ease-in;
-o-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
#nav li + li {
margin-left: -40px;
}
#nav li + li + li {
margin-left: -80px;
}
#nav li + li + li + li {
margin-left: -120px;
}
#demoSelector {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
top: 333px;
left: 50%;
margin-left: 227px;
}
#demoSelector li {
padding: 10px 0 10px 30px;
position: relative;
cursor: pointer;
}
#demoSelector li:after {
content: "";
position: absolute;
height: 10px;
width: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #d8d5d0;
left: 0;
top: 18px;
}
#demoSelector li:before {
content: "";
position: absolute;
height: 18px;
width: 18px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-khtml-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
border: 2px solid #888888;
left: -6px;
top: 12px;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-khtml-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#demoSelector li.active:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-khtml-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.navigation #nav li {
width: 200px;
margin-left: 0;
}
.navigation #burgerBtn {
border-color: transparent;
}
.navigation #burgerBtn:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-khtml-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 33px;
left: -2px;
}
.navigation #burgerBtn:after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-khtml-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
bottom: 11px;
width: 33px;
left: -2px;
}
.demo1.navigation #mobileBodyContent {
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-khtml-transform: scale(0.85);
-o-transform: scale(0.85);
transform: scale(0.85);
margin-left: 260px;
}
.demo2.navigation #mobileBodyContent {
margin-left: 320px;
-webkit-opacity: 0.4;
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
-o-opacity: 0.4;
opacity: 0.4;
}
.demo3.navigation #mobileBodyContent {
-webkit-opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
-o-opacity: 0;
opacity: 0;
-webkit-transform: scale(0.85);
-moz-transform: scale(0.85);
-khtml-transform: scale(0.85);
-o-transform: scale(0.85);
transform: scale(0.85);
visibility: hidden;
}
footer {
position: fixed;
z-index: 1000;
left: 0;
bottom: 0;
display: block;
padding: 20px;
box-sizing: border-box;
}
footer a {
text-decoration: none;
display: block;
width: 50px;
}
footer a svg {
width: 100%;
max-width: 50px;
min-width: 40px;
display: inline-block;
}
</style></head><body>
<div id="mobile" class="demo1">
<div id="burgerBtn"></div>
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="mobileBodyContent">
<div id="header"></div>
<div id="image">
<img src="https://s3-eu-west-1.amazonaws.com/ugly.cloud/2017/02/codepen-pure-css-mobile-nav-anim.jpg" alt="" />
</div>
<div id="title"></div>
<div id="text">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
<ul id="demoSelector">
<li id="demo1" class="active">Démo 1</li>
<li id="demo2">Démo 2</li>
<li id="demo3">Démo 3</li>
</ul>
<footer>
<a target="_blank" href="https://www.made-on-mars.com"><svg id="Calque_logo2" data-name="Calque logo2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 1306.42"><defs><style>.cls-logo2{fill:#f85051;}</style></defs><path class="cls-logo2" d="M2043.47,2428a39,39,0,1,0,23.28,8.1c55.42,11,96.65,60.62,96.65,117.45a120,120,0,0,1-119.93,119.91,118.29,118.29,0,0,1-48.7-10.47v-359.6a38.92,38.92,0,0,0-38.87-38.87h-87.24v-32a38.92,38.92,0,0,0-38.87-38.87h-87.18v-27.75a38.92,38.92,0,0,0-38.87-38.87H1638.8a69.8,69.8,0,0,0,0,139.6,16.78,16.78,0,1,0-16.76-16.76,16.6,16.6,0,0,0,3,9.51,64.08,64.08,0,0,1,13.8-126.67,27,27,0,0,1,27,27v343.09a38.92,38.92,0,0,0,38.87,38.87h37.94V2199.38h22.23a27,27,0,0,1,27,27v276.43a38.92,38.92,0,0,0,38.87,38.87h37.94V2270.23h22.27a27,27,0,0,1,27,27v256.37A125.53,125.53,0,1,0,2043.47,2428Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M2128.54,2873.92V3393H1609.46V2873.92h519.08m40.46-40.46H1569v600h600v-600Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1794.74,3133.7a44.44,44.44,0,0,1-2.74,15.88,36.33,36.33,0,0,1-7.74,12.43,34.6,34.6,0,0,1-12,8.09,43.16,43.16,0,0,1-31,0,34.73,34.73,0,0,1-12-8.09,36.33,36.33,0,0,1-7.74-12.43,47.39,47.39,0,0,1,0-31.75,36.67,36.67,0,0,1,7.74-12.47,34.69,34.69,0,0,1,12-8.13,42.72,42.72,0,0,1,31,0,34.55,34.55,0,0,1,12,8.13,36.67,36.67,0,0,1,7.74,12.47A44.48,44.48,0,0,1,1794.74,3133.7Zm-10.69,0a39.07,39.07,0,0,0-1.93-12.73,26.83,26.83,0,0,0-5.48-9.54,23.65,23.65,0,0,0-8.59-6,31.24,31.24,0,0,0-22.51,0,24,24,0,0,0-8.62,6,26.65,26.65,0,0,0-5.51,9.54,42.85,42.85,0,0,0,0,25.44,26.69,26.69,0,0,0,5.51,9.51,23.8,23.8,0,0,0,8.62,6,31.68,31.68,0,0,0,22.51,0,23.48,23.48,0,0,0,8.59-6,26.87,26.87,0,0,0,5.48-9.51A38.86,38.86,0,0,0,1784,3133.7Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1816.42,3095.52A5.55,5.55,0,0,1,1818,3097l44.59,58c-.1-.93-.18-1.84-.22-2.72s-.05-1.73-.05-2.55v-54.54h9.13v77h-5.27a4.52,4.52,0,0,1-2.07-.43,5.12,5.12,0,0,1-1.64-1.45l-44.54-58c.07.9.12,1.77.16,2.63s.06,1.65.06,2.36v54.86H1809v-77h5.37A4.71,4.71,0,0,1,1816.42,3095.52Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1759.12,3038.25c.36-1,28.53-53,28.53-53a3.1,3.1,0,0,1,1.45-1.5,6.66,6.66,0,0,1,2.15-.27h7.69v77h-9.13v-56.57c0-.76,0-1.56.05-2.42s.09-1.73.16-2.63L1763.63,3047a4.15,4.15,0,0,1-3.76,2.41h-1.51a4.14,4.14,0,0,1-3.76-2.41l-27-48.3c.11.93.19,1.85.24,2.74s.08,1.72.08,2.48v56.57h-9.13v-77h7.68a6.69,6.69,0,0,1,2.15.27,3.12,3.12,0,0,1,1.45,1.5S1758.76,3037.29,1759.12,3038.25Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1881,3060.5H1873a3.42,3.42,0,0,1-2.26-.7,4.16,4.16,0,0,1-1.29-1.77l-7.2-18.58h-34.55l-7.2,18.58a4.13,4.13,0,0,1-1.29,1.72,3.42,3.42,0,0,1-2.26.76h-8.06l30.79-77h10.58Zm-50.45-28.58h28.75l-12.09-31.32a59.28,59.28,0,0,1-2.31-7.25q-.59,2.2-1.15,4.06c-.37,1.23-.74,2.32-1.1,3.24Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1957.48,3022a43.32,43.32,0,0,1-2.74,15.74,34.84,34.84,0,0,1-7.74,12.14,34.37,34.37,0,0,1-12,7.82,41.65,41.65,0,0,1-15.48,2.77h-28.79v-77h28.79a41.65,41.65,0,0,1,15.48,2.77,34.42,34.42,0,0,1,12,7.84,35.27,35.27,0,0,1,7.74,12.17A43.36,43.36,0,0,1,1957.48,3022Zm-10.69,0a38.61,38.61,0,0,0-1.94-12.68,26.55,26.55,0,0,0-5.48-9.45,23.44,23.44,0,0,0-8.59-5.92,29.88,29.88,0,0,0-11.23-2h-18.32v60.12h18.32a29.88,29.88,0,0,0,11.23-2,23.62,23.62,0,0,0,8.59-5.89,26.36,26.36,0,0,0,5.48-9.43A38.57,38.57,0,0,0,1946.79,3022Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M2019.11,2983.51V2992h-37v25.57h29.92v8.16h-29.92V3052h37v8.49h-47.44v-77Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1759.12,3260.68c.36-1,28.53-53,28.53-53a3.1,3.1,0,0,1,1.45-1.5,6.66,6.66,0,0,1,2.15-.27h7.69v77h-9.13v-56.57c0-.76,0-1.56.05-2.42s.09-1.73.16-2.63l-26.38,48.14a4.15,4.15,0,0,1-3.76,2.41h-1.51a4.14,4.14,0,0,1-3.76-2.41l-27-48.3c.11.93.19,1.85.24,2.74s.08,1.72.08,2.48v56.57h-9.13v-77h7.68a6.69,6.69,0,0,1,2.15.27,3.12,3.12,0,0,1,1.45,1.5S1758.76,3259.72,1759.12,3260.68Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1881,3282.93H1873a3.42,3.42,0,0,1-2.26-.7,4.16,4.16,0,0,1-1.29-1.77l-7.2-18.58h-34.55l-7.2,18.58a4.13,4.13,0,0,1-1.29,1.72,3.42,3.42,0,0,1-2.26.76h-8.06l30.79-77h10.58Zm-50.45-28.58h28.75L1847.24,3223a59.28,59.28,0,0,1-2.31-7.25q-.59,2.2-1.15,4.06c-.37,1.23-.74,2.32-1.1,3.24Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1902.2,3250.8v32.13h-10.37v-77h21.76a47.48,47.48,0,0,1,12.62,1.48,24,24,0,0,1,8.78,4.27,17.05,17.05,0,0,1,5.13,6.74,22.53,22.53,0,0,1,1.67,8.85,22.18,22.18,0,0,1-1.29,7.63,20.11,20.11,0,0,1-3.74,6.36,22.29,22.29,0,0,1-6,4.82,29.37,29.37,0,0,1-8,3,11,11,0,0,1,3.44,3.28l22.46,30.57h-9.24a4.55,4.55,0,0,1-4.19-2.2l-20-27.5a5.86,5.86,0,0,0-2-1.86,7.16,7.16,0,0,0-3.23-.57Zm0-7.58h10.91a26.51,26.51,0,0,0,8-1.1,16.32,16.32,0,0,0,5.8-3.12,12.87,12.87,0,0,0,3.52-4.81,15.71,15.71,0,0,0,1.18-6.18q0-6.88-4.54-10.37t-13.51-3.49H1902.2Z" transform="translate(-1569 -2127.04)"></path><path class="cls-logo2" d="M1999.39,3218a4.09,4.09,0,0,1-1,1.21,2.24,2.24,0,0,1-1.4.41,3.66,3.66,0,0,1-2.12-.92,34.71,34.71,0,0,0-3.06-2,26.49,26.49,0,0,0-4.46-2,19.19,19.19,0,0,0-6.31-.91,18.61,18.61,0,0,0-6.18.94,13.28,13.28,0,0,0-4.49,2.55,10.53,10.53,0,0,0-2.71,3.79,12,12,0,0,0-.91,4.7,8.72,8.72,0,0,0,1.58,5.35,13.52,13.52,0,0,0,4.19,3.62,31.77,31.77,0,0,0,5.91,2.61q3.31,1.1,6.77,2.28t6.77,2.67a23.9,23.9,0,0,1,5.91,3.73,17.2,17.2,0,0,1,4.19,5.54,18.43,18.43,0,0,1,1.58,8.06,25.86,25.86,0,0,1-1.72,9.48,21.77,21.77,0,0,1-5,7.71,23.68,23.68,0,0,1-8.11,5.16,30,30,0,0,1-10.93,1.88,33.27,33.27,0,0,1-13.62-2.72,31.81,31.81,0,0,1-10.5-7.34l3-4.94a3.92,3.92,0,0,1,1-1,2.41,2.41,0,0,1,1.37-.41,4.29,4.29,0,0,1,2.58,1.22,43.78,43.78,0,0,0,3.63,2.65,27.29,27.29,0,0,0,5.26,2.65,20.73,20.73,0,0,0,7.55,1.22,19.83,19.83,0,0,0,6.61-1,13.9,13.9,0,0,0,4.92-2.88,12.31,12.31,0,0,0,3.09-4.43,14.76,14.76,0,0,0,1.08-5.75,9.66,9.66,0,0,0-1.58-5.72,13.16,13.16,0,0,0-4.16-3.74,29.17,29.17,0,0,0-5.89-2.55l-6.77-2.15a69,69,0,0,1-6.77-2.55,22,22,0,0,1-5.89-3.77,17.21,17.21,0,0,1-4.16-5.77,20.51,20.51,0,0,1-1.58-8.57,20.53,20.53,0,0,1,6.18-14.66,22.3,22.3,0,0,1,7.45-4.73,27.17,27.17,0,0,1,10.18-1.77,32.54,32.54,0,0,1,11.77,2,26.92,26.92,0,0,1,9.29,5.91Z" transform="translate(-1569 -2127.04)"></path></svg></a>
</footer>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >var burgerBtn = document.getElementById('burgerBtn');
var mobile = document.getElementById('mobile');
var demo1 = document.getElementById('demo1');
var demo2 = document.getElementById('demo2');
var demo3 = document.getElementById('demo3');
burgerBtn.addEventListener('click', function() {
mobile.classList.toggle('navigation');
}, false);
demo1.addEventListener('click', function() {
demo1.classList.add('active');
demo2.classList.remove('active');
demo3.classList.remove('active');
mobile.classList.add('demo1');
mobile.classList.remove('demo2', 'demo3', 'navigation');
}, false);
demo2.addEventListener('click', function() {
demo2.classList.add('active');
demo1.classList.remove('active');
demo3.classList.remove('active');
mobile.classList.add('demo2');
mobile.classList.remove('demo1', 'demo3', 'navigation');
}, false);
demo3.addEventListener('click', function() {
demo3.classList.add('active');
demo1.classList.remove('active');
demo2.classList.remove('active');
mobile.classList.add('demo3');
mobile.classList.remove('demo1', 'demo2', 'navigation');
}, false);
//# sourceURL=pen.js
</script>
</body></html>
