How to stop :hover and have onClick on navigation sub menu-CodePudding

I am trying to make a responsive navigation on my Wordpress site where I am building a template from scratch. I have decent experience with HTML and CSS(SCSS) some PHP but not so much Javascript or the Wordpress way.

I am looking to remove the :hover element on my sub menu under the 'services' li and instead have it trigger on click on tablet and mobile devices. I understand it will be similar to how I have done the mobile menu button but I am struggling to figure out the best way to do it.

Can anyone give me an idea please? Thanks in advance.

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

header {
  height: 128px;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
  background: white;
}
header .nav-container {
  max-width: 100em;
  margin: auto;
  display: flex;
  justify-content: space-between;
  z-index: 45;
  padding: 0 1.5rem;
}
header .nav-container .logo {
  width: 14%;
  padding-top: 2.8rem;
}
header .nav-container p {
  display: none;
}
@media only screen and (max-width: 600px) {
  header .nav-container p {
    display: flex;
  }
}
header .nav-container nav {
  padding-top: 2rem;
}
@media only screen and (max-width: 600px) {
  header .nav-container nav {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  header .nav-container nav ul {
    flex-direction: column;
    display: flex;
  }
}
header .nav-container nav ul li {
  position: relative;
  display: inline-block;
}
header .nav-container nav ul li a {
  display: inline-block;
  transition: all 0.5s linear;
  text-decoration: none;
  padding: 16px 10px;
  color: #00458B;
}
header .nav-container nav ul li a:hover {
  color: #00458B;
}
header .nav-container nav ul li ul {
  display: none;
  background: white;
  position: absolute;
  top: 100%;
  width: 160px;
  padding: 0;
  z-index: 500;
}
header .nav-container nav ul li ul li, header .nav-container nav ul li ul a {
  width: 100%;
}
header .nav-container nav ul li:hover ul {
  display: block;
}
header .nav-container nav ul .menu-item-40 a {
  padding: 0;
}

<header>
    <div >
       <p onclick="myFunction()"> Click</p>
        <nav  role="navigation" id="myDIV">
            <ul>
                <li ><a href="/">Home</a>
                </li>
                <li ><a href="/">About us</a>
                </li>
                <li ><a href="/">Services</a>
                    <ul >
                        <li ><a href="/">Windows</a>
                        </li>
                        <li ><a href="/">Glass</a>
                        </li>
                        <li ><a href="/">Doors</a>
                        </li>
                        <li ><a href="/">Roofline</a>
                        </li>
                    </ul>
                </li>
                <li ><a href="/">Our Work</a>
                </li>
                <li ><a href="/">Contact Us</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

CodePudding user response：

Wrap it with Media Query so it doesn't work on Mobile and tablet.

header .nav-container nav ul li:hover ul {
  display: block;
}

CodePudding user response：

This is only one of many possible solutions, but I think it gives you an idea off how to solve the problem.

First you have to wrap following selector with a media query to disable the hover when your mobile button shows up. In your case it would look like this:

@media only screen and (min-width: 601px) {
    header .nav-container nav ul li:hover ul {
        display: block;
    }
}

To attach the toggle functionality I would suggest to add a js-submenu-toggle class to all a elements which have a submenu as sibling. I prefer to add a js prefix to my classes to mark them as classes that are only used in combination with javascript and have no styling attached to them:

<ul>
    ...
    <li >
        <a href="/" >Services</a>
        <ul >
            ...
        </ul>
    </li>
    ...
</ul>

For the actual functionality use the toggle function to add and remove an is-active class on click to the submenu element and the matchMedia function to make the toggle functionality only available when your mobile menu button is visible:

document.addEventListener('click', event => {
    const element = event.target;
    const mediaQuery = window.matchMedia('(max-width: 600px)');

    if(element.matches('.js-submenu-toggle') && mediaQuery.matches) {
        // Prevents the default behaviour of the `a`-tag with an `href`-attribute
        event.preventDefault();
        element.nextElementSibling.classList.toggle('is-active');
    }
});

The is-active class should look like this:

.is-active {
    display: block;
}