mmenu left right menu w/ scroll reveal
by ekareem
HTML
<script src="http://www.shynemedia.com/assets/plugins/mmenu/js/jquery.mmenu.min.all.js"></script>
<link rel="stylesheet" href="http://www.shynemedia.com/assets/plugins/mmenu/css/jquery.mmenu.all.css">
<!--TOP BANNER-->
<div id="navTopBanner">
<!--NAV LEFT RIGHT HEADER-->
<div id="navLeftRightHeader" class="FixedTop">
<a id="hamburgerLeft" href="#navLeft"><span></span></a>
<span id="navLeftRightHeaderTextOn">SHOW ON SCROLL</span>
<span id="navLeftRightHeaderTextOff">SHOW OFF SCROLL</span>
<a id="arrowRight" href="#navRight"><span></span></a>
</div>
<!--/nav left right header-->
</div>
<!--/top banner-->
<!--NAV LEFT-->
<nav id="navLeft">
<ul>
<li><a href="#">left</a>
<ul>
<li><a href="#">left 1</a></li>
<li><a href="#">left 2</a></li>
<li><a href="#">left 3</a></li>
<li><a href="#">left 4</a></li>
</ul>
</li>
</ul>
</nav>
<!--/nav left-->
<!--NAV RIGHT-->
<nav id="navRight">
<ul>
<li><a href="#">right</a>
<ul>
<li><a href="#">right 1</a></li>
<li><a href="#">right 2</a></li>
<li><a href="#">right 3</a></li>
<li><a href="#">right 4</a></li>
</ul>
</li>
</ul>
</nav>
<!--/nav right-->
<!--PAGE CONTENT-->
<div id="pageContent">
<div id="pageContentHeader">PAGE CONTENT FIXED HEADER
</div>
<div id="pageContentTextWrapper">
<div id="pageContentText">TEXT TO SCROLL UNDER FIXED HEADERS<br>...CSS
body {color:#4D4D4D; padding:0; margin:0; background:#CCCCCC;}
#pageContent {width:100%; margin:0px auto; text-align:center; display:block;}
#pageContentHeader {width:500px; height:35px; color:#FFFFFF; line-height:35px; vertical-align:middle; position:fixed; display:none; margin:0 auto; text-align:center;}
#pageContentTextWrapper {padding:50px 0 0 0;}
#pageContentText {display:block;}
/* NAV LEFT RIGHT HEADER -----*/
#navTopBanner {display:block; position:fixed; top:0; left:0;}
.hide {display:none;}
#navLeftRightHeader {font-size:18px; font-weight:300; color:#FFFFFF; line-height:35px; vertical-align:middle; width:100%; height:35px; padding:0 0px; text-align:center; position:fixed; top:0; left:0; border-bottom:rgba(255,255,255,.2) 1px solid; display:block; background:#4D4D4D;}
#navLeftRightHeaderTextOn {height:35px; line-height:35px; vertical-align:middle; text-align:center; display:block;}
#navLeftRightHeaderTextOff {height:35px; line-height:35px; vertical-align:middle; text-align:center; display:none;}
/* NAVICONS -----*/
/* ---- HAMBURGER NAVICON ---- */
#hamburgerLeft {box-sizing:border-box; display:block; width:40px; height:40px; position:fixed; top:0; left:0; z-index:99999; cursor:pointer;}
/* ---- HAMBURGER STATIC STATE ---- */
#hamburgerLeft:before, #hamburgerLeft span, #hamburgerLeft:after {background:#E6E6E6; content:''; display:block; width:20px; height:2px; position:absolute; left:15px;}
/* ---- HAMBURGER HOVER STATE ---- */
#hamburgerLeft:hover:before, #hamburgerLeft:hover:after, #hamburgerLeft:hover span {background:#FF8000; content:''; display:block; width:20px; height:2px; position:absolute;
}
/* ---- HAMBURGER VERTICAL POSITION ---- */
#hamburgerLeft:before {top:12px;}
#hamburgerLeft span {top:19px;}
#hamburgerLeft:after {top:26px;}
/* ---- HAMBURGER ANIMATION ---- */
#hamburgerLeft:before, #hamburgerLeft:after, #hamburgerLeft span {-webkit-transition:none .5s ease 1s; transition:none .5s ease 1s; -webkit-transition-property:transform, top,...JavaScript
$(document).ready(function() {
//LEFT
$("#navLeft").mmenu({
});
//RIGHT
$("#navRight").mmenu({
// options
"offCanvas":{
"position": "right"
}
}, {
// configuration
clone: true
});
});
//NAME APPEAR ON SCROLL
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 50) {
$('#navLeftRightHeaderTextOff').show();
$('#navLeftRightHeaderTextOn').hide();
} else {
$('#navLeftRightHeaderTextOff').hide();
$('#navLeftRightHeaderTextOn').show();
}
});