Html - Navbar css:hover to onclick for touch devices

TheBeginner
July 5, 2023
134 views
0 votes
2 Answers

I need to change this navbar from css:hover to some kind of onclick with javascript to make it work on touch devices. Or maybe there is some other way than css:hover using css

Here is what I have until now

The HTML

    <div id="menu" class="active">
      <div class="categories" open><a href="#void">News</a>
        <div class="locations">
          <a href="#">Europe</a>
          <a href="#">Asia</a>
          <a href="#">Africa</a>
          <a href="#">Oceania</a>
          <a href="#">North America</a>
          <a href="#">South America</a>
        </div>
      </div>
    
      <div class="categories" open><a href="#void">Education</a>
        <div class="locations">
          <a href="#">Europe</a>
          <a href="#">Asia</a>
          <a href="#">Africa</a>
          <a href="#">Oceania</a>
          <a href="#">North America</a>
          <a href="#">South America</a>
        </div>
      </div>
    
    </div>

The CSS

 #menu {
      grid-area: menu;
      width: 100%;
      height: auto;
      text-align: left;
      border-bottom: 3px solid #121212;
      background-color: inherit;
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      cursor: pointer;
      z-index: 8;
    }
    .categories {
      display: block;
      position: relative;
      width: 92%;
      margin: 0 auto;
      overflow: hidden;
      height: auto;
      text-align: left;
    }
    .categories a {
      display: block;
      position: relative;
      width: 100%;
      height: 42px;
      line-height: 42px;
      font-size: 1em;
      text-transform: uppercase;
      text-align: left;
      border-bottom: 1px dotted #121212;
    }

    .categories a:hover {
      color: #ffffff;
      background-color: #121212;
      padding-left: 25px;
    }


    .locations {
      display: none;
      position: relative;
      width: auto;
      height: auto;
      text-align: left;
      overflow: hidden;
      padding-left: 25px;
      padding-right: 25px;
      margin: 0 auto;
    }
    .locations a {
      display: block;
      font-size: 0.938em;
      color: #121212;
      text-transform: capitalize;
      text-align: left;
      height: 38px;
      line-height: 38px;
      border-bottom: 1px dotted #121212;
    }
    .locations a:hover {
      color: #e5633f;
      background-color: inherit;
      padding-left: 0px;
      text-transform: capitalize;
    }

    .categories .locations {
      display: block;
    }

Already tested with all related answers/solutions using the following:

cursor:pointer
hover:active
hover:focus
css media queries hover:hover 
pointer: fine

any idea how to solve this?

Answers

- neropha
- July 5, 2023 at 2:20 pm
- 0 votes
0
Technically there’s no :hover state on touch devices. Most of them will only show a short "flicker" of the hover-action and then proceed to execute underlying click-action. Since your category parent does only target an anchor (#void), the page jumps. Most likely to the top, since that anchor might not even exist on your page. I’d guess, the same is happening, when you click the category parent. You can solve this by simply using a <span> instead of a link (<a>). All kinds of HTML Tags can have :hover states.

You’ll also need to set a tabindex, otherwise the element won’t be focusable

<div class="categories" tabindex="0"><span>News</span></div>

Now you can define specific CSS for devices that don’t support :hover
Have a look at the following media query:
```
/*----- smartphones, touchscreens - devices with no :hover -----*/
@media (hover: none) and (pointer: coarse) { 
  .categories > span:active, .categories > span:focus {
    color: #ffffff;
    background-color: #121212;
    padding-left: 25px;
  }
}
```
Login or Signup to reply.