Tab interaction?

I am working on a design in lectora and would like to create a tab effect for the navigation in my course. I tried searching to see if a tutorial or a similar question exists but I couldn't find a solution. I am trying to achieve a look similar to one in this course (though it was made in articulate):

https://s3.amazonaws.com/jpinholster/elearning/Top+E-Learning+Template+Makeover+-+Storyline+output/story.html

I have tried creating shape buttons and image buttons but I can't seem to figure out a way to achieve this look. The image buttons, even though the right size in the down and over states, continue to remain the normal state size, even though I wish them to be wider.

Any suggestions?

Discussion (4)

This is awesome! Thank you :)

You can't make the button wider on click (actually you could use a Resize action, but that won't look good, esp. if there's text in the button).

But you can rebuilt the effect from the example. See attached file.

Tim

Great example @timk ! There's also these two:

http://community.trivantis.com/shared-content/tabbed-content/

http://community.trivantis.com/shared-content/tabbed-course-template-2/

Here's a different approach to the tab interaction. No generated button graphics and only two actions required per tab. Just to get the content in quick, I cheated and used images (without optimizing).

Discussions have been disabled for this post