Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 14, 2015 21:46
Show Gist options
  • Save anonymous/98df9cbedfaff219e3b6 to your computer and use it in GitHub Desktop.
Save anonymous/98df9cbedfaff219e3b6 to your computer and use it in GitHub Desktop.
Download ZIP
Multi-Level Push Menu: Off-screen navigation with multiple levels // source http://jsbin.com/dexivu
Raw
index.html
<html lang="en" class=" js csstransforms3d">
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels">
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform">
<meta name="author" content="Codrops">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/icons.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/component.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css">
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/modernizr.custom.js"></script>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/codrops/adpacks/demoadpacks.css?1426365179082">
<script id="_carbonads_projs" type="text/javascript" src="http://srv.carbonads.net/ads/C6AILKT.json?segment=placement:codrops&amp;callback=_carbonads_go"></script>
<style id="jsbin-css">
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
@keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="container">
<!-- Push Wrapper -->
<div class="mp-pusher" id="mp-pusher">
<!-- mp-menu -->
<nav id="mp-menu" class="mp-menu mp-overlap">
<div class="mp-level" data-level="1">
<h2 class="icon icon-world">Index</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-display" href="#">menu item 1</a>
<div class="mp-level" data-level="2">
<h2 class="icon icon-display">menu item 1 level 2</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-phone" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2>menu item 1 level 3</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-tv" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-camera" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">menu item 2</a>
<div class="mp-level" data-level="2">
<h2 class="icon icon-news">menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-shop" href="#">menu item 3</a>
<div class="mp-level" data-level="2">
<h2 class="icon icon-shop">menu item</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-t-shirt" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2 class="icon icon-t-shirt">menu item</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-female" href="#">menu item</a>
<div class="mp-level" data-level="4">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-male" href="#">menu itemg</a>
<div class="mp-level" data-level="4">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a class="icon icon-diamond" href="#">menu item</a>
</li>
<li>
<a class="icon icon-music" href="#">menu item</a>
</li>
<li>
<a class="icon icon-food" href="#">menu item</a>
</li>
</ul>
</div>
</li>
<li><a class="icon icon-photo" href="#">menu item4</a></li>
<li><a class="icon icon-wallet" href="#">menu item 5</a></li>
</ul>
</div>
</nav>
<!-- /mp-menu -->
<div class="scroller"><!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
<!-- Top Navigation -->
<div class="content clearfix">
<div class="block block-20 clearfix">
<p><a href="#" id="trigger" class="menu-trigger"></a></p>
</div>
<div class="block block-60">
<section>
<div class="tabs tabs-style-bar">
<nav>
<ul>
<li class="tab-current"><a href="#section-bar-1" class="icon icon-home"><span>Home</span></a></li>
<li><a href="#section-bar-2" class="icon icon-box"><span>Archive</span></a></li>
<li><a href="#section-bar-3" class="icon icon-display"><span>Analytics</span></a></li>
<li><a href="#section-bar-4" class="icon icon-upload"><span>Upload</span></a></li>
<li><a href="#section-bar-5" class="icon icon-tools"><span>Settings</span></a></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-bar-1" class="content-current">
<form>
<div class="group">
<input type="text"><span class="highlight"></span><span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="email"><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<button type="button" class="button buttonBlue">Subscribe
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
</button>
</form>
</section>
<section id="section-bar-2"><p>2</p></section>
<section id="section-bar-3"><p>3</p></section>
<section id="section-bar-4"><p>4</p></section>
<section id="section-bar-5"><p>5</p></section>
</div><!-- /content -->
</div><!-- /tabs -->
</section>
</div>
</div>
</div><!-- /scroller-inner -->
</div><!-- /scroller -->
</div><!-- /pusher -->
</div><!-- /container -->
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/classie.js"></script>
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/mlpushmenu.js"></script>
<script>
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
</script>
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
new CBPFWTabs( el );
});
})();
</script>
<script id="jsbin-source-html" type="text/html"><html lang="en" class=" js csstransforms3d">
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels">
<meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform">
<meta name="author" content="Codrops">
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/icons.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/MultiLevelPushMenu/css/component.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/normalize.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/demo.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css">
<link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css">
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/modernizr.custom.js"><\/script>
<link rel="stylesheet" type="text/css" href="http://tympanus.net/codrops/adpacks/demoadpacks.css?1426365179082">
<script id="_carbonads_projs" type="text/javascript" src="//srv.carbonads.net/ads/C6AILKT.json?segment=placement:codrops&amp;callback=_carbonads_go"><\/script>
</head>
<body cz-shortcut-listen="true">
<div class="container">
<\!-- Push Wrapper -->
<div class="mp-pusher" id="mp-pusher">
<\!-- mp-menu -->
<nav id="mp-menu" class="mp-menu mp-overlap">
<div class="mp-level" data-level="1">
<h2 class="icon icon-world">Index</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-display" href="#">menu item 1</a>
<div class="mp-level" data-level="2">
<h2 class="icon icon-display">menu item 1 level 2</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-phone" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2>menu item 1 level 3</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-tv" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-camera" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-news" href="#">menu item 2</a>
<div class="mp-level" data-level="2">
<h2 class="icon icon-news">menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-shop" href="#">menu item 3</a>
<div class="mp-level" data-level="2">
<h2 class="icon icon-shop">menu item</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-t-shirt" href="#">menu item</a>
<div class="mp-level" data-level="3">
<h2 class="icon icon-t-shirt">menu item</h2>
<ul>
<li class="icon icon-arrow-left">
<a class="icon icon-female" href="#">menu item</a>
<div class="mp-level" data-level="4">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<li class="icon icon-arrow-left">
<a class="icon icon-male" href="#">menu itemg</a>
<div class="mp-level" data-level="4">
<h2>menu item</h2>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
<a class="icon icon-diamond" href="#">menu item</a>
</li>
<li>
<a class="icon icon-music" href="#">menu item</a>
</li>
<li>
<a class="icon icon-food" href="#">menu item</a>
</li>
</ul>
</div>
</li>
<li><a class="icon icon-photo" href="#">menu item4</a></li>
<li><a class="icon icon-wallet" href="#">menu item 5</a></li>
</ul>
</div>
</nav>
<\!-- /mp-menu -->
<div class="scroller"><\!-- this is for emulating position fixed of the nav -->
<div class="scroller-inner">
<\!-- Top Navigation -->
<div class="content clearfix">
<div class="block block-20 clearfix">
<p><a href="#" id="trigger" class="menu-trigger"></a></p>
</div>
<div class="block block-60">
<section>
<div class="tabs tabs-style-bar">
<nav>
<ul>
<li class="tab-current"><a href="#section-bar-1" class="icon icon-home"><span>Home</span></a></li>
<li><a href="#section-bar-2" class="icon icon-box"><span>Archive</span></a></li>
<li><a href="#section-bar-3" class="icon icon-display"><span>Analytics</span></a></li>
<li><a href="#section-bar-4" class="icon icon-upload"><span>Upload</span></a></li>
<li><a href="#section-bar-5" class="icon icon-tools"><span>Settings</span></a></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-bar-1" class="content-current">
<form>
<div class="group">
<input type="text"><span class="highlight"></span><span class="bar"></span>
<label>Name</label>
</div>
<div class="group">
<input type="email"><span class="highlight"></span><span class="bar"></span>
<label>Email</label>
</div>
<button type="button" class="button buttonBlue">Subscribe
<div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
</button>
</form>
</section>
<section id="section-bar-2"><p>2</p></section>
<section id="section-bar-3"><p>3</p></section>
<section id="section-bar-4"><p>4</p></section>
<section id="section-bar-5"><p>5</p></section>
</div><\!-- /content -->
</div><\!-- /tabs -->
</section>
</div>
</div>
</div><\!-- /scroller-inner -->
</div><\!-- /scroller -->
</div><\!-- /pusher -->
</div><\!-- /container -->
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/classie.js"><\/script>
<script src="http://tympanus.net/Development/MultiLevelPushMenu/js/mlpushmenu.js"><\/script>
<script>
new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
<\/script>
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"><\/script>
<script>
(function() {
[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( function( el ) {
new CBPFWTabs( el );
});
})();
<\/script>
</body></html></script>
<script id="jsbin-source-css" type="text/css">form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
@keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
</script>
</body></html>
Raw
jsbin.dexivu.css
form {
width: 380px;
margin: 4em auto;
padding: 3em 2em 2em 2em;
background: #fafafa;
border: 1px solid #ebebeb;
box-shadow: rgba(0,0,0,0.14902) 0px 1px 1px 0px,rgba(0,0,0,0.09804) 0px 1px 2px 0px;
}
.group {
position: relative;
margin-bottom: 45px;
}
input {
font-size: 18px;
padding: 10px 10px 10px 5px;
-webkit-appearance: none;
display: block;
background: #fafafa;
color: #636363;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid #757575;
}
input:focus { outline: none; }
/* Label */
label {
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: all 0.2s ease;
}
/* active */
input:focus ~ label, input.used ~ label {
top: -20px;
transform: scale(.75); left: -2px;
/* font-size: 14px; */
color: #4a89dc;
}
/* Underline */
.bar {
position: relative;
display: block;
width: 100%;
}
.bar:before, .bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #4a89dc;
transition: all 0.2s ease;
}
.bar:before { left: 50%; }
.bar:after { right: 50%; }
/* active */
input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; }
/* Highlight */
.highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active */
input:focus ~ .highlight {
animation: inputHighlighter 0.3s ease;
}
/* Animations */
@keyframes inputHighlighter {
from { background: #4a89dc; }
to { width: 0; background: transparent; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment