0

I'm currently building a responsive site and i need to have a hidden div which will slide in from the left after clicking a button in the the left side bar. Once this button has been pressed the side bar will be pushed across from the sliding content (Sliding from the left) and overlay the existing content or push across the content in the right hand side.

This is where the problem lies as it's a responsive site. I would like the sidebar in the 'siteInnerLeft' div to be pushed to the right hand side of the page when the new div slides in. So after the content has sliden in the previous content is no longer visible until the sliding content has slid back out.

Here is a my JSFiddle - http://jsfiddle.net/76xvB/2/

Hopefuly you can see what i'm trying to acheive. I've manaed to get it working until a point but the issue I have is the content sliding in is fixed and I don't want it to be fixed as there is more content to view and this removes the users ability to scroll.

I understand that 'position fixed' takes the element out of the document flow. So is this going to stop me acheiving what I want? If so, is there another way of doing it.

NOTE: The real site will have percentages not pixels because of it being responsive, this is a broken down version.

My current code:

HTML

<div id="siteWrapper">
    <div id="siteInnerLeft">
        <div id="homeNavLink">
            <p>Click me</p>
        </div>
    </div>
    <div id="siteInnerRight">
       <div class="pushmenu-push">
           <p>Current page content</p>
        </div>
        <div class="pushmenu pushmenu-left">
            <p>Content to slide in from the left</p>
        </div>
        <div id="footer">
             <p>This is my footer and this content always needs to be showing and can't be hidden behind the fixed div</p>
        </div>
    </div>      
</div>

CSS

#siteWrapper{
    max-width:500px;
    margin:0 auto;
    width:100%;    
}

#siteInnerLeft{
    background-color:green;
    width:100px;
    float:left;
    position:fixed; /* Sidebar that needs to be fixed*/
}

#siteInnerRight{
    width: 400px;
    background-color:yellow;
    float:left;
    margin-left: 100px; /*Compensates for fixed header width */
}

.pushmenu {
    background: #e9e8e0;
    font-family: georgia,times news roman, times, serif;
    position: fixed;
    width:400px;
    height: 100%;
    top: 0;
    z-index: 1000;
}


.pushmenu-push{
    left: 0;
    overflow-x: hidden;
    position: relative;
    width: 100%;  

}

.pushmenu-left{
    left:-400px;
}

.pushmenu-left.pushmenu-open {
        left: 0px;
       /* box-shadow: 5px 5px 5px #d9d8d0;*/
}

.pushmenu, .pushmenu-push {
    transition: all 0.3s ease 0s;
}

#footer{
    width:100%;
    clear:both;
    background-color:red;
}

jQuery

$menuLeft = $('.pushmenu-left');
$nav_list = $('#homeNavLink');

$nav_list.click(function() {
    $(this).toggleClass('active');
    $('.pushmenu-push').toggleClass('pushmenu-push-toright');
    $menuLeft.toggleClass('pushmenu-open');
});

Any suggestions would be most appreciated.

Thanks.

lozadaOmr
  • 2,565
  • 5
  • 44
  • 58
JDavies
  • 2,730
  • 7
  • 34
  • 54

2 Answers2

0

On completion of the transition, change the position of the sidebar so that it is not longer fixed. The answer on the following link breaks it down pretty well and has quality references: Callback when CSS3 transition finishes

Community
  • 1
  • 1
Jason Lydon
  • 7,074
  • 1
  • 35
  • 43
  • Thanks for your reply. The sidebar isn't really what's causing the issue. It's the content that slides in from the left. As that is fixed and I don't want it to be. – JDavies Feb 10 '14 at 17:29
  • That's better, although the footer need to sit under the content at the top, then the content from the left that slides in needs to push the side bar across to the right hand side of the page. and sit above the current content on the page. The for the footer to adapt it's height and sit under the sidebar that's just come slid in. – JDavies Feb 11 '14 at 12:20
0

If the side-bar is fixed, you could create a scroll-bar inside for the content, so the text can be viewable; you could do this by adding overflow-y: auto; in the .pushmenucss class.

Another way would be to set the sidebar as position: absolute; and then dynamically change the top property from javascript when the user hits the sidebar's bottom.

IoviX
  • 11
  • 1