Using JQuery to slide sections across page

Hello experts:

I am a noob to all this but I am trying to develop a page for my business.

I am trying to have my page navigation function with a sliding effect. Similar to the effect shown here http://jqueryfordesigners.com/slide-out-and-drawer-effect/ expect for the fact the sections would slide out horizontally as opposed to the vertical effect shown on the page. demonstration.

I have attached a snapshot of what it should look like.  Notice how the "link bars" move from the left to the right depending on what page you are on.  I want to achieve that using JQuery or some JS framework.  All I know about them are the names.

Can someone please help me?

Thank you,

--d.
example.docx
driven13Asked:
Who is Participating?
 
Julian HansenCommented:
This one looked promising

http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

I did test in IE - also seems to be a problem

This one works though

http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html

What you need to look at are accordions - do a search on "jquery horizontal accordion"

Another link where some code is given to implement

http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/
0
 
StealthyDevCommented:
Sorry, couldnt see you docx

Anyways, try this:
http://www.devwebpro.com/jquery-navigation-menu-tutorials/
0
 
Julian HansenCommented:
There are a few jquery libraries out there that can do this

Check out flowplayer.org

Here is one example - but look at the others.

http://flowplayer.org/tools/demos/scrollable/wizard.html

This one focuses on images but will work with anything really (I used it for divs with all sorts of content)

http://jquery.malsup.com/cycle
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
driven13Author Commented:
Thank you both for your responses.  But not really sure if this is what I was looking for.  But I think my ignorance is getting in my way again.

I have attached a picture of the document for those of you who cannot open the MS-Word document.

Any other ideas??

Thanx again,

--d.
mockup.gif
0
 
Julian HansenCommented:
0
 
driven13Author Commented:
julianH:

You are amazing.  Even though I have not looked over it at length, this was exactly what I was looking for.

The only thing is it does not show up in IE8.....FF is ok.

Now that you know what I am looking for do you know of a similar example but one that works across all browsers...??

Thank you so much.

--d.
0
 
Julian HansenCommented:
Not offhand - although in theory it should work in IE8 - have not had a look closely - will pick it up tomorrow.
0
 
driven13Author Commented:
julianH:

Thanx for the links.  I will check them out soon.

Looks hard....[:0(

--d.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.