Linking Hover Boxes to Create Menu

Ask the community
,
1

Hello.

I’m fairly new to Wix and very new to Corvid, but think it might help me in a specific situation. In general, though, I am trying to use as many native-Wix features as possible and avoiding the need to code in Corvid.

What I Want to Do
I want to create a horizontal, full-page width menu with 5 large, blocks/“buttons” that are as responsive as possible (change width according to page/screen width). I would like them to have hover states in order to indicate to the user that they are clickable and then I would like them to link to pages in my site when clicked.

This is a Member Menu, which is also included on the Site Menu as a sub-menu, but I wanted to repeat it here to serve as a shortcut bar to other areas. I want the menu items/“buttons” to be large and quick-and-easy to click on since this menu will be a high-traffic item and is meant to quickly help direct users where they want to go without much thought.

What I Have Tried

  • I first tried adding a Menu, but it appears that Wix only lets you have one menu (the Site Menu) on your site and the buttons/links I want to display are to pages not on my Site Menu.

  • Then, as would make the most sense, I tried using a Strip with Buttons within Columns but could not make the Buttons the size I wanted and also have them be responsive. If I could format the text on the button more (add a line break), then this would have worked, but the Buttons don’t allow you to do that. I realize I could just change the font size, but I feel like there is another way to make what I want happen without compromising on this.

  • Lastly, I also tried using Shapes (since you can link to pages with those) but these do not allow for hover states.

What I Have Currently Done
Currently I have a Strip with 5 columns and have added Hover Boxes to each column which allows me to have the size, shape, and hover effect I want. However, it does not have functionality for linking to a site page.

I have then enabled Corvid and added onClick event handlers to each of the hoverBoxes. I just need to know what code to add to the event in order to allow me to link to a page in my site.

Screenshot
Here is a screenshot showing the menu (the yellow blocks) and one of the Hover Boxes selected to show I’ve added the event handler. You can’t tell, but I have each Hover Box added to a Column within a Strip (to make it as responsive as possible).

2186×1197 407 KB

Corvid Code (just what Wix put in when I created the event handlers)

export function hoverBox1_click(event) {
 //Add your code for this event here: 
}

export function hoverBox2_click(event) {
 //Add your code for this event here: 
}

export function hoverBox3_click(event) {
 //Add your code for this event here: 
}

export function hoverBox4_click(event) {
 //Add your code for this event here: 
}

export function hoverBox5_click(event) {
 //Add your code for this event here: 
}

Can anyone help me close the loop on this or suggest another way of designing this menu to make it easier to manage? Again, I’m trying to keep the custom code to a minimum and utilize as much of the normal Wix functionality as possible.

Thank you!