Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #332558 Score: 0
    Profile photo of Amy Huneycutt
    Amy Huneycutt
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    LUC17 Attendee
    wise owl
    curious george
    contributor
    @ahuneycutt2283

    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?

    #332577 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    329 pts
    @timk

    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

    This post has received 1 vote up.
    Attachments:
    1. TabInteraction.zip
    #332580 Score: 0
    Profile photo of Amy Huneycutt
    Amy Huneycutt
    Member
    beginner
    intermediate
    friend finder
    picture perfect
    LUC17 Attendee
    wise owl
    curious george
    contributor
    @ahuneycutt2283

    This is awesome! Thank you 🙂

    #332689 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    114 pts
    @jvalley4735

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

    Tabbed content

    Tabbed Course Template

    #332953 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    202 pts
    @Klaatu

    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).

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.