Animated Menu for Storyline 2 /w source file

View demoDownload SL2 fileHow it's done video

Hi folks,

I created a simple animated menu that a user can open via the ‘sandwich’ icon which you see more and more in responsive design these days. What I like about this interaction is that is frees up the player real-estate and allows the user to focus on the actual content while the menu is but a simple click away.

The menu:

  1. is based on a Slide master for easy maintenance
  2. has a smooth intro and exit animation
  3. features a Hover and Completed state
  4. is slightly transparent so any background image can subtly bleed through

 

You could expand some of the menu’s features by adding a help/more info, downloads/resources and contact icons at the bottom.

Check the Demo here and Download the Articulate Storyline 2 source file. If you want a closer look under the hood then check out this YouTube video on how I built the menu interaction.

Hope you like it, let me know in the comments!

Jeff

Published by

Jeff Kortenbosch

Jeff is a performance-focused learning professional that believes in making learning relevant again!

33 thoughts on “Animated Menu for Storyline 2 /w source file”

  1. Cool. But a classic sandwich icon should work differently I think. It should stay in the same position on the screen, not move to the right with the menu. Ideally, it should also turn into a left arrow when the menu is open. Finally, I’d add a semi-transparent dark overlay on top of the rest of the slide (fade in when menu opens, fade out when it closes).

    1. Hi Sergey, Glad you like it. Indeed there are quite a few variations possible. Your suggestions sound good. Feel free to adapt the source file to suit your needs.

    1. Hi Carmen, it’s built in Articulate Storyline 2. If you like you can visit articulate.com and download a 30 day trial.

  2. Nice! It’s clean, elegant, and who wouldn’t appreciate the extra real estate! Thanks for sharing.

  3. Hi I love the design. I’m a complete novice and cant figure out how to implement this into and throughout a course, the video has shed some light a allowed me to play around some more, but when trying to add slides i.e. content for Module 1, then 2 Etc. I cant select them in the slide master settings, Like I said I’m a complete novice and have even figured out how to work with slide masters yet either. But I will keep trying with the hope if I mess it up I can always download the source files and try again…

    1. Hi Trevor, I suggest you subscribe to my YouTube channel. I’ll be doing a tutorial video shortly. Thank you for the question. Basically all you have to do is create the slides or scenes you want to link to. Then go to the slide master to add triggers to the menu options.

    2. Hey Jeff, Thanks for getting back to me. It took lots of coffee and a long night but I got there in the end. Demo was set to link to scenes and I was producing slides, (was trying to change by single click rather than double click to bring up dialogue box. Schoolboy error!) I’m subscribing to the Blog and will click on your Channel as well. I have seen some of your stuff but forgot my log in details at the time you have some great content and guidance.

      Regards T.

  4. Hi Jeff, This is fabulous. Thank you. I would like to use the base image in other slides with transparency. Is the image somewhere in the source file? I’m having trouble finding it. Thanks Anne

  5. Very nice Jeff, but what about if used in scorm/LMS situation? I mean: what about the last visited page bookmark and also how to mark the “already visited pages”? Do you lost all this information if you close the course hosted into an LMS and then you open it again?

    Thank you!

    Ciao

    Piero

    1. Hey Piero, that is being handled by the Articulate player. So no need to worry about that. That magic happens by default.

  6. very good job
    but i wana stay in the same layer when i click in the menu .beaucos each one i click in the menu i go in the layer de base and its not cool for the dispositif whith the lot of layers
    can you help me

  7. Hello Jeff, thank you very much for this really nice example. Unfortunately, I can’t open the source file with Storyline 3, because it doesn’t accept XML-Files. Could yould please make the Story-File available.

  8. God morning Jeff, I base a training videos on this menu but somehow when revisiting a page, the menu stays open unless you click the hotspot again to close it. Any idea on how I could get the menu to hide automatically when revisiting a previous slide?

    1. There are multiple ways, but you could add a close menu trigger on the master slide so every time the timeline starts for a slide it closes the menu if it’s open. I deliberately did not add that.

Leave a Reply