Hi Everyone,
I am new to Corvid. I have a client who wants a simple double drop down menu. Are there any video or tutorials someone can direct me to? I would really appreciate any help I can get. Here is an example of what they are looking for.
You can do single sub menus without code and through your Wix Editor already.
https://support.wix.com/en/article/creating-a-subpage-drop-down-menu
As for multi column, then vote for the request here.
https://support.wix.com/en/article/request-multi-column-dropdown-menu
You can do something similar like in this Wix Mega Menu tutorial here.
https://www.wix.com/corvid/example/mega-menu
Or you can use lightboxes as in this youtube video here.
https://www.youtube.com/watch?v=jiiuugPM0FM
Otherwise, you will have to create your own menu for your website and have to have onMouseIn and onMouseOut event handlers that will show and hide or expand and collapse any additional submenu when the user moves the mouse over the first sub menu.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
https://www.wix.com/corvid/reference/$w.HiddenCollapsedMixin.html
Although note that onMouse will not work on mobile devices, so you will have to use onClick instead, through having the same design setup for both desktop and mobile versions using form factor.
https://www.wix.com/corvid/reference/$w.ClickableMixin.html
Or simply changing your menu design for mobile versions and have it only shown on mobile devices using form factor again.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
Thanks givemeawhisky, So I have been trying but I keep running into problems. I started with a blank template. I first created all the pages for the website (Blank of Course. The I created all of the repeaters menus menu 1, menu 2 and menu 3. Then I activated the Data part and Corvid.
So I went into the data area and put in just the titles for menu 1. I did not link to anything
Then I pressed Sync and look it in the live version and all of menu 1 says solutions
I am scared to further and mess it up even more. I thought this would be a lot easier. I really need some help. If any could tell me the steps I need to take in the right order I would be forever grateful.
Thanks
You don’t need to use repeaters and datasets for the menu bar.
The menu headings can just be separate text box elements all aligned in a horizontal row.
As for each dropdown menu, just do a container box that has the background green and then use seperate text boxes for each page of each menu that are left as blank background. Just make sure that you drag each text box element into the appropriate container box and make sure that it says ‘attach to box’ so that when you move the container box all the text box elements move along with it, in simple terms they are all grouped then.
You can name the text box elements id names the same as the actual heading name that you have used, that way the code will be much easier to work with.
You can name the container box id as solutionsmenu1 and marketmenu1 and so on, so that you can easily refer to what menu is and where it is supposed to align up to.
The actual menu headings are the only thing that you want to be shown on your page when you first load it, all the dropdown menus need to be set as hidden on load in the properties panel for each container box
Then you need to go through your headings one by one and starting with the solutions heading, make sure that you have the onMouseIn event selected in the properties panel for it.
An export function for it will appear in your code at the bottom of the page in the code tab.
You will need to make sure that the code is placed in your site tab so that it applies to your whole site, if you place it in the page tab then it will only apply to the page that it is on.
So if your code is being placed in the page tab, then complete it all there and then simply cut it from there and paste it into your site tab instead before you publish it.
In that onMouseIn function, you will need to then add code underneath that shows the first dropdown menu, so if you have called it something like solutionsmenu1 then you can simply put.
export function solutionheading_mouseIn(event) {
$w("#solutionsmenu1").show();
}
Then you can simply have the user click on the appropriate dropdown text box element making sure that it has an onClick event added to it’s properties panel and simply have the second dropdown menu appear next to it.
To move the user to the linked page you can either simply do it through the text box’s own link settings, which for yourself would probably be the easiest option. Or you can also do it through code using the onClick event too.
For the second dropdown menu to appear after the user has clicked on the chosen sub menu choice, simply add an onClick event to that text box and alter the code that is added to your page.
export function energyProjects_onClick(event) {
$w("#solutionsmenu2").show();
}
Or
export function energyProjects_onClick(event) {
wixLocation.to(`/your-energy-project-page-url-here`);
}
//Ignore the double url entry here as it is a known forum bug that sometimes duplicates code.
You also might want to do the opposite with the onMouseOut event handler too, so that when they move away from the menu or they go onto another menu heading that the existing dropdown menu is closed up again.
To do this simply add the onMouseOut event to the properties panel of the container box for the open dropdowns and add your code like this
export function solutionsmenu1_mouseOut(event) {
$w("#solutionsmenu1").hide();
}
If you do the MouseOut event handler on the actual heading itself like you did for the onMouseIn event, then the menu will disappear as soon as the user moves the mouse away from the main heading, which you don’t want and only want when the user moves away from the dropdown submenus.
You will need to do this for all your menus, it will take time to do it, however once you start doing it and get going, I promise you that it will become easier and easier the more that you do of it.
Here are references that you might want to have a look at.
Element - Velo API Reference - Wix.com
Element - Velo API Reference - Wix.com
HiddenMixin - Velo API Reference - Wix.com - for show and hide
HiddenCollapsedMixin - Velo API Reference - Wix.com - for expand and collapse
Velo: Reacting to User Actions Using Events | Help Center | Wix.com
Velo Tutorial: Adding Custom Interactivity with Events | Help Center | Wix.com
EffectOptions - Velo API Reference - Wix.com - if you want to add effects
Also, just to get you more involved, when you use mobile devices you can’t use the onMouse event handler and you will need to change your code to be onClick for everything.
Now you can easily get around this by simply having all your menus setup as onClick instead of a mixture of onMouse and onClick.
This will make it easier for you to use the menu on both desktop and mobile versions of your website without having to do anything additional to it.
However, if you are wanting to have the onMouse event handlers running on your desktop versions of your website and only have it as onClick on your mobile versions, then you will need to use Wix Window API and it’s Form Factor function.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-working-in-the-mobile-editor
It might seem all daunting at the start when reading all of this, however everybody had to start exactly the same way and everybody is still learning, so nobody knows completely everything!
The more you can manage to do yourself, even if it is just through trial and error, then the better you will get at doing it and the more confident doing things yourself you will hopefully become.
Just remember that this forum is always here for any code issues along the way.
Wow! thank you so much. This is a lot to take in but, I am going to get started right away. I will take it step by step. I was using the repeaters because that is how it is set up in the sample site here, https://support.wix.com/en/article/corvid-tutorial-creating-an-expanding-mega-menu . I realized I could not use the sample because the design was not what I wanted, nor were all the elements, so I decided to start with repeaters.
Again thank you, I have been procrastinating about learning Corvid. I will keep you posted.
Hey givemeawhisky, Ok i almost have it https://webseohelp1.wixsite.com/test1-mega-menu/hospitals but for some reason it is not doing quite what I want. So when you go to solutions which activates the first drop down everything is fine. However when i go down the solutions list as i get to professional service my 3rd menu comes out but does not go away when i go to building automation the same thing happens the rd menu comes out does not disappear. Same with access control.
Here is how it should look http://www.plugsmart.com/ . Can you tell me what I am doing wrong? It was going so good and I was so happy, and now, I am just frustrated.
Okay with those three submenu options in the first menu.
Professional Sevices (check spelling here as should be Services)
Building Automation
Security Access Control
You need to add the onMouseOut event handler to each of the separate text boxes for each heading so that the extra menu box for each of those choices is closed when the mouse is moved off the text box.
Also, if you are wanting the first dropdown menu to stay on screen when you move onto the second submenu, then simply add the show() function for that first dropdown box into the code for the second submenu so that it stays as shown on the page and does not close itself when you move the mouse away.
@givemeawhisky I hate to bother you again but things are not going well. I had everything working fine on the template i was working on but when i tried the same thing on my site it went haywire. Here is what is happening, https://laurenrydzewski3.wixsite.com/plugsmart2 first the solution drop down is not disappearing when when I move out. When i try to move onto the 3rd menu it disappears. I am not sure what I am doing wrong but it is not doing what it should like on www.plugsmart.com . I had it working perfectly why does it keep doing this to me?
Ok it looks i got the first drop down to go in and out but I still can not move onto the 3rd drop down. Every time I try to to move onto the third it disappears.
Can’t see anything on your link apart from a big white gap where the menu should be. Have you hidden them all from view until they are ready?
Plus, towards the bottom of the site where you have the strip that contains ‘GE Transportation’, it needs to be moved back to the left as it is too far over to the right.
Finally, the market ones looks to have been done perfectly, so it just seems to be your menu that is being an annoying ******.
It might be something to think about in the long run, what about changing the style of the menu itself to make it fit what you can do.
You can try changing the hidden container boxes to lightboxes and have them positioned so that they appear below the menu when the user hovers over.
https://www.youtube.com/watch?v=jiiuugPM0FM
https://www.youtube.com/watch?v=8mz8lREzumw - with this one if you look at around the 6min mark you can see that they too have added a hidden menu that appears when the user moves the mouse over the menu heading.
Or is there another design that you can do that gets rid of the two submenus and either makes them just into the one or have those menu options on the actual page itself at the top.
You can try something like this tutorial and have the second submenu collapsed within the first submenu. https://www.wix.com/corvid/example/collapse-elements
Or try another style of menu altogether. https://www.wix.com/corvid/example/mega-menu
Or try something like Nayeli (Code Queen) has done here with a double collapse with a youtube video to go with the tutorial.
https://codequeen.wixsite.com/double-collapse/double-collapse-code
https://www.youtube.com/watch?v=HmTkf5af0NE
If you have to stick with that sort of menu header then you will have to keep plowing along with it to see if it can be sorted.
Let me know when it is back on show again.
Lastly, could you see if you can break down that Solutions menu into different headings again so that you only have to show the one dropdown menu for each? Probably not an option, however never know unless you ask.
Here is the steps I took.
- i created my main menu(header)
- I created all 6 of my container boxes (I did not put any text buttons). I named them all Solutionsmenu1,solutionsmenu2,solutionsmenu3.
- Then I attached the headers to the first drop down with the $w mousin to solutionsmenu1, and so on
- Then I connected all the text buttons in Solutions1 to Solutions2,3,4 with $w .show();. I also did a mouse out in each text box connecting to Solutions1,2,3. I also did a mouseout, so that when i left option like professional services and scrolled down to building automation solution menu the solutions menu 2 would disappear.
https://www.facebook.com/charles.cawlishaw/videos/vb.1376907996/10221144388264114/?type=2&video_source=user_video_tab here is a little video to show what I mean.
I just need to make solutions drop down 1 disappear and I need to get solutions drop down 2,3, and 4 to to stay. As soon as I try to touch the 3 drop down menus the whole thing disappears. I could really use some help.