How can I make a mega-menu in Shopify open and close with a click instead of hover?

Looking for some help with editing my Shopify theme. I want to change the mega-menu functionality from hover to click. I've been teaching myself HTML, CSS, and delving into javascript/JQuery recently. It's all still new to me, but I'm eager to learn. Hopefully, this will be an easy fix! 🤞

I managed to partially achieve what I wanted by modifying the javascript code to use 'click' instead of 'mouseenter'. This allowed me to open the menu on click, but I struggled to close it in the same way. I have a feeling the .toggle() method might come in handy here, but I'm not sure where to begin. Any guidance would be greatly appreciated!

Here is a snippet of the HTML:

   <div id="main-nav">
    <div class="navigation navigation--main" role="navigation" aria-label="Primary navigation">
      <div class="navigation__tier-1-container">
        <ul class="navigation__tier-1">
         
<li class="navigation__item navigation__item--with-children">
              <a href="#" class="navigation__link" aria-haspopup="true" aria-expanded="false" aria-controls="NavigationTier2-1">Browse</a>
      
                <a class="navigation__children-toggle" href="#"></a>
              
<div id="NavigationTier2-1" class="navigation__tier-2-container navigation__child-tier">
                  <ul class="navigation__tier-2 navigation__columns navigation__columns--count-2">
                    
                    <li class="navigation__item navigation__column">
                      <a href="/collections/new-arrivals" class="navigation__link">New Arrivals</a>

CSS style rules applied:

.navigation {
  /* Styles go here */
}

/* Additional CSS styles */

.navigation ul,
.navigation li {
  /* More specific styles */
}

And here is a portion of the Javascript used:

// JavaScript logic here

theme.Navigation = {
    // Functions defined here
};

If you could offer any assistance, it would be greatly appreciated!

javascripthtmlcssshopifymegamenu

Answer â„–1

To toggle the opening and closing of the dropdown, you can use the following approach:

    $(this).parent().toggleClass('open');
});

Additionally, to close the dropdown when clicking outside of it, implement the following logic:

$('body').on('click', function (e) {
    if (!$('li.navigation__item').is(e.target) 
        && $('li.navigation__item').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.navigation__item').removeClass('open');
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to Resolving Nodemailer Error with Code 4078 for Sendgrid

In my email class, I have the following code: const pug = require('pug') const nodemailer = require('nodemailer'); const htmlToText = require('html-to-text'); module.exports = class Email{ constructor(user, url) { th ...

javascriptnode.jssendgridnodemailermailtrap

Choose particular content enclosed by two strings (across multiple lines)

Looking to use regex to extract specific text between two strings. For example: foo I have four toys bar //single line foo //multiline I have four toys bar foo I have three pets bar foo I have three pets bar How can I extract the text between & ...

javascriptregexregex-lookaroundsregex-greedy

select an option from the dropdown modal

Having some trouble creating a modal from a drop-down menu item in Bootstrap beta 4.0. It's not working as expected, even though the same format is used for other modals on the page that are functioning properly. <li class="nav-item dropdown"> ...

htmltwitter-bootstrapbootstrap-4

How to declare a variable using new String() and s = '' in Typescript/Javascript

What is the correct way to declare an array of characters or a string in JavaScript? Is there a distinction between an array of characters and a string? let operators = new String(); or let operators = ''; ...

javascripttypescript

Exploring the capabilities of the useHistory function within ReactJS

I'm currently experiencing an issue with my code when attempting to redirect to the main Dashboard.js page. This file serves as the UI for a signup and login feature I am developing. Here is a snippet of the problematic code. Signup.js import { Form, ...

javascriptnode.jsreactjs

Ways to expand a navbar background without compromising the central alignment of its elements

I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centerin ...

htmlcss

When using the GET method to load a PHP file via AJAX, the page may not display certain jQuery plugins even after the file

Hello, I am a beginner learning AJAX and JQuery. Maybe this is a silly question, but please bear with me. I am trying to dynamically show data without refreshing the page using AJAX. I have a function loaded in the body tag which handles this. Everything ...

javascriptphpjqueryhtmlajax

When utilizing multer for handling multipart data, hasOwnProperty appears to become undefined

Below is the code snippet I am currently working with: var express = require('express'); var mongoose = require('mongoose'); var bodyParser = require('body-parser'); var multer = require('multer'); var user = requir ...

javascriptnode.jsexpressmulter

Achieving the equivalent of php crypt() in NODE.JS

Can anyone assist with converting PHP to JavaScript (Node.js)? $key = crypt($key, $salt); I am currently in the process of rewriting a PHP script using Node.js, and I have encountered an issue with generating hash signatures similar to the ones created b ...

phpjavascriptnode.jsencryptiondes

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

javascriptcssreactjs

How to disable the ripple effect of a parent button in Material UI when clicking on a nested child button?

Attempting to nest one button within another (IconButton inside ListItem with the button prop) is proving challenging. The issue lies in the fact that the ripple animation of the ListItem is triggered even when clicking on the IconButton. Ideally, I would ...

javascriptreactjsmaterial-ui

Is it time to go back to the parent selector using the ampersand symbol?

I recently started using Less for writing CSS, and it has definitely been a time-saver for me. However, I have encountered a small issue with my code: <a href="#" class="btn-black-bg btn-right-skew">largest fight gym in Australia</a> Less .b ...

htmlcssless

Issue with automatic completion for classes and IDs in Visual Studio Code

Auto completion does not seem to work when I attempt to use a previously written class or ID in my HTML file. It doesn't function in the same HTML file, CSS file, or JS file. While ctrl + space works for some classes within the same HTML file, it is n ...

javascripthtmlcssclassautocomplete

Does ng-bind have the ability to function with input elements too?

My mind was spinning as I tried to figure out why my <input ng-bind="x.a * x.b" tabindex="-1" readonly/> expression wasn't functioning. The use of ng-model was not an option due to the fact that the product is not an L-value, so I made the swi ...

htmlangularjsreadonly

Expanding all cards in a Bootstrap collapse when one is clicked

Hello, I am currently working on integrating bootstrap collapse into a section of my django application. Here is the code snippet that I have implemented so far: {% extends 'base.html' %} {% block content %} <div class="container"> & ...

htmlcssdjangobootstrap-4jinja2

PHP code for printing a JavaScript string containing a single quote

I'm encountering an issue with a script generated by PHP. When there is a single quote in the description, it throws a JavaScript error and considers the string terminated prematurely. print "<script type=\"text/javascript\">\n ...

phpjavascriptescaping

Node.js - updating the value of a exported integer variable

In my file A.js, I have defined a module-level variable called activeCount and exported it using module.exports. In another file named testA.js, I am attempting to access and modify the value of activeCount. Despite my efforts, changes made to activeCount ...

javascriptnode.js

What is the best way to customize the border color of a disabled Material UI TextField?

I'm struggling to override the default style for disabled Mui TextField components, particularly in changing the border color. Although I successfully altered the label color for disabled fields, I can't seem to get the border color to change. T ...

javascriptreactjsmaterial-ui

Gatsby is throwing an error because the location props are not defined

I am attempting to utilize location props in my Gatsby page. In pages/index.js, I am passing props within my Link: <Link state={{eventID: event.id}} to={`/date/${event.name}`}> </Link> In pages/date/[dateId]/index.js: const DateWithId = ( ...

javascriptreactjsgatsby

Do [(ngModel)] bindings strictly adhere to being strings?

Imagine a scenario where you have a radiobutton HTML element within an angular application, <div class="radio"> <label> <input type="radio" name="approvedeny" value="true" [(ngModel)]=_approvedOrDenied> Approve < ...

javascriptangulartypescript