CODEWITHSUNDEEP
jqueryajax
Andre Medei
Andre Medei

Reputation: 21

Jquery Load Content Slide In/Out from Right

I want to have on clicking menu items, the div will slide from right to left and on open the option to close (which slides back to the right)

eg: http://www.cortac.com/

Any idea, demo links etc. to accomplish this?

I found this which comes close to the above but does not slide from right to left.

http://d2o0t5hpnwv4c1.cloudfront.net/011_jQuerySite/sample/index.html

Upvotes: 2

Views: 9289

Answers (2)

designosis
designosis

Reputation: 5263

I asked a similar question 8 months ago, and figured out an answer ... a bit more complex than what you've asked, but its the only thing like it I've seen...

best approach for jQuery slider with dynamic prev/next content?

Upvotes: 0

Jake Toolson
Jake Toolson

Reputation: 480

I made a very quick example here: http://jsfiddle.net/jaketoolson/ukztv/

I set the panel to absolute positioning with right set to a negative equal to width.

#page {
position: absolute;  
top: 20%;
right: -400px; 
width: 400px;
}

Then the jQuery is a mouseover (use click etc) effect with "animate" setting the target css:

$('.link').mouseover(function() {
$('#page').animate({'right':'0px'}, 1500);
}).mouseout(function(){
$('#page').animate({'right': '-800px'}, 1500);});

To get it to load pages, this can be done via AJAX or other methods. See the example I'm currently building here: http://jaketoolson.com/ems/index.php

Upvotes: 2

Related Questions