Train the Trainer E-learning Course This Thanksgiving
Share Twitter Facebook LinkedIn Google+

How to Create an Interactive Menu for Online Courses in Articulate Storyline

Written By

How to Create an Interactive Menu for Online Courses in Articulate Storyline

Articulate Storyline, by default, has a menu option as shown below.

Default menu option

But most learning designers seek to customize the Menu to make the course engaging and interactive. Here, I will share one such interactive customized menu we developed in Articulate Storyline.

The requirement of our client was to show the course topics in the menu such that the learner will be able to show/hide it a with slight up/down movement of the mouse as shown in the screenshots below.

Cusotmized Menu:When the learner wants to hide the menu

Cusotmized menu when the learner wants to hide the menu

Customized Menu: When the learner wants to see the menu

Customized menu when the learner wants to see the menu

Here is the detailed process of how to create such a menu : 

Follow these steps to create an interactive menu.

Step 1:

Draw a rectangle and divide it into equal partitions. Assume we have 4 topics in a course, so we divide the rectangle into 4 partitions. 

Draw a rectangle and divide it into equal partitions

Step 2:

Highlight the respective topics in the slides.

Highlight the respective topics in the slides

Step 3:

Create a layer (Menu up) and repeat Step 1and Step 2, but the rectangle should be larger than the rectangle in the base layer. Then give fly-in animation from the bottom.

Create a layer menu

Step 4:

Duplicate the layer (Menu up) and remove the animation. Rename the layer if needed. Here, we’ve renamed it Menu open.

Duplicate the layer menu and remove the animation

Step 5:

Duplicate the layer (Menu up) and change the animation. Give fly-out animation to the bottom. Rename the layer if needed. Here we’ve renamed it Menu down. Make sure the timeline of this layer is 1 second.

Duplicate the layer menu and change the animation

Step 6:

Now draw rectangles (make sure these are 100% transparent) on each topic in each layer except the Menu down layer, in all slides. Then assign triggers to those rectangles so that when the learner clicks on a rectangle, he/she will be redirected to the respective topic. If the learner clicks the same topic where he/she is, the Menu slide in slide out animation will be executed.

For that, follow the triggers given below.

Triggers in Topic 1:

Trigger 1:

In the base layer:

Show layer Menu up when user clicks rectangle1.

In the menu layers:

Show layer Menu down when user clicks rectangle1. 

Trigger 2:

In both base layer and menu layers:

Jump to slide Topic 2 when user clicks rectangle2.

Trigger3:

In both base layer and menu layers:

Jump to slide Topic 3 when user clicks rectangle3.

Trigger4:

In both base layer and menu layers:

Jump to slide Topic 4 when user clicks rectangle4.

Repeat these triggers in all the slides in this topic.

Triggers in Topic 2:

Trigger 1:

In both base layer and menu layers:

Jump to slide Topic 1 when user clicks rectangle1.

Trigger 2:

In the base layer:

Show layer Menu up when user clicks rectangle2.

In the menu layers:

Show layer Menu down when user clicks rectangle2.

Trigger 3:

In both base layer and menu layers:

Jump to slide Topic 3 when user clicks rectangle3.

Trigger 4:

In both base layer and menu layers:

Jump to slide Topic 4 when user clicks rectangle4.

Repeat these triggers in all the slides in this topic.

We thus add these triggers in all the slides.

Add triggers in all slides 1

Add triggers in all slides 2

Add triggers in all slides 3

Add triggers in all slides 4

Step 7:

Create a Boolean variable (Menu) with False as the default value.

Create a boolean variable menu

Step 8:

Now change the value of the Boolean variable Menu to true when the menu up layer timeline starts.

Change the value of boolean variable menu to true

Repeat step 8 in the menu up layer in all slides. 

Step 9:

Now change the value of the Boolean variable Menu to false when the menu down layer timeline starts.

Change the value of boolean variable menu to false

Repeat step 9 in the menu down layer in all slides. 

Step 10:

Now add these triggers in all the slides.

Trigger 1:

Show layer menu open when the timeline starts on the condition, Menu is true.

Show layer menu open when the timeline starts on the condition menu is true

Trigger2:

Hide layer menu open when the timeline starts on the condition, Menu is false.

Hide layer menu open when the timeline starts on the condition menu is false

These are the steps to create an interactive menu in Storyline. So the next time you develop courses in this tool, hook your learners by offering them an engaging experience.

Get to know how to create interactive and engaging eLearning using articulate storyline.

View eBook on Articulate Storyline for Building E-learning Courses

Share
Topics:

Subscribe to Our Blogs

Get CommLab's latest eLearning articles straight to your inbox. Enter your email address below:

 
eLearning Learning