Question

I’m trying to create a section on my page that will allow users to mouse-over or click a tab-like heading and have it’s content scroll to be shown below.

An example of what I mean is shown on this page: http://www.iflexion.com/ If you look at the section below their main slider, you can mouse-over “Solutions”, “Services”, etc. and the content will show.

I’d love to find an example tutorial on how to accomplish this, but I don’t know exactly what the functionally is called to know what to look for. I’ve looked at some tab displays, like JQuery’s, but it’s not exactly like this one.

Anyone have any ideas if they used something I can look up, or what this type of functionally is called so I can look up more accurate examples?

Answer 1

You can start with this:
http://blogs.msdn.com/b/thebeebs/archive/2010/11/10/how-to-create-an-awesome-scrolling-navigation-using-jquery.aspx

Then do the following modification:

• Modify it as vertical srolling
• Invoke the scrolling by onhover instead of onclick
• Call .insertAfter() (
  http://api.jquery.com/insertAfter/) to insert the block after the current active block. Then you can start your scrolling.

You will then get the effect of the content always popping out from the bottom of the div