How to Activate Custom Menus after Visiting Slides in Storyline 360 Using JavaScript

1. Open Your Project

Start by opening your course in Storyline 360. Navigate to the slide or scene where you want the menu behavior to begin. This is often your main menu slide or a navigation hub.

2. Create a Tracking Variable

To control menu visibility, you need a Text variable that tracks which scene or slide the learner has visited.

• Go to the Variables panel in Storyline.
• Click the (+) icon to create a new variable.
• Set the variable type to Text.
• Name it something descriptive, such as chosenScene.
• Leave the default value blank.

This variable will dynamically update as learners click different buttons or visit different scenes.

3. Add Triggers to Update the Variable

For each menu button or navigation element, create a trigger to update the variable value. This allows the course to “remember” which scene the learner has accessed. 

Example setup: 

Button 1: 

• Action: Adjust Variable 
• Variable: chosenScene 
• Value: “Module 1“ 
• When: User clicks Button 1 

Repeat this process for each button 2 and 3 that represents a section of your course. This step is essential for eLearning training modules that need to control progression across multiple topics. 

4. Use the Slide Master to Insert JavaScript 

To ensure the menu behavior works consistently across slides, insert your JavaScript code in the Slide Master rather than on individual slides. 

• Go to the View tab and select Slide Master. 
• Choose the layout that applies to your navigation menu (usually the main layout). 
• Create a Trigger: 
• Action: Execute JavaScript 
• When: Timeline starts on this slide. 
• Click the JavaScript link to open the editor. 
• Paste your JavaScript code (see example below). 

function updateMenu() {
// Always keep these scenes visible
const allowedScenes = [“Scene 1”];
// Get user’s branch selection from Storyline variable
const player = GetPlayer();
const chosenScene = player.GetVar(“chosenScene”);
if (chosenScene) allowedScenes.push(chosenScene);
// Select all built-in menu items (each scene link)
const menuItems = document.querySelectorAll(“.menu-scene, .is-scene”);
menuItems.forEach(menu => {
// Works for both Storyline player menu and custom menus
const title = menu.getAttribute(“data-slide-title”) || menu.textContent.trim();
// Show only allowed scenes
const isAllowed = allowedScenes.includes(title);
if (menu.parentElement) {
menu.parentElement.style.display = isAllowed ? “” : “none”;
} else {
menu.style.display = isAllowed ? “” : “none”;
}
});
}
// Run once at load
updateMenu();
// Optional: Re-run if variable changes dynamically
if (window.GetPlayer) {
const player = GetPlayer();
const originalSetVar = player.SetVar;
player.SetVar = function (varName, value) {
originalSetVar.call(player, varName, value);
if (varName === “chosenScene”) updateMenu();
};
}return `#${randColor.toUpperCase()}`
}

• Replace any placeholder text with your main menu title or variable references. 
• Click OK to save, then close the Slide Master. 

5. Preview and Test Thoroughly 

Click Preview to test your course. Interact with each button to ensure that: 

• The variable updates correctly when a button is clicked. 
• The JavaScript runs when the slide starts. 
• The correct menu item becomes visible for each visited scene. 
• Menu behavior persists as learners navigate between scenes. 

Testing is crucial in eLearning development, especially when combining triggers and JavaScript. Be sure to test in multiple browsers and in your learning management system to confirm consistent behavior.