Hover Dropdown Menu - Craft Theme Shopify OS 2.0

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 39

  • @WillMisback
    @WillMisback  2 роки тому +2

    My Latest Shopify Tips & Tricks: wmiz.github.io/mastering-shopify
    CODE SNIPPETS:
    let items = document
    .querySelector(".header__inline-menu")
    .querySelectorAll("details");
    items.forEach((item) => {
    item.addEventListener("mouseover", () => {
    item.setAttribute("open", true);
    item.querySelector("summary").setAttribute("aria-expanded", "true");
    item.addEventListener("mouseout", () => {
    item.removeAttribute("open");
    item.querySelector("summary").setAttribute("aria-expanded", "false");
    });
    });
    });
    {% if section.settings.hover %}
    {% endif section.settings.hover %}
    { "type": "checkbox",
    "id": "hover",
    "label":"t:sections.header.settings.hover.label" },
    "hover": {
    "label": "Enable hover on menu items"
    }
    {% if section.settings.hover %}

  • @PeterEmmanuel-vf8wd
    @PeterEmmanuel-vf8wd Рік тому +1

    it totally worked, saved me lots of stress. Following your video made me feel more a comfortable with Shopify and also made me feel like a coder. Thank you Ms Will

  • @WillMisback
    @WillMisback  2 роки тому +3

    Let me know if you need help or have suggestions for features I can code for my next video!

    • @davidvogl4533
      @davidvogl4533 2 роки тому

      Maybe u can show us a terms of service agreement checkbox in the dawn theme. i know there are a lot of apps for it, but they want access to a lot of informations and make the cart very slow.

  • @yari_ua
    @yari_ua Рік тому

    Thanks for the video, really helpful! Is there a fix for the issue you are talking on 10:22?

  • @msoni395
    @msoni395 Рік тому +1

    Thank you It was really great help hopefully you keep sharing your help to us

  • @kezevel3161
    @kezevel3161 2 роки тому +1

    Whoa! Really helpful. My site is based on craft and I found this video.. Damn!!

  • @davidvogl4533
    @davidvogl4533 2 роки тому +2

    Thank you. Worked like a charm.

    • @WillMisback
      @WillMisback  2 роки тому

      Glad to hear it, David. Thanks for letting me know!

  • @lumosyang
    @lumosyang Рік тому +1

    YOU ARE GODLIKE Will, THANK YOU! All six pieces of code worked for me. I'm not a programmer and only know sql & some python, no json or liquid at all but your tutorial worked perfectly. All the testings before changing the code are really good. Thanks again!

  • @icy4640
    @icy4640 Рік тому

    I have been trying to apply this to the mega menu with no luck :(. The code works but i can never select a subitem because the mega menu open below the header where the mouse is no longer hovering the right div

  • @c0okiiedu22
    @c0okiiedu22 2 роки тому +1

    Thank you !! I was wondering if you could show us how to add a Breadcrumbs for Dawn Theme please, you’ll help me a lot. Have a good day

    • @WillMisback
      @WillMisback  2 роки тому +1

      Great suggestion for a video Emma. I will look into doing this!

    • @c0okiiedu22
      @c0okiiedu22 2 роки тому +1

      @@WillMisback great thank you :)

  • @galeanomarc
    @galeanomarc Рік тому

    Hi thnaks for the video it really help. but when i move the mouse the dropdown items disappear and i can nit click any option. can you please provide the solution for that, thanks

  • @amelialewis2280
    @amelialewis2280 Рік тому

    I do not have "Schema" in my Craft code

  • @stephenermgodts5583
    @stephenermgodts5583 2 роки тому +2

    Thank you. I am using the Mega Menu and it puts a space between the list element and the submenu so when i mouseover the list element it expands perfectly, however when I try to mouse to the dropdown, it picks up the mouseout event and closes the submenu before I can navigate to it. It works sometimes if I am quick enough with the mouse. Thoughts? Is there a way to add a delay?

  • @derekjohnson980
    @derekjohnson980 2 роки тому

    I am not a coder but this worked well. Eyes started to glaze over at the end when you were talking about test etc. Are snipets 5 and 6 really needed. Changes I made seem to work fine without?

  • @samuelclamote515
    @samuelclamote515 Рік тому

    Hi, thanks so much for your video! It works for me, but when I move the mouse over a sub menu item, the menu become sticky and I can scroll with the mouse still over an item. Any idea? Great video btw ;)

  • @bentera4844
    @bentera4844 2 роки тому +1

    Thank you sooo much! That was very helpful :D But my dropdown menu is slightly lagging. Whenever I move the mouse over a sub menu item, a kind of animation appears, as if the drop-down menu was reloaded for each item. Could you please help me with this? :/

    • @johnmorley1622
      @johnmorley1622 2 роки тому +1

      In the first code snippet, change "mouseover" to "mouseenter" and then change "mouseout" to "mouseleave". That will fix it.

    • @bentera4844
      @bentera4844 2 роки тому

      @@johnmorley1622 Thank you so much, it worked :D

  • @Astendor
    @Astendor 2 роки тому +1

    I have been looking for this so long! Thank you SO much! Check your E-Mail.

  • @vlaj1985
    @vlaj1985 2 роки тому

    When I go to add the function that allows you to click on the titles it adds 2. As in stead of it saying "Posters" it says "PostersPosters"

  • @BabyEdenClothingNZ
    @BabyEdenClothingNZ 2 роки тому

    Thank you so much! My first time 'coding'. The hover is working BUT it closes out when I move the mouse away from the top line. I'm going to try one of the suggestions in the comments below about setting the header padding to zero - is this the right thing to do?

    • @BabyEdenClothingNZ
      @BabyEdenClothingNZ 2 роки тому +1

      In answer to my own question - it worked! See IMMERENCE comment below for the fix.

    • @galeanomarc
      @galeanomarc Рік тому

      hi, how to fix it i cant find the solution@@BabyEdenClothingNZ

  • @atyourwittsend
    @atyourwittsend 2 роки тому

    Where is the pin for the snippet?

    • @derekjohnson980
      @derekjohnson980 2 роки тому +1

      you have to click on "READ MORE" and it expands and shows his snippets

  • @jonathanflycht3048
    @jonathanflycht3048 Рік тому

    Ive spent 30 min, tryna make this hoverstuff... after 30 min of watching, you tell me, i basically cant have categories, because then it wont work- so i did it all backwards, and am so happy that im not stuck with this hover shit...
    Ill just let you know... the way you explain, is like explaining ''Hey, this is a car, let me tell you about whats in the oil'' - BRO, if anyone knew about coding from more than googling, you wouldnt have to explain- its such a deadtalk -.-..
    The idea was great, but i wasted my time with this- You make it way more confusing, than it has to be.

    • @PeterEmmanuel-vf8wd
      @PeterEmmanuel-vf8wd Рік тому

      Working with this video on my store is my first experience of coding, I can say the tuber did a good job in his explanation.. maybe it appeals to my style of receiving information