<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/RRoberts/pen/OXxkzm?limit=all&page=88&q=nav" />
<script src="https://use.fontawesome.com/f56e4513c5.js"></script>
<style class="cp-pen-styles">.mobile-wrapper{
width: 100%;
margin: 0 auto;
text-align: center;
}
/* ALL MOBILES */
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #eee;
}
a{
text-decoration: none;
}
h1, h2, h3, h4, h5, h6{
color: #fff;
font-weight: 200;
margin: 0;
padding: 10px 0;
}
.mobile{
max-width: 300px;
width: 100%;
height: 500px;
background-color: #eee;
overflow: hidden;
position: relative;
display: inline-block;
}
.mobile .header{
background-color: #3C3842;
color: #fff;
padding: 10px;
}
.line{
width: 30px;
height: 2px;
margin: 10px 0;
background-color: #fff;
}
.menu-toggle:hover{
cursor: pointer;
}
.mobile-nav ul{
padding: 0;
margin: 0;
list-style-type: none;
}
/* MOBILE ONE */
.mobile-one{
background: #44cba0;
background: -webkit-linear-gradient(#44cba0, #44bfc6);
background: -o-linear-gradient(#44cba0, #44bfc6);
background: -moz-linear-gradient(#44cba0, #44bfc6);
background: linear-gradient(#44cba0, #44bfc6);
}
.mobile-one .mobile-nav{
background-color: #3C3842;
max-width: 200px;
width: 100%;
height: 100%;
transform: translate(-100%, 0);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.mobile-nav h2{
padding: 25px 20px;
}
.mobile-one .mobile-nav li a{
color: #989AA4;
display: block;
padding: 15px 20px;
}
.mobile-one .mobile-nav li a:hover{
background-color: #23252B;
color: #fff;
border-left: 3px solid #44bfc6;
}
/* MOBILE TWO */
.mobile-two{
background: #8a43a3;
background: -webkit-linear-gradient(#8a43a3, #5c6bac);
background: -o-linear-gradient(#8a43a3, #5c6bac);
background: -moz-linear-gradient(#8a43a3, #5c6bac);
background: linear-gradient(#8a43a3, #5c6bac);
}
.mobile-two .mobile-nav{
background-color: #3C3842;
width: 100%;
height: 100%;
display: none;
text-align: center;
}
.mobile-two .mobile-nav li a{
color: #989AA4;
display: block;
padding: 15px 20px;
}
.mobile-two .mobile-nav li a:hover{
background-color: #8a43a3;
color: #fff;
}
/* MOBILE THREE */
.mobile-three{
background: #e743c3;
background: -webkit-linear-gradient(#e743c3, #b59ccf);
background: -o-linear-gradient(#e743c3, #b59ccf);
background: -moz-linear-gradient(#e743c3, #b59ccf);
background: linear-gradient(#e743c3, #b59ccf);
}
.mobile-three .mobile-nav{
background-color: #3C3842;
width: 100px;
height: 100%;
text-align: center;
transform: translate(-100%);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.mobile-three .mobile-nav{
text-align: center;
}
.mobile-three .mobile-nav li a{
display: block;
padding: 25px 0;
color: #fff;
}
.mobile-three .mobile-nav li a:hover{
background-color: #e743c3;
}
/* MOBILE FOUR */
.mobile-four{
background: #1d1c29;
background: -webkit-linear-gradient(#1d1c29, #2f254b);
background: -o-linear-gradient(#1d1c29, #2f254b);
background: -moz-linear-gradient(#1d1c29, #2f254b);
background: linear-gradient(#1d1c29, #2f254b);
}
.mobile-four .mobile-nav{
background-color: #3C3842;
width: 100%;
height: 100%;
text-align: center;
transform: translate(0, -999%);
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.mobile-four .mobile-nav li a{
color: #989AA4;
display: block;
padding: 15px 20px;
}
.mobile-four .mobile-nav li a:hover{
color: #fff;
}</style></head><body>
<div class="mobile-wrapper">
<h1 style="color: #3C3842;">Mobile Navigation</h1>
<div class="mobile mobile-one">
<div class="header">
<div class="menu-toggle">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="mobile-nav">
<h2>Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="mobile mobile-two">
<div class="header">
<div class="menu-toggle">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="mobile-nav">
<h2>Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="mobile mobile-three">
<div class="header">
<div class="menu-toggle">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="mobile-nav">
<ul>
<li><a href="#"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-question fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-user fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-book fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-comment fa-2x" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="mobile mobile-four">
<div class="header">
<div class="menu-toggle">
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div class="mobile-nav">
<h2>Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >$(document).ready(function() {
//MOBILE ONE AND MOBILE THREE
var menu = "close";
$(".mobile-one .menu-toggle, .mobile-three .menu-toggle").click(function() {
if (menu === "close") {
$(this).parent().next(".mobile-nav").css("transform", "translate(0, 0)");
menu = "open";
} else {
$(this).parent().next(".mobile-nav").css("transform", "translate(-100%, 0)");
menu = "close";
}
});
//MOBILE TWO
$(".mobile-two .menu-toggle").click(function() {
$(this).parent().next(".mobile-nav").toggle(0 , "display");
});
//MOBILE FOUR
var menu = "close";
$(".mobile-four .menu-toggle").click(function() {
if (menu === "close") {
$(this).parent().next(".mobile-nav").css("transform", "translate(0, 0)");
menu = "open";
} else {
$(this).parent().next(".mobile-nav").css("transform", "translate(0, -999%)");
menu = "close";
}
});
});
//# sourceURL=pen.js
</script>
</body></html>
