0

I'm developing a portfolio website that has a jPushMenu on the left but also includes a sticky sidebar in the content. The push menu can't "push" my sidebar because its set to position: fixed; in my CSS.

Please excuse the rushed JSFiddle but here is what I'm working with. Any help would be 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 eu consequat mollis, ante nulla eleifend leo, id porta magna magna quis augue. Duis egestas neque id interdum accumsan. Maecenas a congue neque, in gravida turpis. Nullam posuere tellus eu pellentesque cursus. Integer vitae diam et metus luctus consequat. Nullam lectus leo, lobortis nec ultricies in, consequat a quam. Integer orci nisi, faucibus ut elit vel, mattis convallis enim. Nunc sed velit a 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 a eros eget quam accumsan posuere. Etiam eu 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>
Dan Leckie
  • 11
  • 1
  • 5

1 Answers1

0

For anyone interested. I managed to come up with an answer to this. Haven't used jPushMenu but rather pure CSS and a little jQuery to toggle some 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: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;  
}

#wrapper.push {
    margin-left: 300px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 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: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 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: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 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>
Dan Leckie
  • 11
  • 1
  • 5