I really like the way the DIVs fold/unfold from the top to the bottom then left to right when users click on the menu items (about, services, my tools, etc) on this website. Seems that it has been developed by a very talented person.

Any idea how to achieve something like that? I was expecting this to be done via plex CSS animation, but looking at the CSS sheet that doesn't seem to be the case.

Many thank

I really like the way the DIVs fold/unfold from the top to the bottom then left to right when users click on the menu items (about, services, my tools, etc) on this website. Seems that it has been developed by a very talented person.

Any idea how to achieve something like that? I was expecting this to be done via plex CSS animation, but looking at the CSS sheet that doesn't seem to be the case.

Many thank

• javascript
• jquery
• html
• css

• 2 You can view the CSS and HTML and JS on the site... why not just view it there? – Codeman Commented Dec 2, 2014 at 20:01
• It looks like they have the div positioned with a border and are simply changing the width/height over time. – rfornal Commented Dec 2, 2014 at 20:05

3 Answers 3

On that site it is achieved with the use of jQuery UI - more specifically with the Fold Effect.

I think using jQuery UI for this task alone would be an overkill, in fact you don't even need jQuery here, but I think you want to stick to it, since it's relatively easy both to read and to write code:

$("a").click(function() {
    $("#fold")
    .animate({ width: "500px" }, 1000 )
    .animate({ height: "500px" }, 1000 )
});

See:

http://jsfiddle/bartkarp/u3qtt6fo/

http://api.jquery./animate/

If you don't want to use jQuery UI, I guess you could do it by animating the css...:-?? First state is height: 0; and width :30px; ...then using the animate on click event you could give the height a value and animation time, the width a delay equal o bigger than the height animation time and then it's value...that should do the trick but it's more stiff than actually using the UI