Drop Down Menu Storyline

Jun 19, 2012

Anyone have any tips or suggestions for creating a drop-down menu in Storyline?  I am trying to create my own from scratch but having issues with making the drop down menu funtion properly (i.e, making the menu items appear and disappear as the user mouses over the menu).

153 Replies
Ashley Terwilliger-Pollard

Hi Joni,

I saw the same as Wendy, and in her image there isn't an "Overview" section - so I wonder if you're referring to the "Course introduction" slide where you've made your own Custom drop down tabs? Those also behaved normally for me on the first view, when clicking on them, and then on a revisit to the slide. So if you could share a bit more information about what isn't work for you and your set up that'll help us narrow down the issue. 

Greg Damron

Hi Joni,

I took a quick peek at the drop down menu and like Ashley found it worked properly when tried and everything looked good. With a closer look, I did notice two areas that could be causing the intermittent  problems you described. The dimensions of the Course Introduction text box (slide level) are extending over a portion of your menu bar:png1

also, on the master slide, it looks like there may be a small gap (1px) near the top of the menu choices:png2

Taking a look at these areas may get you going. Best of luck on your project!

Joni Grove

Hi Wendy-  Apparently it's a glitch.  Last night, whenever I accessed my custom drop down menu, at least one of the menus wouldn't let me click on the drop down portion (ie the layer that shows when you hover over one of the topics).  For example, nothing would drop down under Lesson 1.  However, today it works and I can't get the issue to replicate.  Maybe it's like when your car is making a noise and you bring it to the mechanic and it goes away:)

Thank you for your help!

Joni

Ashley Terwilliger-Pollard

Hi Joni,

Thanks for sharing your file here - I think this is a situation of too many triggers and needing to adjust the slide layer properties as they were set to hide the other layers, so once you were on one, no way to get to the others. I made some minor fixes and it seems to be closer to working now, but didn't want to mess with it too much not knowing your overall needs. The hover trigger has an option for "restore on mouse leave" so that may be something to also take a look at and play around with.

Greg Damron

Hi Joni,
I took a look and may have something that will work. I noticed that you had a layer set up for the main menu listing and then used a separate layer for the sub menu. Also, that your hover border was only extending on two of the four sides of your menu (right side and bottom).

Since you have several menus, it may be helpful for managing layers within the project to combine the main listing and sub menu on one layer. I’ve re-enclosed your file showing the layers combined and have also extended your hover border to cover all four sides of the menu and sub menu.

To make it work, the sub menu items for each main topic are initially hidden and then displayed when that topic is hovered over. If one of the other main topics is hovered over, then the sub menu will close. Moving the mouse outside the menu/sub menu area into the hover area will hide the entire menu.

Take a look and see what you think. Best of luck on your project!

Milton Edwards

Greg!
Thanks for sharing your drop-down menu creations. You've inspired me to create a drop-down list that functions similar to your menus. My goal is to set a variable that captures the selected list option, and to use that variable in an email string to show which Sales region the person has selected during login. Something like Set list option to true when clicked; all options false at start. Set the capture variable to the value of the list option selected after testing to see which option is true of all the options. Hope it works! I'll share it if it does.

Milton

Alyssa Gomez

Hi Walt, 

This thread is a bit older, so let's start fresh. Are you using Greg's example file called double_drop-down_menu_v2.story linked above?

If not, could you share a sample of the file you're working with so we can take a closer look at your setup? You can attach the file to a new reply in this discussion. You also have the option to send it to me privately by uploading it here. I'll delete it when I'm done troubleshooting.

Walt Jones

Thanks for the reply. I chose this thread because of the number of participants and comments - I figured someone would have experienced something similar.

While preparing my file to upload, it occurred to me that a shape with no fill might not block the hover trigger, and I was right. I had put a transparent shape over the menu button in hopes of saving time when I copied the layer.

As someone once said, "I learn something new everyday, and at my age I'm getting sick of it!"

Ryan Donaldson

I have tried this method of putting the hidden shape over the drop down but I keep getting inconsistent behavior. When I hover over the main menu item, the drop down will appear, but when I go to mouse over the sub menu, it disappears over and over. Then it will randomly work as expected. I cant use this solution as it would be extremely frustrating to any user.

How do I fix this? I've tried making the hidden box bigger and the same size as the drop down menu but nothing seems to work.

Tegid Griffiths

Many thanks for this conversation, My challenge was to have a customized menu depending on which State the user selected at the onset of the course. Some states have different content to others. And so just having the menu tab displayed won't work as I cannot dynamically create/change it based on the state selected. Therefore a customized menu is my only option.

I now have a button on the master slide with different layers for each state with their own menu.

When the user clicks on the menu button it displays the appropriate layer with the menu for that state displayed. The only problem I have now is how to prevent students from skipping slides. I want to Restrict navigation where they can go back but not forward.

Any suggestions?

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