How To Create A Customized Course Menu In Articulate Storyline

Last updated:

In this video, I’ll show you step-by-step how you can create a custom course menu for your next e-learning course in Articulate Storyline.

cta under video

I have a sample chapter here, in which I created the custom course menu. If you click on my slide, you’ll see there’s a button, but the button isn’t on my timeline, and there are also no layers here. So what I’ve done to get the custom course menu on all my slides, I’ve added it to my slide master.

Step 1: Open the slide Master

So let’s go to the slide master, and you can go to view. Click on slide master, here, to these master slides from Serenity, it’s one of the standard Articulate Storyline themes, and I have here the custom hamburger menu. If I click it, the layer menu will open. It will be open.

Step 2: Create a new layer with the menu elements

So there’s this layer. And on this layer, you’ll see all the objects that will appear if you click on the hamburger menu. So here, you have the close button and you have the different chapters. And you can fill in the chapter names for your course.

Step 3: Add states to the chapter names

And this chapter, for instance, has different states. So what are these, there’s a normal state. There’s a hover state. And it has also a selected, a completed state. So if a chapter is completed, you can set it to completed.

So the red arrow, and also you can see here that the check mark icon are in the states of the text object. So what I do is I’ll change the state of text object, for instance, here, to completed. And you see, there is now a check mark. So they are also in the same element.

Step 4: Create to change state when chapter is completed

So I have a trigger here that says change state of the text, chapter one, to completed when the timeline of this layer starts and if chapter one is equal to true. And we will set the variable chapter one later on. But this you can also do for chapter two, three, four, five, and six. So let’s continue and create the same action for chapter two. What I do is, I’ll click on chapter two. I create a new variable. What I want is I want to change the state of chapter two, and I want to change it to completed. Now, this is a custom state, and when I want to do it, when the timer start, and not on chapter two, but on this layer. And we want to add a condition.

Now, you see, I have only a chapter one and a chapter six variable here. So what I will do, I will create a new variable that I call chapter two. And it won’t be a text variable, but a true false variable, and default value is false. So I click on okay. And now it says here false, but [inaudible 00:03:36] to be true.

So what it will do, it will change the state of chapter two to completed when the timeline of this layer starts, and if the chapter two variable is equal to true. And this can be done for all the other chapter names, but I think this is enough for this example.

Step 5: Add animations to your menu elements

And what I also want to show on this layer is, if I select all the elements, I added an animation, a fly-in animation, with the duration of 1.25 seconds, and for effect options, I chose from right. So it means it will fly in from right until here. So that gives a little bit animated effect.

And what you can do now, if you click on the cross, is that the menu disappears at once, but that’s not really… Yeah, it can be better. So what I’ve done, I copied this menu layer in a new layer called menu height. This layer only has a duration of 1.25 seconds. And it’s basically the same layer as the other layer, but what it does here, there is another animation. It says fly out, and fly out with effects options to right. So it flies out to the right, out of my screen, with a duration of 1.25 seconds.

Step 6: Create a second menu layer with a fly out animation

So if I click on the close layer here, the close button, this layer will be hidden, and the other lane will be shown. And this layer will show for 1.25 seconds. And when the timeline is finished, this layer will also hide, and your menu is hidden. And I’ve done this with a trigger. So if you go to this properties panel here, you’ll see I checked here on the slide layer properties, this check mark for hide slide layer when timer finishes. So this means when the timer finishes, Storyline automatically hides this layer.

So let’s close my slide master. And what you normally can do is, if this is a chapter, on the last page of your chapter, you can create a trigger. And adjust variable trigger. Choose, for instance, chapter one is equal to two when timeline starts on this slide.

So let’s preview this slide right now. So chapter one will be set to true. And when I click on my menu, you’ll see that chapter one here has now a checked icon. And you saw that the menu animates in, and when I click on the cross, it will also animate out, and it’s gone again. So this is how you can create an animated custom course menu for your next Articulate Storyline project.


You've just read an article from Upward Online Learning

Want to read more articles like this? Sign up for my weekly emails. As a bonus, you'll receive my ebook with my 7 top Articulate Storyline time-saving tips for a perfect start to learning Storyline faster and without any hassle!

Want to know more about creating more effective and engaging e-learning? This is how I can help:

Ultimate Articulate Storyline Online Course

Want to learn Articulate Storyline the smart way? So that you can save up to 40 hours per e-learning course? Subscribe now to my Ultimate Articulate Storyline Training with a $50 discount with the coupon UPWemail.

This online Articulate Storyline course is the fastest way to speed up your Articulate Storyline e-learning skills and learn a proven e-learning development process from design to implementation.

Knowledge Library

Watch over 100 detailed tutorials, reviews and how-to videos from my popular Youtube channel.

Build Better E-learning With Templates


Leave a Comment