CODEWITHSUNDEEP
jqueryhtmlcss
Václav Zeman
Václav Zeman

Reputation: 616

Div slide from the left side after a button is clicked

The picture explains it better than I do.

Before I click on it - screenshot1

After: screenshot2

It's a fixed button on the side of a window and it slides out when it's clicked.

I've been searching the web for so long and can't find the solution. Could you guys help me please?

Upvotes: 2

Views: 4556

Answers (2)

sajan
sajan

Reputation: 1370

basically i do in jquery, however i given a code for css.. i used hover instead of click. And changes these css values and play with it..

<div class="wrapper">
    <div id="slide">
     //content or form goes here.. 
    </div>
</div>

.wrapper {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px; 
    border: 1px solid black;
}

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    transition: 1s;
}
.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

Upvotes: 0

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

below code can help you.

HTML

<section id="hiddenPanel" class="txt-highlight-color bg-color bg-pattern">
  <span id="close-bar" class="myButton"> < </span>
</section>

CSS

#hiddenPanel {position:fixed; top:0; right:-200px; width:200px; background-color:grey; height:250px;}
#close-bar { position:absolute; left:-20px; background:red; color:white; width:20px; height:250px;}

jQuery Code

var speed = 300;
    $('#close-bar').on('click', function(){

        var $$ = $(this),
            panelWidth = $('#hiddenPanel').outerWidth();

        if( $$.is('.myButton') ){
            $('#hiddenPanel').animate({right:0}, speed);
            $$.removeClass('myButton')
        } else {
            $('#hiddenPanel').animate({right:-panelWidth}, speed);
            $$.addClass('myButton')
        }

    });

http://jsfiddle.net/Rxsd5/

Upvotes: 1

Related Questions