Having a functional menu without a wrapper

Jul 09, 2013

Hi all,

I am creating a course for a client. The design calls for no wrapper. I have put the navigation buttons on the slide itself, but I need to allow the learner to navigate throughout the course. I've come up with three options, none of them ideal, and was hoping someone might have a solution that I've missed.

The options I thought of all involve building a nice button to be on every slide that triggers a jump to a special "menu" page. One option has the standard, built in menu as a sidebar turned on only for that one slide. The next option also uses the built-in functionality - the word "menu" floats above the slide where the wrapper would be (I've made the wrapper transparent) and is a drop down showing all the pages. My final idea was to forgo the real menu altogether and just have text boxes (Lesson 1 intro, Lesson 1 Knowledge Check, Lesson 2 intro, etc) with triggers to take the learner to those few key pages.

I'm not thrilled by any of my ideas.  Does anybody know of a way to get a fully functioning menu in a wrapperless design?



14 Replies
tim deegan

Hi Alex, and thanks for the reply so quickly.

That would save a step, putting custom menu I built  button on the master slide, but I think I will still have the same dilemma... Once they click my custom button, I think they still have to go to a "special" page where I still have my challenge of finding a more elegant way to display the menu on a wrapperless course.

Nicole Legault

Hi there Tim!! Thanks for posting your question.... if I am understanding correctly you want an elegant way of displaying navigation/a menu for a course, but without using the standard "Player" options... 

What about creating a simple drop down menu on your master slide, which is visible on every slide, and from which users can navigate to any slide? =)

Antony Snow

Hi Tim,

Alex is correct - You can build a custom menu that is triggered from the slide master as per the attached example - as it is on a layer of the slide master it will appear 'on top' of any slide the user is on when they click the 'menu' button rather than visiting a 'special' page (I have added a slight transparent shape to my layer so the slide below it shows through slightly).


Here, I have also used variables to provide a visual to the learner of what slides they have already viewed by adding a True/False variable for each slide and set the initial value to False. I have then added a trigger to each slide to adjust the variable to True when the timeline starts.


On the slide master, I have;

  • Added the menu on a new layer
  • Added a button to the base layer to show this menu layer when the user clicks on it
  • Added each menu item as a shape and created a custom 'viewed' state where the text is black to indicate that the slide has been viewed
  • Added a trigger to change the state of each menu item to 'viewed' when the timeline of the menu layer starts on condition that the respective variables are equal to True

Does this help?


tim deegan

Hi Nicole, thanks for the reply!

That is a slick idea, and for a short course with only a few pages, that would probably do the trick.

But my client has long courses, some up to 50 slides... the size of the drop down and all the triggers would be a bit cumbersome.

I guess I'm hoping for some  secret way to get the built in menu feature in Storyline to work outside of the two ways it normally does - an always showing left hand column or floating word drop down at the top left or right.

I'm thinking there might not be a secret way...

Nicole Legault

Tim, no there's no other way to show the default Storyline menu than by displaying it in the Player. What if you used the feature where you place it in the top corner (drop down version of it) but then get rid of everything else in the player, and make the player the same color as the background of your course? Then it would look like there's no wrapper, but wouldn't involve any additional layers, triggers, etc.

Alexandros Anoyatis

Hello again,

Please don't take this as a blatant attempt to show my work, but this concept may very well work for you.

The background is semi transparent and the menu button can be changed to whatever element you like (hotspot drag n drop to simulate swiping, or even place a listener on the master slide to show the menu layers when a variable changes - in which case you can position elements that trigger the menu right inside your regular slides).

Hope this helps,


tim deegan

Hi Alex, 

I enjoy looking at other designers work, so thanks for the link!

Your page was really slick and well made, and it gave me ideas for some other things I'm working on. But with this large course I'm working on now, I think I really need the built in functionality of the official Storyline Menu for the learners to use to navigate, rather than creating 50 custom elements that would take them to each page.

Thanks again for your help tho, I appreciate it.


Jerson  Campos

If you're not opposed to using a flash based element, I was messing around with a little experiment a while back.  I was able to dynamically load the menu items into a flash object and display them on the screen. With this method you can make changes to the storyline menu items and then the menu would be automatically updated.  If you know some AS3 all you have to do is load the xml file that storyline creates for it's menu items. I'll see if I can dig it up.

Nancy Woinoski


This is an example of a custom menu that I created that is basically skinless.   I created a custom player tab and named it Menu. I used JavaScript to toggle the menu on and off when clicked  and placed the menu on a layer in the slide master.

So you only have to build the menu in one places and can make it look any way you want. When it is opened, the menu will sit on top of the slide or slide layer you are currently viewing.

This does not save you from having to manually create your menu but it might do the trick for you.

This discussion is closed. You can start a new discussion or contact Articulate Support.