Menu Bug

hey,
button on my menu in code jumping look at the video

Hey,
It seems like there’s a but with your menu code (the onMouseOut event). Can you please share with us your menu code and the site URL?

Thanks,
Tal.

hey tal,
www.topink.co.il

import {local} from 'wix-storage';
import wixData from 'wix-data';
import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

$w.onReady(function () {
    $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();
    $w('#repeater1').collapse();
 //TODO: write your page related code here...

});

export function header_viewportLeave(event, $w) {
    $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();
    $w('#repeater1').collapse();
//Add your code for this event here: 
}

let lastFilterTitle;
let lastFilterDes;
let debounceTimer;
export function searchBar_keyPress(event, $w) {
    $w('#repeater1').expand()
 if (debounceTimer) {
    clearTimeout(debounceTimer);
    debounceTimer = undefined;
  }
  debounceTimer = setTimeout(() => {
    filter($w('#searchBar').value);  
  }, 100);
}

function filter(title, des) {
 if (lastFilterTitle !== title || lastFilterDes !== des) {
 let newFilter = wixData.filter();
 if(title) 
       newFilter = newFilter.contains('name', title); 
 if(des)   
       newFilter = newFilter.or(wixData.filter().contains('description', des)); 
    $w('#dataset2').setFilter(newFilter);       
    lastFilterTitle = title; 
    lastFilterDes = des;
  }
}


export function searchB_click() {
 let word = $w("#searchBar").value;
    local.setItem("searchWord", word);
    wixLocation.to(`/results`);
}

export function repeater1_mouseOut(event, $w) {
    $w('#repeater1').collapse()
 //Add your code for this event here: 
}

export function buttonPrinter_mouseIn(event, $w) {
    $w("#boxPrinter").expand();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonPrinter_mouseOut(event, $w) {
  $w("#boxPrinter").collapse();
}

export function boxPrinter_mouseIn(event, $w) {
    $w("#boxPrinter").expand();//Add your code for this event here: 
}

export function boxPrinter_mouseOut(event, $w) {
    $w("#boxPrinter").collapse()//Add your code for this event here: 
}


export function boxProjector_mouseIn(event, $w) {
    $w("#boxProjector").expand();//Add your code for this event here: 
}

export function boxProjector_mouseOut(event, $w) {
    $w("#boxProjector").collapse();//Add your code for this event here: 
}

export function buttonProjector_mouseIn(event, $w) {
    $w("#boxProjector").expand();
      $w("#boxPrinter").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonProjector_mouseOut(event, $w) {
    $w("#boxProjector").collapse();//Add your code for this event here: 
}

export function buttonInk_mouseIn(event, $w) {
    $w("#boxink").expand();
      $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonInk_mouseOut(event, $w) {
    $w("#boxink").collapse();//Add your code for this event here: 
}

export function boxink_mouseIn(event, $w) {
    $w("#boxink").expand();//Add your code for this event here: 
}

export function boxink_mouseOut(event, $w) {
    $w("#boxink").collapse();   //Add your code for this event here: 
}


export function buttonScanner_mouseIn(event, $w) {
    $w("#boxScanner").expand();
      $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonScanner_mouseOut(event, $w) {
    $w("#boxScanner").collapse();//Add your code for this event here: 
}

export function boxScanner_mouseIn(event, $w) {
    $w("#boxScanner").expand();//Add your code for this event here: 
}

export function boxScanner_mouseOut(event, $w) {
    $w("#boxScanner").collapse();//Add your code for this event here: 
}


export function boxCrusher_mouseIn(event, $w) {
    $w("#boxCrusher").expand();//Add your code for this event here: 
}

export function boxCrusher_mouseOut(event, $w) {
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonCrusher_mouseIn(event, $w) {
    $w("#boxCrusher").expand();
          $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
 //Add your code for this event here: 
}

export function buttonCrusher_mouseOut(event, $w) {
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonFax_mouseIn(event, $w) {
          $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonLamination_mouseIn(event, $w) {
          $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonPaper_mouseIn(event, $w) {
          $w("#boxPrinter").collapse();
    $w("#boxProjector").collapse();
    $w("#boxink").collapse();
    $w("#boxScanner").collapse();
    $w("#boxCrusher").collapse();//Add your code for this event here: 
}

?

Hi,
It seems like there’s an issue with the onMouseOut event. I recommend trying to show the relevant box box on the onMouseOut event without collapsing the other boxes. You should collapse the boxes on the onMouseOut of the box and not the buttons .

Best,
Tal.

like this

export function buttonPrinter_mouseIn(event, $w) {
  $w("#boxPrinter").expand();
 //Add your code for this event here: 
}

export function boxPrinter_mouseIn(event, $w) {
  $w("#boxPrinter").expand();//Add your code for this event here: 
}

export function boxPrinter_mouseOut(event, $w) {
  $w("#boxPrinter").collapse()//Add your code for this event here: 
}


export function boxProjector_mouseIn(event, $w) {
  $w("#boxProjector").expand();//Add your code for this event here: 
}

export function boxProjector_mouseOut(event, $w) {
  $w("#boxProjector").collapse();//Add your code for this event here: 
}

export function buttonProjector_mouseIn(event, $w) {
  $w("#boxProjector").expand();
 //Add your code for this event here: 
}


export function buttonInk_mouseIn(event, $w) {
  $w("#boxink").expand();
 //Add your code for this event here: 
}

export function boxink_mouseIn(event, $w) {
  $w("#boxink").expand();//Add your code for this event here: 
}

export function boxink_mouseOut(event, $w) {
  $w("#boxink").collapse(); //Add your code for this event here: 
}


export function buttonScanner_mouseIn(event, $w) {
  $w("#boxScanner").expand();
 //Add your code for this event here: 
}

export function boxScanner_mouseIn(event, $w) {
  $w("#boxScanner").expand();//Add your code for this event here: 
}

export function boxScanner_mouseOut(event, $w) {
  $w("#boxScanner").collapse();//Add your code for this event here: 
}


export function boxCrusher_mouseIn(event, $w) {
  $w("#boxCrusher").expand();//Add your code for this event here: 
}

export function boxCrusher_mouseOut(event, $w) {
  $w("#boxCrusher").collapse();//Add your code for this event here: 
}

export function buttonCrusher_mouseIn(event, $w) {
  $w("#boxCrusher").expand();
 //Add your code for this event here: 
}


it’s still Happens

No matter I found the problem. The problem was the shadow in the design of the button