I was able to get the code to work but the dropdown menus animated all differently despite the effect is all the same in the code.
They feel pretty sticky and not smooth either.
If you hover on from Light to Heat with Light buttons the animation changes to a grow effect or a slide in from the left instead of sliding down.
Here is the link to the site in progress.
Any suggestions? Appreciate your feedback. Thank you.
$w.onReady(function () {
$w("#heatBttn").onMouseIn((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "top",
"distance": 50,
};
$item("#heatersBox").expand(), $item("#heatersBox").show("slide", slideOptions);
$item("#lightsBox").collapse(), $item("#lightsBox").hide("slide", slideOptions);
$item("#hwlBox").collapse(), $item("#hwlBox").hide("slide", slideOptions);
});
$w("#heatersBox").onMouseOut((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "top",
"distance": 50,
};
$item("#heatersBox").collapse(), $item("#heatersBox").hide("slide", slideOptions);
});
})
$w.onReady(function () {
$w("#lightBttn").onMouseIn((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "top",
"distance": 50,
};
$item("#lightsBox").expand(), $item("#lightsBox").show("slide", slideOptions);
$item("#heatersBox").collapse(), $item("#heatersBox").hide("slide", slideOptions);
$item("#hwlBox").collapse(), $item("#hwlBox").hide("slide", slideOptions);
});
$w("#lightsBox").onMouseOut((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "bottom",
"distance": 50,
};
$item("#lightsBox").collapse(), $item("#lightsBox").hide("slide", slideOptions);
});
})
$w.onReady(function () {
$w("#lightBttn").onMouseIn((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "top",
"distance": 50,
};
$item("#lightsBox").expand(), $item("#lightsBox").show("slide", slideOptions);
$item("#heatersBox").collapse(), $item("#heatersBox").hide("slide", slideOptions);
$item("#hwlBox").collapse(), $item("#hwlBox").show("slide", slideOptions);
});
$w("#lightsBox").onMouseOut((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "bottom",
"distance": 50,
};
$item("#lightsBox").collapse(), $item("#lightsBox").hide("slide", slideOptions);
});
})
$w.onReady(function () {
$w("#hwlBttn").onMouseIn((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "top",
"distance": 50,
};
$item("#hwlBox").expand(), $item("#hwlBox").show("slide", slideOptions);
$item("#heatersBox").collapse(), $item("#heatersBox").hide("slide", slideOptions);
$item("#lightsBox").collapse(), $item("#lightsBox").hide("slide", slideOptions);
});
$w("#hwlBox").onMouseOut((event) => {
let $item = $w.at(event.context);
let slideOptions = {
"duration": 2000,
"delay": 0,
"direction": "bottom",
"distance": 50,
};
$item("#hwlBox").collapse(), $item("#hwlBox").hide("slide", slideOptions);
});
})
