jquery - jPushMenu with sticky sidebar -
i'm developing portfolio website has jpushmenu on left includes sticky sidebar in content. force menu can't "push" sidebar because set position: fixed; in css.
please excuse rushed jsfiddle here i'm working with. help much appreciated!
<!-- hidden drawer menu --> <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"> <a href="#" class="toggle-menu menu-left push-body hide-menu">hide menu</a> <a href="#">portfolio</a> <a href="#">sourcing</a> <a href="#">about</a> </nav> <!--fixed sidebar--> <div class="info_sidebar"> <a href="#" class="toggle-menu menu-left push-body show-menu dark">show menu</a> <h1 class="project-title">east london</h1> <p>pellentesque aliquam, lorem european union consequat mollis, ante nulla eleifend leo, id porta magna magna quis augue. duis egestas neque id interdum accumsan. maecenas congue neque, in gravida turpis. nullam posuere tellus european union pellentesque cursus. integer vitae diam et metus luctus consequat. nullam lectus leo, lobortis nec ultricies in, consequat quam. integer orci nisi, faucibus ut elit vel, mattis convallis enim. nunc sed velit ligula euismod vehicula.</p> <p>nulla et efficitur tellus. sed consequat ornare magna, ac vestibulum elit tempor vel. fusce laoreet quam purus, et congue magna pellentesque mollis. donec et vestibulum tellus. aenean eros eget quam accumsan posuere. etiam european union accumsan odio. sed porttitor quam non magna volutpat dapibus.</p> <div class="social_share"> <ul> <li><a href="">like</a></li> <li><a href="">tweet</a></li> <li><a href="">pin</a></li> </ul> </div> <div class="footer_nav"> <div class="previous">< previous</div> <div class="next">next ></div> </div> </div><!--end of fixed sidebar--> <!--images--> <div class="image_list"> <img src="image.jpg" /> <img src="image.jpg" /> <img src="image.jpg" /> </div>
for interested. managed come reply this. haven't used jpushmenu rather pure css , little jquery toggle classes. see jsfiddle here
code below:
<html> <head> <meta charset="utf-8"> <title>untitled document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".button").click(function(){ $("#wrapper").toggleclass("push"); }); }); $(document).ready(function(){ $(".button").click(function(){ $("#menu").toggleclass("push"); }); }); </script> </head> <body> <style> body, html { margin: 0; padding: 0; } #wrapper.normal { margin-left: 0; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; } #wrapper.push { margin-left: 300px; overflow: hidden; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; } #menu.normal { position: fixed; width: 300px; height: 100%; left: -300px; background-color: hsla(0,0%,80%,1.00); color: #0d0d0d; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; } #menu.push { position: fixed; width: 300px; height: 100%; left: 0; background-color: hsla(0,0%,80%,1.00); color: #0d0d0d; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; } #sidebar { position: fixed; width: 300px; padding: 50px; height: 100%; background-color:hsla(0,0%,94%,1.00); } #content { margin-left: 400px; } </style> <!--off canvas menu--> <nav id="menu" class="normal"> <a class="button" href="#">hide menu</a> <ul> <li>option 1</li> <li>option 2</li> <li>option 3</li> </ul> </nav> <!--page wrapper--> <div id="wrapper" class="normal"> <div id="sidebar"> <a class="button" href="#">show menu</a> <h1>project title</h1> <p>some content goes here.</p> </div> <div id="content"> <img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg"/> <img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg"/> <img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg"/> </div> </div> </body> </html> jquery menu fixed sidebar
No comments:
Post a Comment