How is this done?

[Curtis Thompson]

hello…

i assume you mean the sub menu that appears in a window-shade style effect for each tab? if so, that is something that most major javascript libraries (jquery, mootools, etc.) have built in as a ui function – here’s the jquery one:

https://jqueryui.com/demos/toggle/

i see by glancing through their code that they are using jquery plus a custom plugin to that called hoverintent:

https://cherne.net/brian/resources/jquery.hoverIntent.html

you could leverage all that same code – start by taking their page source and stripping out all the unnecessary items and get it down to a simple example of the tabs and related sub menus. then you would have a working example to build back up into a site of your own…

hope that helps!

sitruc

[Stephan Fuchs]

Hi Curtis,

Thanks for the reply, but it’s not quite what I meant.

On their site you see the content moving down when the menu animation happens, e.g. the whole main body moves down when a tab is clicked. Any guess on that one too?

[Curtis Thompson]

hello…

yup – that’s what i documented how to do – it’s just a div that gets expanded to the full height, which then moves the page down.

if you look at the hoverintent page:

https://cherne.net/brian/resources/jquery.hoverIntent.html

you see that the little boxes expand their height when they are moused over – that’s the exact same concept, but they just put a menu in the div that expands and a menu item in the primary box. in the case of their page, it just pushes the rest of the content down a bit as it expands…

sitruc

[Stephan Fuchs]

Ahh, sorry read a bit too fast, thanks for that! 🙂