javascript - offcanvas Nav with extra white space -
i making offcanvas div following code:
apologies code... kinda new @ stackoverflow. live nav bar found here: http://inkfndry.webflow.io/artist-dashboard/artist-dash
a screenshot of white space
<div id="container"> <div id="canvas"> <div id="nav"> <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a> </div> </div> </div>
css
#container { width: 100%; height: 100vh; position: relative; overflow: hidden; } #canvas { width: 100%; height: 100%; position: relative; -webkit-transform:translatex(0); -moz-transform:translatex(0); -ms-transform:translatex(0); -o-transform:translatex(0); transform:translatex(0); -webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all; } #nav { width: 20%; height: 100%; background: #ffffff; position: absolute; left: -20%; top: 0; -webkit-transition:.5s ease all; -moz-transition:.5s ease all; -o-transition:.5s ease all; transition:.5s ease all; /* default, rotate menu 90deg inwards */ -webkit-transform:rotatey(-90deg); -moz-transform:rotatey(-90deg); -ms-transform:rotatey(-90deg); -o-transform:rotatey(-90deg); transform:rotatey(-90deg); } #container.display-nav #canvas { -webkit-transform:translatex(300px); -moz-transform:translatex(300px); -ms-transform:translatex(300px); -o-transform:translatex(300px); transform:translatex(300px); } /* transition menu perspective on "show-nav" */ #container.display-nav #nav { -webkit-transform-origin:100% 50%; -moz-transform-origin:100% 50%; -ms-transform-origin:100% 50%; -o-transform-origin:100% 50%; transform-origin:100% 50%; -webkit-transform:perspective(600px) rotatey(0deg); -moz-transform:perspective(600px) rotatey(0deg); -ms-transform:perspective(600px) rotatey(0deg); -o-transform:perspective(600px) rotatey(0deg); transform:perspective(600px) rotatey(0deg); }
jquery (toggle nav)
// calling function $(function() { $('.toggle-nav').click(function() { togglenavigation(); }); }); // togglenav function function togglenavigation() { if ($('#container').hasclass('display-nav')) { // close nav $('#container').removeclass('display-nav'); } else { // open nav $('#container').addclass('display-nav'); } }
Comments
Post a Comment