Great video in that it got me started with building a mega menu, but incomplete. Here's what it missed and how to resolve some of the issues raised in the comments: 1. The mega menu stays there forever once hovered over. Solution: Add another function to the button called 'onMouseOut()'. The code you want to add to it is: export function productsButton_mouseOut(event) { $w("#megaMenu").hide(); } 2. This only puts the mega menu on one page. Solution: Select your container box (mega menu), and right click it. There's a radio switch in the options that appear called 'Show on all pages'. Make sure it's switched on. Then it and anything within it will show on all pages when you hover over your button. 3. Once you've set your onMouseIn and onMouseOut on your button, you'll have the additional problem of the mega menu disappearing as you move into it to select something, and you also HAVE to hover over the button again to collapse it. Solution: Add an 'onMouseIn' and 'onMouseOut' function to the Container box this time: export function megaMenu_mouseIn(event) { $w("#megaMenu").show(); } export function megaMenu_mouseOut(event) { $w("#megaMenu").hide(); }
@estefano551
3 жыл бұрын
I did the same, and the megamenu still there with mouseout, help!
@missdino1988
3 жыл бұрын
@@estefano551 When you're viewing your code for the 'OnMouseOut' for both the button and the container, are the 'OnMouseIn()' and 'OnmouseOut()' Event Handlers selected on the right hand side? (Under the 'Event Handlers' heading to the right of your code). One of the minor annoying things about Wix Dev is that you can have the Event Handling code there but it doesn't always work if it's not selected from the left under 'Event Handlers'. Even though you have the right element ID in there. It's weird. If you just select the event handler you want from that list, then add the bits you need to the handler it puts in for you, get rid of your own from there and save, it works.
@chingishanojhin2523
3 жыл бұрын
Thank you, it's working quite well. I can't figure out something tho. I want to make slide from the top animation for the box, here is the code: let slideOptions = { "duration": 150, "delay": 0, "direction": "top", }; export function button101_mouseIn(event,$w) { $w("#box101").show("slide", slideOptions); } export function button101_mouseOut(event,$w) { $w("#box101").hide("slide", slideOptions); } export function box101_mouseIn(event,$w) { $w("#box101").show("slide", slideOptions); } export function box101_mouseOut(event,$w) { $w("#box101").hide("slide", slideOptions); } But it's breaking on me, still disappears when trying to select smth and acting weird in general, mostly because of the duration that it takes it to close and open (also has problems with hovering over too fast). I probably can fix part of it by placing items further from each other, but maybe I can find a better solution for animating things. Thanks in advance.
@ayegbusiwealthworth6746
3 жыл бұрын
thanks for the tips but I realized that sub megamenu would only show when you're at the top of the pages and disappear whenever I scroll down. pls, how can I fix this?
@sleepshot9968
3 жыл бұрын
@@missdino1988 thanks for your answers i have a question when i come to on mega menu for click sth it disseappears again :( what can i do for solve it
@towedarray7217
4 жыл бұрын
This is such a incomplete "tutorial" that you should probably pull it down. Almost all of this is wrong or partially broken. Plus the megamenu stays up forever the way you did it. This is going to cause people more confusion than they had in the first place.
@MarianneRobinsonRE
3 жыл бұрын
Let's see. I'm gonna try it.
@mehulgupta3375
3 жыл бұрын
You are right can you explaain the solution to this problem
@birthdayggenietricks7595
3 жыл бұрын
@@mehulgupta3375 His code is incomplete. You have to add a second part that hides the mega menu. This is the full code that I used and it works: export function shopbutton_mouseIn(event) { $w('#megamenu').show(); } export function shopbutton_mouseOut(event) { $w('#megamenu').hide(); } export function megamenu_mouseIn(event) { $w('#megamenu').show(); } export function megamenu_mouseOut(event) { $w('#megamenu').hide(); }
@TheOzzy1905
3 жыл бұрын
@@birthdayggenietricks7595 thank you very, very much. I worked for a week and even wanted to quit. You're great. You've completed the missing code. Thank you so much.
@diandrajeri
3 жыл бұрын
@@birthdayggenietricks7595 hello! i used you code and worked amazing!! but how do i make my mega menu appears in all pages? the buttom appears as a master page (header) but the mega menu only appears in the home page (where i created it) how do i made my mega menu appears as a masterpage too or in all pages?
@PassionateForMusic95
4 жыл бұрын
For all those who are struggling to get this to work both in and out, this is the code I used: export function button_onmouseIn(event) { $w('#menu').show(); } export function button_onmouseOut(event) { $w('#menu').hide(); } export function menu_onmouseIn(event) { $w('#menu').show(); $w('#button').disable() } export function menu_onmouseOut(event) { $w('#menu').hide(); $w('#button').enable() } Make sure to replace 'menu' with the container box you've used for your drop down menu, and 'button' with the button name of where you're hovering over. This code is thanks to another youtube commentator Charles Delamarre but even though it worked I couldn't get the box to stay put while I hovered away from the initial button - to fix this, I went into the properties panel and deleted the 'onMouseIn' and 'onMouseOut' events and re-added them in but making sure to put the word 'on' before them as for some reason it doesn't automatically do that. Also, I made sure that the button's edge was overlapping my menu a bit, otherwise it would sometimes work and sometimes not. I'm not a coder myself but managed to get this to work so I do hope this has helped!
@mapduch3933
2 жыл бұрын
I cant seem to get the code to work. I triple checked the labels, and its still not working.
@PassionateForMusic95
2 жыл бұрын
@@mapduch3933 yes it’s a bit complicated. In my case, it’s realising that there is still something off or missing. I can have a look if you like. Certainly no expert but may be able to help.
@kevinclarke3485
11 ай бұрын
Thanks for the great tutorial, Mike! I love it when people can find simple, ingenious workarounds for computer problems... I'm definitely eager to try out your mega-menu strategy. I'll let you know how it turns out. Good luck with your 50K challenge 👍
@desiznknight9659
3 жыл бұрын
Hi, I am unable to find the properties window for button editing which you have shown in the right top corner, can you guide me, thanks in advance
@terrydouglasjayasuriya5162
2 жыл бұрын
Thanks - great video
@aljames7345
2 жыл бұрын
Genius at work.
@TheWixTrainingAcademy
2 жыл бұрын
I like this comment :)
@vipperr1marketing
4 жыл бұрын
Good morning, looks like I gotta add a mega-menu to my site. This is cool.
@TheWixTrainingAcademy
4 жыл бұрын
Fantastic! Thank you. I encourage it
@zestasik
3 жыл бұрын
hey there, does it work on mobile? cause I did that too and on mobile devices it is messed up. Thinking now how to resolve this issue
@mattyjameson9064
3 жыл бұрын
@@TheWixTrainingAcademy Can you please release a "good"tutorial.. I feel like this misses so many steps and your customers shouldnt have to spend hrs on something simple like this. Im saying simple because its absolutely not but it shouldnt be this difficult to link a event to a handler. smh TERRIBLE
@realshannic5168
2 жыл бұрын
How do you get the properties tool bar to show up?
@eitanshirman8436
2 жыл бұрын
did you figure it out? I can't find this functionality too
@eitanshirman8436
2 жыл бұрын
you need to activate "Wix velo" feature - extended toolkit, which will let you to do such things
@Mike-kj7ws
Жыл бұрын
how do I stop the container box from showing once I take off the cursor from the button?
@rene2509
3 жыл бұрын
When I scroll down on my page, the mega menu doesn't move down and stays on top of the page. Is there a way to go around it so the mega menu stays on the top with the frozen header?
@Charles-yq8vv
4 жыл бұрын
Would using this technique, or using Lightboxes to achieve a similar effect, have SEO ramifications? I'm not sure how Google views this type of menu as opposed to Wix's pre-built menus.
@mapduch3933
2 жыл бұрын
I cant seem to get the code to work. I triple checked the labels and its still not working. Has the syntax changed for 2022 version of Velo?
@rachelheck979
4 жыл бұрын
The back story is helpful for context. Thank you.
@TheWixTrainingAcademy
4 жыл бұрын
Glad you enjoyed that! Thanks for sharing :)
@leeannemccoy6653
4 жыл бұрын
Thank you so much for this video. I have been wanting to add a menu exactly like this to my site and now I know how!
@TheWixTrainingAcademy
4 жыл бұрын
Glad to help!
@austinfamilyadventures4916
3 жыл бұрын
Works mate and with that other persons adding with the out opinion is cool. Thanks heaps
@TheHeavyend81
4 жыл бұрын
Wow, this has opened up a new world for me in Wix. I always thought the plain default drop down menus were always so samey and ugly but this is brilliant. Can you tell me how it functions on mobile view.
@TheWixTrainingAcademy
4 жыл бұрын
So happy to hear that! Mobile view it will not work like that. Mobile view has a different default menu
@tharaabelson3732
3 жыл бұрын
Great tutorial! I have a few questions, after I hover over the button once the menu does not disapper but rather just stays there until i click on something, how do I make it go away after they stop hovering on theh dropdown menu? 2nd I want to box to scroll down with the page, right now it's only showing up where the block was placed, its also only showing up on the one page. Thanks for your help!
@jbautistasalesorientalvalu8558
2 жыл бұрын
did you find the way?
@flauntorganic6604
3 жыл бұрын
it's not working for me. after writing code in masterjs it's showing id is not present. after writing code in home it didn't show any errors but not working after the hovering the button.
@ellblower7545
4 жыл бұрын
Figured out how to code it..... finally. My drop down menu loads.... but only on the home screen. How can I get it to load on every page?
@thomasthompson92694
4 жыл бұрын
If you right click on the menu box you will see a setting that says "Show on All Pages", be sure to toggle that on.
@thegamingduo520
4 жыл бұрын
Please explain the code to me because he is copy pasting a code that doesnt appear for me
@Cooking101WithMrRobert
2 жыл бұрын
QUESTION: DO I NEED TO KNOW CODING JUST TO DO WHAT YOU ARE SHOWING IN THIS VIDEO?
@planetlenz
3 жыл бұрын
How tdoes this transfer over to the mobile menu?
@MrBlade-bd5qu
3 жыл бұрын
Hi how do you open the Properties of the Button?
@leftyo0
2 жыл бұрын
Wow great help...
@RheaRonaldTV
2 жыл бұрын
I wonder how it works on mobile, and does it look weird?
@masharyalenezi9662
4 жыл бұрын
Hello I'm trying to do what you are explaining in the video. but in my editor I cant find the " Properties " toolbar that u have on the video. I searched about it but couldn't find a solution. So do you know how can I find or add that properties toolbar. Thanks
@masharyalenezi9662
4 жыл бұрын
I think I got it. Its on DEV mode
@kanishkkumaraggarwal8899
2 жыл бұрын
This solution is so not working for me. When I try entring ID of my box any image after creating Mouse In event. It never shows my container box's ID. I have been trying this for 3 hrs now and followed everything to the point.
@BeracaSalomon
4 жыл бұрын
You save my life , great tutorial . Thank you , you are the best . ''hello from Argentina''
@TheWixTrainingAcademy
4 жыл бұрын
Glad to help!
@thisisadebrown
2 жыл бұрын
Thank you 😊
@doronforecylinder3757
4 жыл бұрын
i found the best way to work for this: on the buttom add onMousein.show+nMouseOut.hide then do the same command on the box collapse command dont necessary at all at this issue
@TheWixTrainingAcademy
4 жыл бұрын
Correct! Good find
@enriquefaz5480
4 жыл бұрын
can't you put the code how you Make it
@enquirynewworld9383
3 жыл бұрын
I feel that this video can be more comprehensive, like how to also make the megamenu vanish etc.
@charlieath
2 жыл бұрын
export function dropdownMenu_mouseOut(event) { $w("#dropdownMenu").hide(); }
@janewestbrook8364
3 жыл бұрын
Very helpful story...thank you.
@MyCrea
9 ай бұрын
hi, do you know why the sub menus are going up wards instead of down wards like in your videos ? Is it because the header have been move bigger and smaller in size ? or what is the reason for that ?
@MyCrea
9 ай бұрын
I have fix it now, I found it out my self. 😀
@joymiekell
4 жыл бұрын
I still can't get it to hover. I might be putting the code in wrong since I can barely see
@sherwoodscience2705
2 жыл бұрын
great tutorial. thank you!
@kevinwright282
4 жыл бұрын
Thanks MPS!
@TheWixTrainingAcademy
4 жыл бұрын
You're very welcome!!
@noodlesbread9612
2 жыл бұрын
Hi. Guys I moght be late on thia video but can one of you help me to find the properties Tool bar cause I can't find it
@badboy4rlife
4 жыл бұрын
export function button10_mouseIn(event) { $W("#megamenue").show(); } still says $w is not defined
@InspirationParadise
4 жыл бұрын
same
@pertoyscollectibles9062
4 жыл бұрын
same
@sparkybrown7276
4 жыл бұрын
I done everything I could. The container still sit there after click preview... The button does not even make the container hover when mouse move over the button. *frustrating*
@dravez
3 жыл бұрын
you have to choose "hidden" by default on the properties of the box.
@eileenmeara8096
4 жыл бұрын
How reactive is Wix training academy to these questions? A megamenu should have a complete line by line code supplied by Wix if clients are supposed to do it themselves and most of us have no experience with code . To try and piecemeal this information from all the user issues below is quite riduclous. I can't get the drop down menue to disappear on the site I'm working on, and I've tried to onMouse out as a workaround but doesn't work. A step-by-step full flow would be a good place for your team to start since there are many users asking these questions.
@mattyjameson9064
3 жыл бұрын
yes that would be great... for starters. WHY IS THIS THE ONLY VIDEO IN THE ENTIRE EXISTENCE OF THE INTERNET. Ive been trying to do this for 4 hours on that one piece of code that just does not respond??? so frustrated and I feel like that guy from mallrats that cant see the boat. why is everyone praising this very VERY vauge tutorial?
@Neslon75
4 жыл бұрын
Hey Great tutorial, but I have a question. In order for the button to link to the box, the box element have to be created in the header which will super impose the box on all pages when in editing mode. I have two mega menus and this gets in the way of editing all the other pages. Is there a way to hide the element whist editing? If I move the element so I can edit the content behind the element, it automatically attach to the page and I will have to resize it and move in into the header afterwards which is a pain.
@josephcamillus7447
3 жыл бұрын
Can you help me? I did megamenu but when i changed to another page, It disappears
@quickguitarleads1214
Жыл бұрын
@@josephcamillus7447 you have to attach it to the header, otherwise you're only adding it to the individual page.
@ModekaiPL
3 жыл бұрын
Thank you, this video really helped me to do the things I wanted
@julioruiz9950
3 жыл бұрын
Can u help me please?
@ajiles1983
3 жыл бұрын
Can I create separate mini mega menus for different buttons? When I try to create separate mini menus it gives me a hard time
@jamesscott6864
4 жыл бұрын
but im facing a challenge. " $w("#box1").show()" cant seem to recognize #box1 but the ID for that box is "box1". can anybody help me out here ? it also seem not to recognize it if i change the ID to another name
@alcinnovations
4 жыл бұрын
Don't paste the whole line of code and then edit the element name. Instead, just type $w and wait for the popups to come up. Then you should see the element name popup so you can select it.
@gerlindaherring4813
4 жыл бұрын
@@alcinnovations I am having a similar issue, my boxes aren't appearing in the popup with the other elements on my site.
@dravez
3 жыл бұрын
pbbly this is too old, but you have to add the options on the property menu (mouse over). It seems that it ads more code that the one that you see, so just changing the name of the boxes in between the "" doesnt work. I hope it helps
@naughtygamerofficial
4 жыл бұрын
Are you in dev mode? because I only see the properties panel in dev but it doesn't looks like yours... how can I make it look like yours and also on the left side where all the tools - pages, background, add etc.. there is also another toll bar that belongs to the dev mode which I don't want to see. I just want the properties panel like yours.
@divinedesigners
2 жыл бұрын
Hi. How did the thing in the rigth side popped up? The one with the properties?
@eitanshirman8436
2 жыл бұрын
did you figure it out? I can't find this functionality too
@eitanshirman8436
2 жыл бұрын
you need to activate "Wix velo" feature - extended toolkit, which will let you to do such things
@Youruturnwholisticcoach
4 жыл бұрын
I am excited to try it
@TheWixTrainingAcademy
4 жыл бұрын
Give it a go! Let me know how it goes
@FPVwest
3 жыл бұрын
Can you do this on Editor X
@peterjames2485
4 жыл бұрын
hi i use the .hide() function to disappear the menu box it is working but the box disappear when i hoverout the mouse from the menu button i am not able to click anything which is in the box. can you please tell me how can i not disappear the box when i move my mouse cursor from the menu button to the big menu box?
@AhmadNasriya
4 жыл бұрын
Use a .onMouseIn event on the box itself with the command .show, simple as this
@noobrandom
4 жыл бұрын
@@AhmadNasriya can you write an example sir?
@guilhermepabreu
4 жыл бұрын
Muito obrigado amigo!! Adorei seu canal e suas dicas!!
@gartenfeuer_ch
Жыл бұрын
Good day. Question: is it still possible with the current editor? I can't find the window for the button ID settings. (On your video at minute 7:59) Is this function still available for the buttons? thank you very much.
@keivs4727
4 жыл бұрын
It worked. But once it shows on hover it doesn’t disappear when the drop down is not on hover. How can I fix that?
@birthdayggenietricks7595
3 жыл бұрын
His code is incomplete. You have to add a second part that hides the mega menu. This is the full code that I used and it works: export function shopbutton_mouseIn(event) { $w('#megamenu').show(); } export function shopbutton_mouseOut(event) { $w('#megamenu').hide(); } export function megamenu_mouseIn(event) { $w('#megamenu').show(); } export function megamenu_mouseOut(event) { $w('#megamenu').hide(); }
@mattyjameson9064
3 жыл бұрын
@@birthdayggenietricks7595 that aint it. smh
@DajaPanda1
4 жыл бұрын
Okay. So I followed everything and it works but it’s always visible. If you hover over it once it won’t go away and blocks everything behind.
@Sabelomasondo1
4 жыл бұрын
Thanks for the video.
@arystaa8923
4 жыл бұрын
Hey, I followed the exact steps thrice already and getting the same error everytime. I basically want that when people hover over 'Shop By Category' button, they see a horizontal menu (which I created just the way you mentioned) and then by hovering over each item in that menu they should see a menu for that. I thought thats the problem so I tried building it just the way you mentioned and even named my menus the same. This is the error I get on the frontend: Error parsing web-module 'public/pages/masterPage.js': Unexpected token (7:15) while parsing file: public/pages/masterPage.js Regarding the backend, few things I noticed: - After I type the # symbol, it does not list my menu name (box name) in the list so I manually type it. - There is a red dot on the left and when I hover over that, it gives me 2 errors: (a) Parsing Error: Unexpected Token: (b) '#MegaMenu' is not a valid selector Please help me as I need this for my website asap. I wish I had thought about this earlier and tried it.
@KarloP750
4 жыл бұрын
The same problem here! Please let me now if you solve this problem cuz im trying for an hour now. Feeling like idiot!
@almavaleria1
4 жыл бұрын
@@KarloP750 If you right click the mega menu you will get a "Show on all pages" option, select it and that's it!
@jasondowell9470
4 жыл бұрын
Does anyone know how he even got to the "properties" page to select the "onMouseIn"? I cannot seem to find it.
@davidzaketa9558
4 жыл бұрын
When your on wix, just turn on dev mode and it will pop up
@minhkha4511
2 жыл бұрын
any way to make the menu align when the screen resolution is changed ?
@anandsingh-er4bx
3 жыл бұрын
After publishing does not work this why? its only shown in preview
@wajdicharguia6843
3 жыл бұрын
It works perfectly but only on that specif page! please any help
@ljdhrjd8574
Жыл бұрын
its says an element with the id does not exist ont his page im sure the id is right
@joymiekell
4 жыл бұрын
this is a great tutorial for me but one thing I'm stuck on is how do I get that properties tab bar thing on the screen? I would really appreciate it if you could tell me how to get that.
@swapnilthakur881
4 жыл бұрын
you can just click on dev mode .
@PromdiCEO
3 жыл бұрын
How will it affects the resizing of the browser smaller and in a phone
@simonmc2348
4 жыл бұрын
Why not use a strip and use the expand and collapse functions so then the menu will be a bit responsive? or am I missing something?
@vicn17
4 жыл бұрын
This worked for me, only problem is now that i have a drop down menu that covers half the screen, everything that is under the menu (even when its not active) is not clickable... anyway to solve this? I've tried using expand and collapse instead of show and hide, but then the menu pushes the content of the page down
@idilk9788
4 жыл бұрын
The drop down mega menu does not disappear. I tried adding .hide() and .collapse() for the megamenu but it does not seem to work. It is really frustrating. Can you help out?
@abdalrhmanalrawash9272
3 жыл бұрын
Hi guys just a tip ! , if you want to hide the "MEGA MENU" when you are not hovering on it just click on the button and add onMouseOut() Function and then add this function export function Classes_mouseOut(event) { $w('#MegaMenu').hide() } so it disappears when you not hovering on it
@teddybear100
4 жыл бұрын
✅ ... Awesome tutorial and I actually needed the info! 💯 😀⭐️
@TheWixTrainingAcademy
4 жыл бұрын
Glad to hear it!
@julioruiz9950
3 жыл бұрын
How can i make to hide de mega menu?
@kevinwright282
4 жыл бұрын
Hey MPS. Once I move the mouse off of the element (box menu), the box menu does not hide. The box menu behaves as a permanent element. So I tried to create an event to hide the menu. I selected event> onmouseout, which then created an export function for the box menu. My code, as per Corvid reference, is $w("#myElement").hide();.....It doesn't do anything. Can you please advise? Thank you.
@TheWixTrainingAcademy
4 жыл бұрын
Hey Kevin, this is correct! I did not display a hide element in this particular video. Essentially what needs to happen is you need to choose onMouseOut and select a .hide() function for the mega menu box.
@charlesdelamarre6166
4 жыл бұрын
export function button1_mouseIn(event) { $w('#box1').show(); } export function button1_mouseOut(event) { $w('#box1').hide(); } export function box1_mouseIn(event) { $w('#box1').show(); $w('#button1').disable() } export function box1_mouseOut(event) { $w('#box1').hide(); $w('#button1').enable() }
@creature9991
4 жыл бұрын
@@charlesdelamarre6166 thanks man, u figured it out for me :-D simple and working - now how to make it work for freezed menu so box1(big menu) shows up anywhere on the site
@charlesdelamarre6166
4 жыл бұрын
Charles@notosmedia.ca I did a full megamenu that is working pretty well. If you ever want some help
@creature9991
4 жыл бұрын
@@charlesdelamarre6166 i am definetly interested to see it, try it, Especialy for freezed menu that moves with visitor down and up the page
@pathwayjazz1043
4 жыл бұрын
What code should be added that when mouse is not on the mega menu and it should be hide? Thanks for sharing
@missdino1988
4 жыл бұрын
Add another function to the button called 'onMouseOut()'. The code you want to add to it is: export function productsButton_mouseOut(event) { $w("#megaMenu").hide(); }
@fl7103
4 жыл бұрын
Super this tutorial, but when we get to the lines of code, everything is so small on the screen that we no longer read and if we are not fully bilingual we end up being lost ... Please modify this video or to make a 2nd with a resumption in writing embedded in the video of the modifications to be made in the code to create a megamenu from a horizontal and vertical menu Thank you in advance
@pandareeen4553
2 жыл бұрын
Can u guys teach me how does the properties menu comes out? Where he unchecked the onmousein: onmouseout: t
@andyh964
3 жыл бұрын
weird, i followed step by step but my megamenu function doesnt seem to be popping up
@yeukayimachobani9378
4 жыл бұрын
Hey i built a nice Mega menu using Buttons and boxes in wix . How can i hide the boxeson wix editor
@dntmusicacademy8312
3 жыл бұрын
Can you please make a video to create a custom menu on mobile view?? a lot of our audience uses mobile to view website
@WeAndFootball
4 жыл бұрын
Hi I used your method and it worked perfectly, but only on homepage. the menu is in header and doesnt work on other pages so I had to remove the megamenu and stick with the regular text
@TheWixTrainingAcademy
4 жыл бұрын
Yes, this was a page basis. You can try and upload to the site code and not page code, that should work
@Rehmzzzzz
3 жыл бұрын
how do you keep the box open when you're trying to get to a submenu within the container/box? my container/box disappears when I'm off the hover button
@PreservingHumanity
3 жыл бұрын
New line of code after the last } put basically the same code except make it onMouseOut and .hide();
@kimmoe1803
4 жыл бұрын
Where should we enter this code? In the same code or should i make a new code? Maybe you can post the whole code here, please. I can't coding, but managed to create megaMenu on the first attempt at coding. But then don't understand where to enter the code to make the menu go away.
@milamalenova
4 жыл бұрын
Hi! Thanks for this tutorial. The box I have will only be visible on the current page where I've put it. Any tips on how to keep it visible anywhere on my site (as a part of the header maybe)? Or do I have to do this for every single page? Thanks!
@melinda05281
4 жыл бұрын
im trying to figure out as well - any luck?
@milamalenova
4 жыл бұрын
@@melinda05281 hi melinda. What I did was to pin the box to a specific place on the viewport and then right click and select "show on all pages" hope this works for you :)
@dresswithdominance6200
4 жыл бұрын
@@milamalenova Could you tell me what the view port actually is please?
@rakeshpatil2988
4 жыл бұрын
@@milamalenova Yes it worked thanks
@zacho1045
2 жыл бұрын
Hi , very nice video.. I just have one question. How can i make the menu (the hidden box) stay visible when i hover over the button or the menu itself , and otherwise make it fade away when the mouse is out of the button or the box??? I have tried the mouseOut function but unsucessfully. I want this button to work like a normal header -menu button Thank you in advance for your feedback
@austincotter8525
10 ай бұрын
I wish he touched on this in the video! Just add a mouseOut function to the submenu box rather than the button, and change the code to #w(#menuName).hide(); so it hides the box when you leave the menu!
@nbconest
3 жыл бұрын
cute menu but when you zoom in or out it will look aaaaaaah and it will only work in one page. unless if your want to pin it to all page but still when your zoom in or out it will look aaaaaaaaaaaaaaaaaaaah.
@kseungook
2 жыл бұрын
Hihi! Great tutorial and it works really great! But lets say I would like to to add a button that will "close" the megaMenu (for example an "X" in the corner). If I place the icon on the corner, what do I need to code in order to close the megaMenu? Help!
@youngdopeandsuccessful8533
2 жыл бұрын
Have you figured it out yet?
@changyang4606
4 жыл бұрын
If I put the mega Menu on the strip, and I overlapping some text in there. I can't touch anything behind the strip at all. Is there any idea Suggest for me ?
@KosaLaw
4 жыл бұрын
Maybe your items are arranged at the back? Choose the strip Tools -> Toolbar -> Arrange -> arrange it to the back then those overlapping items can come out again?
@CaptainSugarFree
4 жыл бұрын
This is cool and all and obviously and easy solution but what about hover men us? I’ve tried several times to make a menu that has sub sub menus (2 dropdowns) and having them hide when not being hovered on has proven incredibly difficult with the way Wix works.
@ellblower7545
4 жыл бұрын
How can I create a second drop down menu on another tab? I’ve made one, which opens a mega menu when you hover over the ‘services’ tab. I want to have another when you hover over the ‘shop’ tab. But whenever I create another box and put it below the menu, it attaches itself to the previous mega menu. How do I get around this pleeeease?!
@TheWixTrainingAcademy
4 жыл бұрын
The same process or use the same box
@apuzicha7493
3 жыл бұрын
How does this work on the mobile Version?
@daveflanagan2030
3 жыл бұрын
just subbed, i enjoyed the video, is there a way to import data to use on the mega menu...like for a product that uses multiple different brands and models with those brands thanks guys'
@johnwallace5284
3 жыл бұрын
do you know how to do in editor x?
@ashishkumarprusty6603
4 жыл бұрын
How to find Property tab?
@richtarr3340
3 жыл бұрын
*This worked for me to Hide Menu again after hover* However I have not found a fix yet for *Sticky Menu* the Megamenu only appears at the top of the page. **Button Code:** export function ourservicesButton_mouseIn(event) { $w("#megamenu").show(); } export function ourservicesButton_mouseOut(event) { $w("#megamenu").hide(); } **Menu Code** export function megamenu_mouseIn(event) { $w("#megamenu").show(); } export function megamenu_mouseOut(event) { $w("#megamenu").hide(); }
@Xfloren
4 жыл бұрын
Great! You show the Menu with 1 Box, but What Happen if I need to add 4 or 5 "Submenu Boxes" appearing on Mouse over of different Header Buttons? and How can I made them show in the same place? I would Appreciate a lot your help!
@cryforce
4 жыл бұрын
don't use this method it's overcomplicated and hard to put into the normal menu. 1. what you want to do is select your menu bar and then manage the menu like normal. 2. then select Add Item and chose the LightBox option 3. this will allow you to select a preset design as well instead of creating one from nothing but its still easy to do 4. in the lightbox just customized it how you wish by adding and removing elements this way has a lot more benefits like easy integration for mobile and screen sizes and having lightboxes means when another one is opened the old one closes allowing you to overlap them on the same spot like you wanted Tips: if you want to snap it to the top bar or any part of the screen using the layout option to move it around also if you want to remove the fade if your lightbox has it on the background just select outside the lightbox and use the option from there. Note: if you want to mouse over effects you must use a button as the menu does not support hover effects for individual menu options (you can use hidden spaces to do the same effect but this is a lot more complicated and requires corvid)
@erosempai
4 жыл бұрын
@@cryforce But you can't move the lightbox to display it where you want nor set a hover condition to show it, can you?
@cryforce
4 жыл бұрын
@@erosempai from what i can tell it has to snap to or space from the sides, corners or middle of the screen and hovers effects require corvid as that is not an option without using it sadly
@LS-ih3yf
4 жыл бұрын
Thanks for the tutorial, made it work but only on the page the mega menu is built on. what solutions do you have to have the custom menu work on every page?
@TheWixTrainingAcademy
4 жыл бұрын
You need to make sure it is in the site code, not page code for it to work on every page
@LS-ih3yf
4 жыл бұрын
@@TheWixTrainingAcademy thanks! lol is there anywhere I can learn all this xD don't know a whole lot about codes, do you have a video on it?
@denitsanikolaeva2814
4 жыл бұрын
@@TheWixTrainingAcademy When it is in the site code #megaMenu is not a valid sector in the function it does not recognise or find the megaMenu box, in the Page code everything`s fine. Why? How to fix it?
@clementjoshua5516
4 жыл бұрын
@@denitsanikolaeva2814 I am having the same problem here Did u managed to fix it?
@ismailbanura
4 жыл бұрын
Can you do that without coding
@williamthomas155
3 жыл бұрын
This is not working at all!! I’ve done it 50 times and my mega menu will not pop up
@JesusRLopez-sv4zq
3 жыл бұрын
How about when you get to the mobile view? That big menu stops working and it doesn't show at all. This is definitely not a professional way to solve an issue that has been solved by Wix awhile ago.
@TheWixTrainingAcademy
3 жыл бұрын
This video needs an update for mobile, yes. Thanks for your feedback.
@selina613028
4 жыл бұрын
Thanks for the video. It was really helpful!! One question though, does this work with sticky nav? When I scroll down, the mega menu doesn't seem to work anymore.
@TheWixTrainingAcademy
4 жыл бұрын
Thank you! I’d have to make another video for sticky nav
@dwayneedwards1907
4 жыл бұрын
@@TheWixTrainingAcademy Hey, please do or please let me know how to do this
@marapapar
4 жыл бұрын
Try pinning the drop-down menu's box to the desired area of the screen. Right-click on the element and then 'Pin to screen'. Hope it helps!
@haoseng4636
4 жыл бұрын
is it mobile friendly?
@sureshindika9215
4 жыл бұрын
how do you make the Megamenu fold back once you took off the mouse?
@katrinanamutulo3391
4 жыл бұрын
$w('#MegaMenu').hide();
@sureshindika9215
4 жыл бұрын
@@katrinanamutulo3391 thank man
@mtalsi1
4 жыл бұрын
doesn't work for me. no errors, just nothing.
@mishastyle4485
4 жыл бұрын
It's not working with me, maybe this code not work
Пікірлер: 423