CODEWITHSUNDEEP
jquerycss
stack
stack

Reputation: 103

Slide in div to push content

Here is a demo of the script I am using to bring in a menu form the left:

Demo Fiddle

The DIV that slides in the from the left will need to push the divs called 'left panel' and 'right panel' out of the way so they slide also. So instead of the hidden DIV to come in and hover over the left panel it will need to push it too.

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "slow").addClass('visible');
    }
    });
});

Upvotes: 1

Views: 7541

Answers (2)

StathisG
StathisG

Reputation: 1169

You can do the following:

In CSS, remove the absolute positioning and set width to 0%.

CSS:

.hidden {
    width:0%;
    background:#f90;
    color:#000;
}

And then, animate the value of width instead of the value of left:

JavaScript:

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"width":"0%"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"width":"25%"}, "slow").addClass('visible');
    }
    });
});

DEMO: http://jsfiddle.net/X5mP3/

Also, here's an alternative solution, in which the value of the left margin is animated instead of the width (in that case though, depending on your actual code, you'll probably need to set overflow: hidden to some parent element to hide the div behind it): http://jsfiddle.net/652RY/

Upvotes: 1

Vishwanath
Vishwanath

Reputation: 6004

You can do this by animating container containing all the three div elements. Animate the conatainers left property with the amount of width your left side menu is having.

http://jsfiddle.net/ZQTFq/1916/

HTML

<div class="container">
    <div class="hidden">Here I am !</div>
    <div class="left">Left panel</div>
    <div class="right">Right panel</div>
    <div class="clear"></div>
</div>
<div>
<a href="#" id="slide">Show/hide Slide Panel</a>
</div>

JS

$(document).ready(function(){
    $('#slide').click(function(){
    var hidden = $('.hidden');
     if (hidden.hasClass('visible')){
        hidden.animate({"left":"0px"}, "slow").removeClass('visible');
    } else {
        hidden.animate({"left":"140px"}, "slow").addClass('visible');
    }
    });
});

CSS

.container{
    position:absolute;
    width:100%;
}
.left, .hidden {
    float: left;
    height:350px;
    position:absolute;
    left:-140px
}

.left {
    width: 50%;
    background: #fff;
    z-index:1;
}

.hidden {
    width:25%;
    z-index:2;
    background:#f90;
    color:#000;
}

.right {
    width:50%;
    float: right;
    height:350px;
    background:#000;
    color:#fff;
}

.clear {
    clear:both;
}

#slide{
    position:fixed;
    bottom:0;
}
}

Upvotes: 1

Related Questions