Hide sidebar/menu when user clicks link inside

Oct 19, 2020

Hello,

there is some UX concern for me and I wanted to ask maybe there is some solution.

I've recently started using 'menu' inside sidebar to allow users to navigate inside the course. However, I'd like to automatically hide the menu, when user clicks any link inside it. Is this can be achieved?

 

2 Replies
Ned Whiteley

Hi Mateusz,

I don't believe that you can automatically hide the menu when the user makes a selection. However, you could set up your own menu on a lightbox slide that shows when the user clicks on a menu icon on each slide and then hides when they make a selection.

By creating a menu on a lightbox slide, you have full control over the formatting and style of the menu and can control its operation with triggers. You also only have to create it once and can make it available to any slide you wish.

Hopefully this gives you another option to consider.

Mateusz Szuter

Hi Ned, thanks for you input :) I'm aware of building menu from scratch, but that's ok with fairly simple, short training. Here I have like 150 screens - that would be a loooong road to script all of this :)

Well however I was in a hurry, I've made simple javascript for that. It probably can be fired more elegantly, maybe someone can work it out.

So I've put this javascript on my slidemaster (so it fires on every slide and also when someone is revisting the training)

document.getElementById("hamburger").style.display = 'none'; // it hides the player button for menu. I open the menu using javascript on my 'inside-training' button.
var closeMenu=document.getElementsByClassName("cs-listitem"); // variable stores the array of the all 'cs-listitem' elements, or being more straightforward - it stores all the menu anchors, the one you click to jump to certain slide.

for (i = 0; i < closeMenu.length; i++) { closeMenu[i].addEventListener("click", hideSM);
} // this loop goes through all of our menu anchors, and listens if the user clicked it. If someone clicked something on menu list, it also fires hideSM function.


function hideSM(){
document.getElementsByClassName("menu-icon-wrapper")[0].click();
};
// well that's really simple thing - it simulates clicking on button that opens menu. Button works as toggle, when sidebar is open and you click it, it will collapse the sidebar. When the sidebar is closed and you click it, it opens. Simple solution.

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