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).
Here's an example of a mouse over drop down menu, see if it may helpful for what you are looking for. Using mouse over and the hover states of the multiple menu objects to open/display/close the drop down was a little quirky! The solution I found that got everything appearing and disappearing as needed was to use a transparent shape to create a "hover border" around the drop down menu area when its displayed. Then if the mouse is moved outside the menu choice area without making a selection the hover border triggers closing the drop down. With this in place, a trigger to open the menu and then a trigger to make the selection from the display was the rest of what was needed to make it go. I've attached the story file showing the set up. Hope this of help!
Hi Greg, I really like this drop down menu. As Michael said, simple yet elegant. I was wondering if you tried placing the menu on the slide master and then jumping to specific pages instead of layers? This would save having to repeat the menu structure on every slide.
You've inspired me - I've played with it a bit more and transferred the menu bar to the master, and now have only only one place to update triggers with multiple slides, sweet! See what you think.
Hi Greg, this is exactly what I was thinking. Works great. Now the one thing that would make it perfect would be if the menu item that was currently active was highlighted somehow. Maybe this could be done using a custom state.
Great! The highlight on the top level menu might be a nice feature depending on project (but it could also be evident from the content displayed once plugged in?)
I've worked on the drop down menu a little more and incorporated Nancy's excellent suggestion of having the the menu item currently selected as highlighted. This first post shows shows the details for inserting the menu system at slide level. My next post in a few minutes will show details for applying the menu it on the master. I've had fun building it, I hope you find it useful and version 2 a nice enhancement.
Project details:
* Hovering over any menu choice drops down that menu layer, then click select to make a choice or move out of the hover area to close the menu
* The use of a transparent shape around the menu area in the drop down creates a "hover border" to hide the drop down layer if the mouse is moved outside the menu area without making a selection __________
v2 improvement: To highlight the currently selected top level menu item, a trigger is added to each layer, setting the menu item's state to selected at the start of each layer's timeline.
To keep all the menu items from eventually showing as selected when the user clicks through the menus, all five top level menu items were converted to a button set named menuBar.
Since all five items are now in the button set - only one may be selected at any time and any previously selected item in the set is automatically deselected when each new selection is made -no further triggers or validation is needed
Here's the update for the master slide version- a little different approach was needed to effect to update the states of the menu items on the master from slide level ...see below (notes are also on the notes tab in the story file). Hope you find the enhancements useful!
Best regards, -Greg
Project details:
* All menu actions are on the master slide
* Hovering over any menu choice drops down that menu layer, then click select to make a choice or move out of the hover area to close the menu
* The use of a transparent shape around the menu area of the drop down creates a "hover border" to hide the drop down layer if the mouse is moved outside the menu area without making a selection __________
v2 improvement: To highlight the currently selected top level menu item, two triggers are used on each layer as it loads, the first trigger changes a variable to true set the menu item's state to selected on the master slide. With the menu now selected, the second trigger resets the variable to false for the next use.
Having these two triggers sequentially doing an opposing action seems a little counter intuitive at first, but solves the problem of communicating the state change information from the individual slide level to the master slide nicely (a quick variable change "pulse" of sorts, that takes place as the new slide timeline begins).
To keep all the menu items from eventually showing as selected when the user clicks through the menus, as with the slide level menu demo, all five top level menu items were converted to a button set named menuBar.
Since all five menu items are now in the button set - only one may be selected at any time and any previously selected item in the set is automatically deselected when each new selection is made - no further triggers or validation needed.
Hi Greg - I can't seem to get the 'mouse hover over' feature to work - I have set up as per your template - created a transparent shape with trigger to hide layer when mouse hover over - the shape is sitting behind the drop down buttons /bottom of timeline as per yours but when I preview, the drop down list does not disappear unless I select something from the list or move onto another menu.
Hi Cath, sounds like something may be up with the "hover border" trigger or placement and it shouldn't be too hard to fix. Could you possibly post your story file or a screen shot or two?
153 Replies
Hi Oswaldo,
Here's an example of a mouse over drop down menu, see if it may helpful for what you are looking for. Using mouse over and the hover states of the multiple menu objects to open/display/close the drop down was a little quirky! The solution I found that got everything appearing and disappearing as needed was to use a transparent shape to create a "hover border" around the drop down menu area when its displayed. Then if the mouse is moved outside the menu choice area without making a selection the hover border triggers closing the drop down. With this in place, a trigger to open the menu and then a trigger to make the selection from the display was the rest of what was needed to make it go. I've attached the story file showing the set up. Hope this of help!
Hi Greg,
Simple yet elegant! Thanks for the model; it will be fun taking this one apart and putting it back together... Owe you one!
Michael
Hi Greg, I really like this drop down menu. As Michael said, simple yet elegant. I was wondering if you tried placing the menu on the slide master and then jumping to specific pages instead of layers? This would save having to repeat the menu structure on every slide.
Thanks Greg!!! This exactly what I was trying to accomplish.
Good idea, Nancy! If you had to add and element or change a trigger, you'd only have to do it once...
@ Oswaldo - Great! Good luck with your project!
@ Michael - Thank you, I think it can have a lot of possibilities!
@ Nancy - I've just got the concept working and haven't played with it a lot yet. Yes - Sounds like that could be a good idea!
If I get some time, I will noodle around with your story file to see if I can getting it working - it should work.
You've inspired me - I've played with it a bit more and transferred the menu bar to the master, and now have only only one place to update triggers with multiple slides, sweet! See what you think.
Hi Greg, this is exactly what I was thinking. Works great. Now the one thing that would make it perfect would be if the menu item that was currently active was highlighted somehow. Maybe this could be done using a custom state.
Great! The highlight on the top level menu might be a nice feature depending on project (but it could also be evident from the content displayed once plugged in?)
Hi Greg - yup. Your menu works great as is and you are correct that the content can indicate which menu item the user is on.
Thanks Nancy - and of course there can be many versions on how to use!
Greg - great menu. Thanks
Thanks Dave, glad you found it useful!
Greg!
great menu. Thanks
Thanks Cho!
Thanks for all this info - got it to work.
Superb!
Love it.
Thanks very much!
@Cath, El, glad you liked it!
Hello all,
I've worked on the drop down menu a little more and incorporated Nancy's excellent suggestion of having the the menu item currently selected as highlighted. This first post shows shows the details for inserting the menu system at slide level. My next post in a few minutes will show details for applying the menu it on the master. I've had fun building it, I hope you find it useful and version 2 a nice enhancement.
Project details:
* Hovering over any menu choice drops down that menu layer, then click select to make a choice or move out of the hover area to close the menu
* The use of a transparent shape around the menu area in the drop down creates a "hover border" to hide the drop down layer if the mouse is moved outside the menu area without making a selection
__________
v2 improvement:
To highlight the currently selected top level menu item, a trigger is added to each layer, setting the menu item's state to selected at the start of each layer's timeline.
To keep all the menu items from eventually showing as selected when the user clicks through the menus, all five top level menu items were converted to a button set named menuBar.
Since all five items are now in the button set - only one may be selected at any time and any previously selected item in the set is automatically deselected when each new selection is made -no further triggers or validation is needed
Here's the update for the master slide version- a little different approach was needed to effect to update the states of the menu items on the master from slide level ...see below (notes are also on the notes tab in the story file). Hope you find the enhancements useful!
Best regards, -Greg
Project details:
* All menu actions are on the master slide
* Hovering over any menu choice drops down that menu layer, then click select to make a choice or move out of the hover area to close the menu
* The use of a transparent shape around the menu area of the drop down creates a "hover border" to hide the drop down layer if the mouse is moved outside the menu area without making a selection
__________
v2 improvement:
To highlight the currently selected top level menu item, two triggers are used on each layer as it loads, the first trigger changes a variable to true set the menu item's state to selected on the master slide. With the menu now selected, the second trigger resets the variable to false for the next use.
Having these two triggers sequentially doing an opposing action seems a little counter intuitive at first, but solves the problem of communicating the state change information from the individual slide level to the master slide nicely (a quick variable change "pulse" of sorts, that takes place as the new slide timeline begins).
To keep all the menu items from eventually showing as selected when the user clicks through the menus, as with the slide level menu demo, all five top level menu items were converted to a button set named menuBar.
Since all five menu items are now in the button set - only one may be selected at any time and any previously selected item in the set is automatically deselected when each new selection is made - no further triggers or validation needed.
Thanks Greg for the update and info - was having a few issues so will test to see if this fixes these.
Sorry to hear you were having trouble Cath.
Please see if these posts might be of help, if not and there's a question I can help with to sort out what's going wrong please let me know!
Hi Greg - I can't seem to get the 'mouse hover over' feature to work - I have set up as per your template - created a transparent shape with trigger to hide layer when mouse hover over - the shape is sitting behind the drop down buttons /bottom of timeline as per yours but when I preview, the drop down list does not disappear unless I select something from the list or move onto another menu.
Any advice would be greatly appreciated.
Hi Cath, sounds like something may be up with the "hover border" trigger or placement and it shouldn't be too hard to fix. Could you possibly post your story file or a screen shot or two?
This discussion is closed. You can start a new discussion or contact Articulate Support.