Jump to content

Change the header dropdown menu to open on click instead of hover.

Recommended Posts

Site URL: https://dandelion-antelope-pwty.squarespace.com

I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover.

I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection?

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

12 hours ago, Hannah96 said:

Site URL: https://dandelion-antelope-pwty.squarespace.com

I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover.

I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection?

Your site is still private now. Kindly give it a protected password to check your issue together

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
On 12/2/2021 at 2:55 PM, Hannah96 said:

Site URL: https://dandelion-antelope-pwty.squarespace.com

I had an accessibility check run on this site and one of the main issues I'm working on for users who need screen readers is the navigation menu. Originally, I had a built-in dropdown menu on hover, but I was informed that screen readers stopped at the main item (which is just a folder, not an actual linked page) and wouldn't read the actual links to pages. One of their suggestions was either to A) make the drop-down open on click, which customer service told me is impossible or B) make a mega menu using custom code, which I have done, but it still only opens on hover.

I would prefer to use my original menus because I'm skeptical of the custom mega menu being accessible on a screen reader, is there a way to override the hover function with an html injection?

Hi there! Here is a snippet of CSS and JS that worked for me. Just copy & paste this into your website footer Code Injection via Settings > Advanced > Code Injection > Footer:

If anyone reading this is in need of a Mega Menu that is completely ADA compliant and Web-Accessible, I have one available for purchase on my website! (this is not an affiliate link, but I am the creator of the plugin)

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
  .header-nav-item.header-nav-item--folder:hover .header-nav-folder-content {
    opacity: 0;
    pointer-events: none !important;
  }
  .header-nav-folder-content {
    opacity: 0;
    pointer-events: none;
    transition: all .2s;
  }
  .header-nav-folder-content.showDropdown {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .header-nav-folder-content.showDropdown .header-nav-folder-item {
    pointer-events: auto;
  }
</style>

<script>
  $(document).ready(function() {
    $(".header-nav-item.header-nav-item--folder").on("click", function() {
      if ($(this).find(".header-nav-folder-content").hasClass("showDropdown")) {
        $(this).find(".header-nav-folder-content").removeClass("showDropdown");
      } else {
        $(".header-nav-item.header-nav-item--folder .header-nav-folder-content").removeClass("showDropdown");
        $(this).find(".header-nav-folder-content").addClass("showDropdown");
      }
    });

    $("body").click(function(e) {
      if ($(".header-nav-folder-content.showDropdown").length > 0 && e.target.closest(".header-nav-item--folder") == undefined && !Array.from(e.target.classList).includes("header-nav-folder-content") && e.target.closest(".header-nav-folder-content") == undefined) {
        $(this).find(".header-nav-folder-content").removeClass("showDropdown");
      }
    });
  });
</script>
Edited by Caroline_Smith
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.