Wix Tutorial - Button to Open a Strip, using Wix Code
When a user clicks on a button, a box expands. When the user moves the mouse outside of the box, then the box collapses. This can be useful when coding a mega menu. The same can be done with strips.
Elements:
-
Blue Button: #button1
-
Orange Button: #button2
-
Blue Box: #menubox1 | Collapsed on load
-
Orange Box: #menubox2 | Collapsed on load
Wix Code:
export function button1_click(event) {
$w("#menubox1").expand();
$w("#menubox2").collapse();
}
export function button2_click(event) {
$w("#menubox2").expand();
$w("#menubox1").collapse();
}
export function menubox1_mouseOut(event) {
$w("#menubox1").collapse();
}
export function menubox2_mouseOut(event) {
$w("#menubox2").collapse();
}
![menus](https://static.wixstatic.com/media/5cf02b_bdfd9184df2d404b943f4b84d50b73ec~mv2.jpg/v1/fill/w_600,h_246,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/menus.jpg)
Demo:
Click on the buttons below to expand the boxes that are currently collapsed.
![Menu Box Collapse and Expand](https://static.wixstatic.com/media/5cf02b_56dcc5a8bb14491e8f405a48b663379d~mv2.jpg/v1/fill/w_91,h_81,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Menu%20Box%20Collapse%20and%20Expand.jpg)