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 the additional detail on adding states for the progress bar and a few other items:
After going to the master slide view, select the rectangle 'progressScale' and then click the states tab below to view it's states.
You can see the 15 states that already exist spreading across the bottom. Over the next few shots we'll add another state (#16). After a little experimenting, I've come across a means to insert the addition states without a lot of opening and closing of controls. First, click the 'Edit States" button...
Now right click on the 'progressScale' object and choose 'size and position' from the pop up...
Once the 'size and position' window is open, it can stay open for the entire time the rest of the states are being added.and inserting the new states will be as easy as 1-2-3.
The next step is to select the last state (in this case #15) so that it is surrounded by the yellow box. Now (1) click the copy state button, (2) give the state a name, in this case 16, and click add. The new state inserts in after a few seconds,
and now (3) use the 'size and position box' to increase the width by 4px for the next increment. Just key the number in and DO NOT hit the Close button, instead hit the copy state button again (back to step 1!). The state will be saved and you'll be on your way to getting the next one in. Continue the process until you have the number of states needed entered in.
Two variables are used to get the value for the progress bar and set the correct state to be displayed. The visited# variable previously mentioned is the first. This variable starts as 0 for each slide and is then changed to 1 when the slide is visited. The second variable, progress, serves as the counter variable - adding 1 to its count when the slide is visited.
By listing the progress variable trigger (with the condition that visited#=0 to increase progress) ahead of the visited# variable trigger the counter only adds for the first time a slide is visited.
To make it all go, we'll also need another set of triggers on the master slide that uses the counter value to display the correct progress state.
For 80 increments you'll need 80 triggers (ugg), but by copying an existing trigger and then just changing the highlighted values as needed they can go in pretty quick.
One of the neat things about adding all the states to the object to make the progress bar is that if you copy/paste it all the states go with it! You can easily change the parameters on it (size of increment, etc) as needed to fit other purposes.
Give it a try and see if this helps meet the need for your project. If you do end up having some difficulty with the scrollbar and the types of devices your users have, I'm sure there can be a few other ways of approaching it.
I'll also look to post more detail over the next few days.
A thought on the states for the Menu item objects:
Just visiting a slide doesn't necessarily complete it. There may be activities to complete, and then conditions to meet before advancing to the next slide. In case including detail on when a slide is completed would be important, I've also added a "completed slide" state to the menu items (but haven't attached any coding to it). Here's a shot of the four states that support the menu items:
Also probably worth another mention to be sure and create the custom "Visited Slide" state and NOT use the system default menu "Visited" state for the menu tracking to work properly.
@Rebecca - Thank you!! I was thinking you might find a few items here to re-purpose
@Brian - Happy to share, its a great community and I give back when I can (can't always get back to the boards right away). It has been a long running thread. Thanks for your kind words, just trying to help out (and I'm still working on that French accent you mentioned before)
@Leslie, Ashley - Thank you- and sorry I couldn't get back a little sooner.
Have been following this post and using some of the ideas I've found - super helpful and thanks to all who have contributed.
I decided to make an accessible accordion style menu with a basic progress tracker using a separate scene rather than the master. It's all keyboard controlled, with the instructions in plain view. Pressing 'M' brings up the menu.
Greg - Another grateful user here. Thanks for posting the source files and instructions. I just applied this to a series of courses...it got me out of a real bind.
I know this thread is a bit old...but just curious about something on the setup.
The menu is not really dynamic in the sense that for each slide, I have to add a separate "line item", create all the states for that item, create a trigger for that item, and then track a specific variable for that item and set it on each slide.
I can't figure out why my drop down menu isn't remaining onscreen to scroll through the available choices. I've attached my story file for a look and I already have that embarrasing feeling that it's something simple that I've missed.
The layer is only set to be shown when the user hovers their mouse over the text box for each region/country as you've indicated and then the individual layers are set to hide the layer when the user is hovering over the list - so it is behaving as you've set up the slide/course.
It has been a little while! There were a few examples posted. The first example was built at slide level and primarily used the menu to move back and forth between many layers/options on a single slide. Multiple slides could be added, however, that would mean (as you indicated I think) either re-building the menu structure for each slide or jumping off to non-menued slides for activities and then returning to the slide with the menu.The "hover border" was key to making this example work and it didn't require variables to support it.
The second version posted was built on the master slide. It supported more complex projects and solved the need to rebuild the menu each time. Setting up multiple master slides also allowed for using context sensitive setups or even no menu at all on each slide by selecting from different slide layouts with varying features built in. With the increased complexity and the need to keep track of things from slide to slide, using variables became helpful for supporting more features. It is a dynamic menu, in that it refreshes and checks for changes in values each time it time it displays, but also includes a static element because it is able to retain values from slide to slide.
I've completed a quite a few menu builds and have found many similarities, but also that each project will have unique needs that largely depend on what features you would need to support. It all comes down to what is the best way for your learner to access the content.
I've been away from the board for awhile and took a quick peek at your file this evening. Ashley has pointed you in the right direction. It looks like it is working nicely, but may also be giving you intermittent problems from the small gaps between the buttons at times when scrolling.
I played with your file a little and added a hot spot behind the button choices on each menu layer to fill the gaps. With the code you had in place, and no more gaps, it worked great -please see what you think. I also made a small adjustment to the North America list and left a note in the project file explaining a bit more. Here's a screen shot just below showing the hot spot placement and I've also reattached your sample file with the updates added.
Hello every one, can you tell me if i am using multiple select options in a single slide? if i use how i store the first selected option retain with choose second drop down other option??
I'm not sure I understand your question - and it may help the community and staff if you're able to post a sample file that you're working on or have specific questions about. As you see in Greg's most recent example, he's only used the hover state to indicate which one the user was hovered over - and for an explanation of the different states you can view the support article here on the built in states.
Thanks for all the great tips Greg. I've created my own drop down menu with the help of your examples. However, I have run into one problem that I cant seem to figure out.
I'm using the slide master version with each section of the drop down menu linking to a slide. I have that all figured out and working great, the problem is when I have slide layers on the linking slides. When you hover over the menu it hides the current layer you are on and shows the base layer with the menu.
I am trying to keep the navigation as minimal as possible (no previous or next buttons) and always have the drop down menu showing. My concept is similar to a website (like this one) where you always have the menu at the top of the screen.
Is it possible to have a layer show on top of another layer? Or do I need to use a different method? Do you (or anybody) have any suggestions for me?
I don't know that Greg is still subscribed to this thread, but you may want to use the "contact me" button on his profile if you'd like advice directly from him.
In regards to showing multiple layers at once, you'll want to look at the slide layer properties and ensure it's not set to "hide other slide layers"
153 Replies
Here's the additional detail on adding states for the progress bar and a few other items:
After going to the master slide view, select the rectangle 'progressScale' and then click the states tab below to view it's states.
You can see the 15 states that already exist spreading across the bottom. Over the next few shots we'll add another state (#16). After a little experimenting, I've come across a means to insert the addition states without a lot of opening and closing of controls. First, click the 'Edit States" button...
Now right click on the 'progressScale' object and choose 'size and position' from the pop up...
Once the 'size and position' window is open, it can stay open for the entire time the rest of the states are being added.and inserting the new states will be as easy as 1-2-3.
The next step is to select the last state (in this case #15) so that it is surrounded by the yellow box. Now (1) click the copy state button, (2) give the state a name, in this case 16, and click add. The new state inserts in after a few seconds,
and now (3) use the 'size and position box' to increase the width by 4px for the next increment. Just key the number in and DO NOT hit the Close button, instead hit the copy state button again (back to step 1!). The state will be saved and you'll be on your way to getting the next one in. Continue the process until you have the number of states needed entered in.
Two variables are used to get the value for the progress bar and set the correct state to be displayed. The visited# variable previously mentioned is the first. This variable starts as 0 for each slide and is then changed to 1 when the slide is visited. The second variable, progress, serves as the counter variable - adding 1 to its count when the slide is visited.
By listing the progress variable trigger (with the condition that visited#=0 to increase progress) ahead of the visited# variable trigger the counter only adds for the first time a slide is visited.
To make it all go, we'll also need another set of triggers on the master slide that uses the counter value to display the correct progress state.
For 80 increments you'll need 80 triggers (ugg), but by copying an existing trigger and then just changing the highlighted values as needed they can go in pretty quick.
One of the neat things about adding all the states to the object to make the progress bar is that if you copy/paste it all the states go with it! You can easily change the parameters on it (size of increment, etc) as needed to fit other purposes.
Give it a try and see if this helps meet the need for your project. If you do end up having some difficulty with the scrollbar and the types of devices your users have, I'm sure there can be a few other ways of approaching it.
I'll also look to post more detail over the next few days.
-Greg
A thought on the states for the Menu item objects:
Just visiting a slide doesn't necessarily complete it. There may be activities to complete, and then conditions to meet before advancing to the next slide. In case including detail on when a slide is completed would be important, I've also added a "completed slide" state to the menu items (but haven't attached any coding to it). Here's a shot of the four states that support the menu items:
Also probably worth another mention to be sure and create the custom "Visited Slide" state and NOT use the system default menu "Visited" state for the menu tracking to work properly.
Wow, Greg! Many many plus ones!
Greg, great work on this and love that you've shared it here in the forums.
This is the thread that keeps on giving, by far the best subscription I've got on a thread in these forums!
Wow! Thanks Greg!!
Thanks Greg for sharing!
@Rebecca - Thank you!! I was thinking you might find a few items here to re-purpose
@Brian - Happy to share, its a great community and I give back when I can (can't always get back to the boards right away). It has been a long running thread. Thanks for your kind words, just trying to help out (and I'm still working on that French accent you mentioned before)
@Leslie, Ashley - Thank you- and sorry I couldn't get back a little sooner.
No problem at all
Hi Guys
Have been following this post and using some of the ideas I've found - super helpful and thanks to all who have contributed.
I decided to make an accessible accordion style menu with a basic progress tracker using a separate scene rather than the master. It's all keyboard controlled, with the instructions in plain view. Pressing 'M' brings up the menu.
http://www.instructionaldesigns.co.uk/1/post/2014/02/accessible-menu-in-storyline.html
I will upload the .story file later also - on my other computer.
Hope some people find this useful! Any comments on improving this would be welcome also.
Hi Luke,
Thanks for sharing here and we're excited to see what you've come up with!
Greg - Another grateful user here. Thanks for posting the source files and instructions. I just applied this to a series of courses...it got me out of a real bind.
@Luke - I may have an application for your menu. Will you please share the .story file?
Thanks!
Hello Leslie,
Happy to be of help - great to hear you found it useful for your courses (and it got you out of a bind!)
Hi Leslie,
You may also want to send Luke a private message, as I'm not certain that he's subscribed to this thread.
I know this thread is a bit old...but just curious about something on the setup.
The menu is not really dynamic in the sense that for each slide, I have to add a separate "line item", create all the states for that item, create a trigger for that item, and then track a specific variable for that item and set it on each slide.
Is that a correct statement?
Hi,
I can't figure out why my drop down menu isn't remaining onscreen to scroll through the available choices. I've attached my story file for a look and I already have that embarrasing feeling that it's something simple that I've missed.
Hi Noel,
The layer is only set to be shown when the user hovers their mouse over the text box for each region/country as you've indicated and then the individual layers are set to hide the layer when the user is hovering over the list - so it is behaving as you've set up the slide/course.
Hi Rob,
It has been a little while! There were a few examples posted. The first example was built at slide level and primarily used the menu to move back and forth between many layers/options on a single slide. Multiple slides could be added, however, that would mean (as you indicated I think) either re-building the menu structure for each slide or jumping off to non-menued slides for activities and then returning to the slide with the menu.The "hover border" was key to making this example work and it didn't require variables to support it.
The second version posted was built on the master slide. It supported more complex projects and solved the need to rebuild the menu each time. Setting up multiple master slides also allowed for using context sensitive setups or even no menu at all on each slide by selecting from different slide layouts with varying features built in. With the increased complexity and the need to keep track of things from slide to slide, using variables became helpful for supporting more features. It is a dynamic menu, in that it refreshes and checks for changes in values each time it time it displays, but also includes a static element because it is able to retain values from slide to slide.
I've completed a quite a few menu builds and have found many similarities, but also that each project will have unique needs that largely depend on what features you would need to support. It all comes down to what is the best way for your learner to access the content.
I hope this may be of help!
Best regards,
Greg
Hello Noel,
I've been away from the board for awhile and took a quick peek at your file this evening. Ashley has pointed you in the right direction. It looks like it is working nicely, but may also be giving you intermittent problems from the small gaps between the buttons at times when scrolling.
I played with your file a little and added a hot spot behind the button choices on each menu layer to fill the gaps. With the code you had in place, and no more gaps, it worked great -please see what you think. I also made a small adjustment to the North America list and left a note in the project file explaining a bit more. Here's a screen shot just below showing the hot spot placement and I've also reattached your sample file with the updates added.
Good luck with your project!
Greg
Hello every one, can you tell me if i am using multiple select options in a single slide? if i use how i store the first selected option retain with choose second drop down other option??
Hi Saravana,
I'm not sure I understand your question - and it may help the community and staff if you're able to post a sample file that you're working on or have specific questions about. As you see in Greg's most recent example, he's only used the hover state to indicate which one the user was hovered over - and for an explanation of the different states you can view the support article here on the built in states.
Yes...I got it thanks for your help Ashley......
Thanks for all the great tips Greg. I've created my own drop down menu with the help of your examples. However, I have run into one problem that I cant seem to figure out.
I'm using the slide master version with each section of the drop down menu linking to a slide. I have that all figured out and working great, the problem is when I have slide layers on the linking slides. When you hover over the menu it hides the current layer you are on and shows the base layer with the menu.
I am trying to keep the navigation as minimal as possible (no previous or next buttons) and always have the drop down menu showing. My concept is similar to a website (like this one) where you always have the menu at the top of the screen.
Is it possible to have a layer show on top of another layer? Or do I need to use a different method? Do you (or anybody) have any suggestions for me?
Thanks in advance!
Hi Kaitlin,
I don't know that Greg is still subscribed to this thread, but you may want to use the "contact me" button on his profile if you'd like advice directly from him.
In regards to showing multiple layers at once, you'll want to look at the slide layer properties and ensure it's not set to "hide other slide layers"
Thanks for the heads up Ashley, but I think you actually answered my question! I cant believe I didn't think about that.
This discussion is closed. You can start a new discussion or contact Articulate Support.