Sub sub menu in header

Ask the community
1

I made a (working) sub sub menu using html and normal boxes (containers) with buttons in it. It’s like this:

My one problem is, how can I add this to my header? Since that’s not quite working for me because the boxes are outside the header and I can’t stick it to the header.

2

Yes. you can.

  1. Create a box with height of only few pixels,

  2. Put it in the header.

  3. enlarge the height the (and it’s ok if it goes out of the header boundaries) and put the text element/repeater inside.
    P.S. I’m moving this thread to the Site and Design forum.

3

That worked, thanks! :slight_smile:
In Chrome it works perfectly, in Safari I sometimes have this problem:

Any idea what could be the problem?

4

@gerbergroen Please post your code (f you have any). Maybe the issue is there,

5

@jonatandor35 This is the code:

export function wedtips_mouseIn(event) {
 $w('#wedtips1').show()
}
export function wedtips_mouseOut(event) {
$w('#wedtips1').hide()
}
export function wedtips1_mouseIn(event) {
 $w('#wedtips1').show()
}
export function wedtips1_mouseOut(event) {
 $w('#wedtips1').hide()
 $w ('#eredivisieclubs').hide() 
}
export function weddeneredivisie_mouseIn(event) {
 $w ('#eredivisieclubs').show()
}
export function eredivisieclubs_mouseIn(event) {
 $w ('#eredivisieclubs').show()
 $w ('#wedtips1').show()
}
export function eredivisieclubs_mouseOut(event) {
 $w ('#eredivisieclubs').hide()
 $w ('#wedtips1').hide()
}
export function weddeneredivisie_mouseOut(event) {
 $w ('#eredivisieclubs').hide() 
}
export function bookmakers_mouseIn(event) {
 $w ('#bookmakers1').show()
}
export function bookmakers_mouseOut(event) {
$w('#bookmakers1').hide()
}
export function bookmakers1_mouseIn(event) {
 $w('#bookmakers1').show() 
}
export function bookmakers1_mouseOut(event) {
 $w('#bookmakers1').hide()
}
export function bookmakers1_mouseIn_1(event) {
 $w('#bookmakers1').show()
}
export function bookmakers1_mouseOut_1(event) {
 $w('#bookmakers1').hide()
}
6

Hi you need to handle it differently. Something like:
let’s say you have buttons in the menu with ID like “menuCategory1”, “menuCategory2”, and you have submenu boxes with IDs like: “menuCategory1Box”, “menuCategory2Box”

$w.onReady(() => {
let menuCategories = ["menuCategory1", "menuCategory2", "meneCategory3"];
let menuSelector = menuCategories.reduce((a,b) => a + "#" + b + ",", "");/
let menuBoxSelector =  menuCategories.reduce((a,b) => a + "#" + b + "Box,", "")
$w(menuSelector).onMouseIn(event => {
$w("#" + event.target.id + "Box").expand();
})
let menuBoxHovers = menuCategories.map(e => ({id:e, hovered: false});
$w(menuBoxSelector).onMouseIn(event => {
const currentHovered = menuBoxHovers.find(e => e.id === e);
currentClicked.hovered= true;
})
$w(menuSelector).onMouseOut(event => {
const currentLeave = menuBoxHovers .find(e => event.target.id === e.split("Box").join("");
if(!currentLeave.hovered){
$w("#" + event.target.id + "Box").collapse();
}
currentLeave.hovered= false;
})
$w(menuBoxSelector).onMouseOut(event => $w("#" + event.target.id).collapse());
})
7

@jonatandor35 I’m totally inexperienced with this, so I don’t know what to change in your code to make it work for me :sweat_smile::joy:

8

@gerbergroen Hi, you don’t have to do it exactly as I suggested, but you should understand the concept:
The challenge:
When you hover out of the menu, the boxes should collpase/hide. BUT if you move out of the menu to the sub-menu box itself, it should stay up.
The solution:
When you hover over a box, mark this box as “clicked” and do not close it.

Here’s the code with comments:

$w.onReady(() => {
let menuCategories = ["menuCategory1", "menuCategory2", "meneCategory3"];//This is a list of the menu button IDs
let menuSelector = menuCategories.reduce((a,b) => a + "#" + b + ",", "");//This  is a short way to write: "#menuCategory1, #menuCategory2, #menuCategory3" (the selector for the menu buttons)
let menuBoxSelector =  menuCategories.reduce((a,b) => a + "#" + b + "Box,", "")
//This is the short way to write: "#menuCategory1Box, #menuCategory2Box, #menuCategory3Box" (the selector for the sub-menu  box IDs)
$w(menuSelector).onMouseIn(event => {
$w("#" + event.target.id + "Box").expand();//Expand the correspondent sub-menu box
})
let menuBoxHovers = menuCategories.map(e => ({id:e, hovered: false});//Here you store the sub-menu hover status
$w(menuBoxSelector).onMouseIn(event => {
//Find the current hovered box:
const currentHovered = menuBoxHovers.find(e => e.id === e);
//Set its status to true:
currentClicked.hovered= true;
})
$w(menuSelector).onMouseOut(event => {
//when you hover out the menu button:
//Find the recently-left button:
const currentLeave = menuBoxHovers .find(e => event.target.id === e.split("Box").join("");
if(!currentLeave.hovered){
//Hide/collapse the box only if its boxed is not currently being hovered over:
$w("#" + event.target.id + "Box").collapse();
}
//Reset the status:
currentLeave.hovered= false;
})
$w(menuBoxSelector).onMouseOut(event => $w("#" + event.target.id).collapse());
})