How to create Mega Menu with Multiple Tabs on Editor X | Editor X

Поделиться
HTML-код
  • Опубликовано: 4 окт 2024

Комментарии • 55

  • @inspiringbob
    @inspiringbob 3 года назад

    Your code works like a marvel and I managed to follow your tutorial with 0 experience in coding. 👏👏👏

    • @Studio-Il
      @Studio-Il  3 года назад

      I'm so glad to hear that!

  • @kHerring1973
    @kHerring1973 2 года назад

    Thank you so much for giving your time and making this video! Really appreciated!

  • @inspiringbob
    @inspiringbob 3 года назад

    Thank you so much for this tutorial! There was an unexpected character error and I just removed those empty lines and it works fine. I cannot thank you enough, you are brilliant!

    • @Studio-Il
      @Studio-Il  3 года назад

      Hi, thanks so much for the feedback!
      Can you explain to me where you found the problem (or in what line) so I can fix it?

    • @inspiringbob
      @inspiringbob 3 года назад

      ​@@Studio-Il Maybe when the code is copied from your site, it creates a problem. There is no error in your code, just the blank space seems to show a character error, and technically there is nothing there.

    • @inspiringbob
      @inspiringbob 3 года назад

      @@Studio-Il Did you notice in velo code tutorials, Wix provides a special box from which you can copy the code. I guess there is a point to doing that, because when you directly put it on a page, I guess something of the page layout gets copied with the code and disrupts it from properly functioning.

    • @Studio-Il
      @Studio-Il  3 года назад

      @@inspiringbob Thanks so much for the tip. I'll see if I can embed it on my sites. Thank you so much bro!

  • @marting7224
    @marting7224 3 года назад +1

    I so much wanted to understand this but unfortunately my head exploded at around 18.00 with the code explanation. That said, a great video from a clever chap. Thanks

    • @Studio-Il
      @Studio-Il  3 года назад

      I created a page that shows the code I used and my Layers panel:
      iloveditorx.editorx.io/nike-mega-menu/how-to
      If that does not help. I'll be happy to answer any question.
      Thanks so much for the feedback, appreciate it!

    • @marting7224
      @marting7224 3 года назад

      @@Studio-Il Thanks a lot. I just used your code for the FAQs actually and it works great, much better than the app version. Will now try to give the Tabs a go. Wish me luck and thank you so much. It really helps out people like me.

    • @Studio-Il
      @Studio-Il  3 года назад

      @@marting7224 It's really good to hear that it helps you! Good luck 🙏🏾

  • @raerickson3470
    @raerickson3470 3 года назад

    Nice video - thank you!

  • @itisfabio
    @itisfabio 2 года назад

    Thank you

  • @SkylynxGaming
    @SkylynxGaming 2 года назад

    When you scroll between each section, Man, Women etc. What is making say, the man menu close?

  • @AAAAAAAAAAAAAAA35789
    @AAAAAAAAAAAAAAA35789 2 года назад

    Amazing! Nike background gets blurry when we open the menu, is there any way we can do that with Wix? Thanks!

  • @iphonebuyback
    @iphonebuyback 2 года назад

    great tutorial! having some difficulty with it and i feel like its a minor tweak needed. just e-mailed you whenever you have a chance to look over the code / site. thanks!

    • @Studio-Il
      @Studio-Il  2 года назад

      I suggest you to try my other Mega menu tutorial which is much easier to build:
      ruclips.net/video/jxiTE6vKbxw/видео.html

    • @iphonebuyback
      @iphonebuyback 2 года назад

      @@Studio-Il i saw that and it was great, just was hoping to achieve the hover feature over the megamenu.

    • @Studio-Il
      @Studio-Il  2 года назад +1

      @@iphonebuyback No problem. so all you need to do is to change the onClick function to onMouseIn

    • @iphonebuyback
      @iphonebuyback 2 года назад

      @@Studio-Il oh nice! will rewatch and build now. thanks!

  • @tiltanhermolin886
    @tiltanhermolin886 2 года назад

    Hey thanks for the video! I already created a filter by tags for my content and trying to make it a hidden up/sidebar section (like a lightbox menu), do you know maybe how to do this?

  • @penn-lane
    @penn-lane 2 года назад

    This was very helpful, thank you. But how do I put this in a responsive view with a hamburger menu?

    • @inspiringbob
      @inspiringbob 2 года назад

      I added the hamburger menu and selected “don’t show” for the megamenu.

  • @inspiringbob
    @inspiringbob 2 года назад

    For ipad use, how can I collapse the menu when somewhere else on the page is clicked?

    • @Studio-Il
      @Studio-Il  2 года назад

      onMouseOut on touch screen translated as finger tap so it should work anyway

  • @shariqghori
    @shariqghori 2 года назад

    Is this responsive to mobile users ?

  • @lewissutton8227
    @lewissutton8227 3 года назад

    Great video! Very informative and easy to follow...
    however, saying that neither the expansion of the menu nor the underline of the tabs work after following the code perfectly and having the elements Id as they should? Would it be possible for you to help?
    Thank you!

    • @Studio-Il
      @Studio-Il  3 года назад

      Hi, thanks for the feedback!
      Happily, email me at iloveditorx@gmail.com

    • @lewissutton8227
      @lewissutton8227 3 года назад

      @@Studio-Il Thank you! I emailed you earlier :)

  • @estheragyare-boateng5493
    @estheragyare-boateng5493 3 года назад

    Great video! 😊
    Can this be re-adjusted for a mobile version?

    • @Studio-Il
      @Studio-Il  3 года назад +1

      Hey, thank you!!
      Yes you can.
      But I would go for the simple and use the Editor X hamburger menu and use the dropdown option to display all the internal links - it's simpler than rearranging this whole menu on mobile.

    • @estheragyare-boateng5493
      @estheragyare-boateng5493 3 года назад

      @@Studio-Il Thanks for the reply!

  • @manchesterunited8693
    @manchesterunited8693 2 года назад

    Can this be implemented the same way on regular wix editor? Do you have a tutorial for that?

    • @Studio-Il
      @Studio-Il  2 года назад

      You can not create the same thing according to my video because there is no option to set a grid. But I'm sure there are other solutions

  • @avatinio
    @avatinio 2 года назад

    Hello Sir! Thank you for your amazing tutorials
    If you have time I have a question. When I set my megamenu to pinned and overleap next section. It overleaps the full site and the site is not clickable anymore. Is there a way to overcome that issue?

    • @Studio-Il
      @Studio-Il  2 года назад

      Thank you!
      You need to make sure the "dropdownMenuWrapper" container is set to be hide by default (from the code panel).
      Also you need to set the Header height in pixels (for example: 100px)

  • @moeezminhas
    @moeezminhas 3 года назад

    sir after creating this how would we manage our menu on mobile?

    • @Studio-Il
      @Studio-Il  3 года назад

      I would hide the mega menu and use the hamburger menu instead

  • @christianluong4789
    @christianluong4789 3 года назад

    Hello, I tried the code but it works only for the first two buttons and boxes. It returned an error TypeError: $w(...).onMouseOut is not a function and $w(...).expand is not a function when I clicked the other buttons. Can you help please?

    • @carlosanaya7173
      @carlosanaya7173 2 года назад

      i ge the same error messages. i cant figure it out. did you get it to work?

  • @lynseymoseman8462
    @lynseymoseman8462 3 года назад

    Hey there! My menu is not showing on hover. Noticeable differences between how my code looks and your: Functions "initMegaMenu" and "openRelevantPanel" go red for me rather than purple as shown. I have also opted not to have the active underline but that shouldn't affect anything else from behaving correctly...?

    • @Studio-Il
      @Studio-Il  3 года назад

      Hey, can you send me screenshot of the menu layers panel, your code and link to the live site to iloveditorx@gmail.com?

    • @EugeneZhangYtube
      @EugeneZhangYtube 3 года назад

      @@Studio-Il I have the same problem, I'm sending you an email now

    • @thetoddfather9973
      @thetoddfather9973 3 года назад

      @@EugeneZhangYtube did you ever figure it out?

    • @ANEWCreationLimited
      @ANEWCreationLimited 2 года назад

      I'm having this issue, too. Can the successful fix be shared we can learn from you? Thanks in advance!

  • @justinmerz4725
    @justinmerz4725 2 года назад

    How to make Blur effects to the rest of the site when the Menu is open

    • @Studio-Il
      @Studio-Il  2 года назад

      Put the code in the master page code

  • @InsanitySkateboard
    @InsanitySkateboard 3 года назад

    Hi there, thanks for this ! I'm rebuilding my menu/site based on this... would it be possible to corrisponde by email ? got couple of things that don't really work, cheers man

  • @Gglowz
    @Gglowz 2 года назад

    Will this work on Mobile ?

    • @Studio-Il
      @Studio-Il  2 года назад +1

      I didn't use this on mobile. I was hiding this mega menu main container and use the editorial mobile menu(hamburger menu(