FORUMS: list search recent posts

How is this done?

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Stephan Fuchs
How is this done?
on Aug 14, 2012 at 5:39:10 am

Hi all,

I've been trying to figure this one out for some time now, but just can't figure it out:

On http://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


Return to posts index

Curtis Thompson
Re: How is this done?
on Aug 14, 2012 at 4:56:46 pm

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:

http://jqueryui.com/demos/toggle/

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

http://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


Return to posts index

Stephan Fuchs
Re: How is this done?
on Aug 14, 2012 at 6:11:20 pm

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?


Return to posts index


Curtis Thompson
Re: How is this done?
on Aug 14, 2012 at 6:16:16 pm

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:

http://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


Return to posts index

Stephan Fuchs
Re: How is this done?
on Aug 14, 2012 at 8:04:47 pm

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


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]