I have implemented a customized version of the codrops slide & push menu (http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/) to create an overlay on my webpage. However, I am facing difficulty in closing it using another link. Any assistance on this matter would be highly appreciated. jsfiddle: http://jsfiddle.net/qu80jto2/
HTML:
<nav class="modal modal-vertical modal-right" id="modal">
<h1>CONTENT</h1>
</nav>
<h1 id="showRight">OPEN</h1>
<h1 id="hideRight">CLOSE</h1>
JQUERY:
<script>
var
menuRight = document.getElementById( 'modal' ),
body = document.body;
showRight.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuRight, 'modal-open' );
disableOther( 'showRight' );
};
function disableOther( button ) {
if( button !== 'showRight' ) {
classie.toggle( showRight, 'disabled' );
}
}
</script>
CSS:
.modal {
background: yellow;
position: fixed;
}
.modal-vertical {
width: 60%;
height: 100%;
top: 0;
z-index: 1000;
}
.modal-right {
right: -60%;
}
.modal-open {
right: 0px;
}
.modal-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.modal,
.modal-push {
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
transition: all 0.6s ease;
}