Forum Discussion
JavaScript Tricks for Articulate Storyline 3/360 show/hide menu
Has anyone got the show/hide menu to work here on the Elearning Brothers website?
I've tried attaching the code to a button but nothing seems to happen
Thanks
44 Replies
This is an excellent solution Math. I really appreciate that you kept it simple!
document.querySelector("#hamburger > div").click();
I was wondering if you, or anyone else, knows how to make the default state of the menu and the hamburger invisible. In fact, as I am using my own button to call the menu, the hamburger icon becomes completely reductant so really I am asking....
Is possible to permanently hide the hamburger and have the menu invisible / collapsed as its default state.
My goal is to have the menu invisible until the end user needs it, then it can appear using a regular button in the course with the code above to toggle the menu when it is needed.
Thank you in advance for any support you may have.
To make elements invisible in Storyline360 you can use GSAP code. As GSAP is built into Storyline360 its the easiest way to animate elements. And offcourse simply hide them.
let hamburger = document.querySelector("#hamburger > div");gsap.set(hamburger, { autoAlpha:0 });
To show the hamburger menu icon again you can add this to a button...let hamburger = document.querySelector("#hamburger > div");gsap.to(hamburger, {duration:1.5,autoAlpha:1});
In GSAP set directly sets values and to animates them over time
Remember this only works in Storyline360 as the GSAP Javascript library is built in.
To do the same in Storyline3 you can change the style of the element. Like this.let hamburger = document.querySelector("#hamburger > div");hamburger.style.display = 'none';
And to show it again on a button...let hamburger = document.querySelector("#hamburger > div");hamburger.style.display = 'block';Thanks for posting this Math! It came in very handy today.
Just excellent, a truly elegant solution.
document.querySelector("#hamburger > div"); hamburger.style.display = 'none';
I have it attached to a timeline start action so the end user doesn't see it and they can use the custom button to show/hide the sidebar menu.
----------------------
My final challenge should be simple CSS, I would like to have the sidebar overlay the content rather than resize it. Just working on some CSS swaps.
Thank you again for the help.
Things go wrong when testing this is Review.
It seems like the querySelector for the menu can not reach the element inside of the Iframe the course is loaded. The behaviour might be the same in an LMS but I have not tested this.Review has issues for quite a while. When using Javascript / CSS selectors you cannot depend on Review as there are iframes and divs added. And fixing your code pure for Review is unneeded work.. you can however if you want...check the URL for 'Review' and add rules for that.
the querySelector starts always from the current DOM root - so iframes are not problematic
just tested on Review 360 - the version with and the version without gsap is working
https://360.articulate.com/review/content/e9af0b67-3746-4de5-82a1-8fa8a3f610ce/review
hide gsap:
gsap.set("#hamburger", {pointerEvents: 'none'});
gsap.to("#hamburger > div", {duration:0.5, autoAlpha:0});show gsap:
gsap.to("#hamburger > div", {
duration: 1,
autoAlpha:1,
onComplete: function(){
gsap.set("#hamburger", {pointerEvents: 'auto'});
}
});hide:
document.querySelector("#hamburger").style.pointerEvents = 'none';
document.querySelector("#hamburger > div").style.visibility = 'hidden';
document.querySelector("#hamburger > div").style.opacity = 0;show:
document.querySelector("#hamburger").style.pointerEvents = 'auto';
document.querySelector("#hamburger > div").style.visibility = 'inherit';
document.querySelector("#hamburger > div").style.opacity = 1;toggle:
document.querySelector("#hamburger > div").click();
