2

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

Andre Medei
  • 21
  • 1
  • 2

2 Answers2

2

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

Jake Toolson
  • 480
  • 3
  • 8
  • If you look at the jQuery on the EMS link I added, I have the "book" sliding out (open) when loaded and when you click anywhere OUTSIDE of the book, it slides in (closes). Clicking on either of the 2 tags loads that page via AJAX and updates the tag css. – Jake Toolson Apr 10 '12 at 20:06
0

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?

Community
  • 1
  • 1
designosis
  • 5,182
  • 1
  • 38
  • 57