Make drawer menu in Dawn Theme show on hover instead of click

[TamsinNewbie]

Someone please help me before I pull my hair out. How do I make the drawer menu in the Dawn theme show on hover instead of click. My website address is https://www.thecountryhomecollection.co.uk/. Please let me know if there is any other informartion you need. Thanks so much in advance. 

[namphan · Accepted solution]

Hi @TamsinNewbie,

I changed it at the link

Please check and let me know

[namphan]

Hi @TamsinNewbie,

This will need a lot of changes, if you want I can help you check it with a collaborator invite.

Or you can switch to Mega menu and follow my previous instructions, it will work fine

[TamsinNewbie]

Hi Namphan,

Thanks for getting back to me and sorry for the late response (I couldn't face looking at Shopify yesterday after spending an entire day trying to work this out). My code is 3710, i'd really appreciate if you could have a look as I've tried so many methods I don't think I'll get it right.

[namphan]

Hi @TamsinNewbie,

I sent the request, when it gets access I will check it

[TamsinNewbie]

Thank you 🙂

[namphan · Accepted solution]

Hi @TamsinNewbie,

I changed it at the link

Please check and let me know

[TamsinNewbie]

Wow, that's exactly what I wanted. Thank you so much! 

Can I just be cheeky and ask one more thing. When I hover on the menu button, the main image seems to move? Is that possible to stop? 

[namphan]

Hi @TamsinNewbie,

Yes, if you want I can check and change it, it will take extra time to check for this

[namphan]

Hi @TamsinNewbie,

I changed it, please check and let me know

[namphan · Accepted solution]

Hi @TamsinNewbie,

Please go to Actions > Edit code > assets > global.js file, find 'HeaderDrawer' and change function HeaderDrawer:

class HeaderDrawer extends MenuDrawer {
  constructor() {
    super();

    this.querySelector('details').addEventListener('mouseover', this.onMouseOver.bind(this));
    this.querySelector('details').addEventListener('mouseleave', this.onMouseLeave.bind(this));

  }

  onMouseOver(event) {
    const summaryElement = event.currentTarget.querySelector('summary');
    const detailsElement = event.currentTarget;
    const isOpen = detailsElement.hasAttribute('open');
    if (isOpen) return;
    this.onSummaryClick(event, summaryElement);
  }

  onMouseLeave(event) {
    const summaryElement = event.currentTarget.querySelector('summary');
    const detailsElement = event.currentTarget;
    const isOpen = detailsElement.hasAttribute('open');
    if (!isOpen) return;
    this.onSummaryClick(event, summaryElement);
  }

  onSummaryClick(event, summaryElement) {
    const detailsElement = summaryElement.parentNode;
    const parentMenuElement = detailsElement.closest('.has-submenu');
    const isOpen = detailsElement.hasAttribute('open');
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

    function addTrapFocus() {
      trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector('button'));
      summaryElement.nextElementSibling.removeEventListener('transitionend', addTrapFocus);
    }

    if (detailsElement === this.mainDetailsToggle) {
      if (isOpen) event.preventDefault();
      isOpen ? this.closeMenuDrawer(event, summaryElement, detailsElement) : this.openMenuDrawer(summaryElement, detailsElement);

      if (window.matchMedia('(max-width: 990px)')) {
        document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
      }
    } else {
      setTimeout(() => {
        detailsElement.classList.add('menu-opening');
        summaryElement.setAttribute('aria-expanded', true);
        parentMenuElement && parentMenuElement.classList.add('submenu-open');
        !reducedMotion || reducedMotion.matches
          ? addTrapFocus()
          : summaryElement.nextElementSibling.addEventListener('transitionend', addTrapFocus);
      }, 100);
    }
  }

  openMenuDrawer(summaryElement, detailsElement) {
    detailsElement.setAttribute('open', true);
    this.header = this.header || document.querySelector('.section-header');
    this.borderOffset =
      this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
    document.documentElement.style.setProperty(
      '--header-bottom-position',
      `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
    );
    this.header.classList.add('menu-open');

    setTimeout(() => {
      this.mainDetailsToggle.classList.add('menu-opening');
    });

    summaryElement.setAttribute('aria-expanded', true);
    window.addEventListener('resize', this.onResize);
    trapFocus(this.mainDetailsToggle, summaryElement);
    document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
  }

  closeMenuDrawer(event, elementToFocus, detailsElement) {
    detailsElement.removeAttribute('open');
    if (!elementToFocus) return;
    super.closeMenuDrawer(event, elementToFocus);
    this.header.classList.remove('menu-open');
    window.removeEventListener('resize', this.onResize);
  }

  onResize = () => {
    this.header &&
      document.documentElement.style.setProperty(
        '--header-bottom-position',
        `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
      );
    document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
  };
}

If you have any questions, you can contact me directly.
Nice to meet you 😊

[TamsinNewbie]

Thank you

[namphan]

Hi @TamsinNewbie,

If you have any questions, you can contact me directly.
Nice to meet you 😊

[TamsinNewbie]

Thanks Namphan. Nice to meet you too.