-
How is this done?
Hi all,
I’ve been trying to figure this one out for some time now, but just can’t figure it out:
On https://www.o2.co.uk the main body moves with the action from the tab menu. The menu I have figured out, but I Am puzzled about the moving main body.
Cheers,
Stephan -
4 Replies
-
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
-
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?
-
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
-
Ahh, sorry read a bit too fast, thanks for that! 🙂
Reply to this Discussion! Login or Sign Up