Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE10 mobile/touch :hover navigation problem Reply To: IE10 mobile/touch :hover navigation problem

#190620
Preface Studios Ltd
Participant

I’m aware that this is an old topic, but has anyone stumbled across this scenario?

Large screen mode – nav menu links are displayed inline. The sub-menu ul is hidden by default, when you hover over a link with a sub-menu, it’s shown. Unless you add aria-haspopup=”true” like below, the submenu never appears on Windows 10/11 using a touch screen device.

<ul class="with-dropdowns">
    <li><a href="#">Home</a></li>
    <li>
        <a href="/about" aria-haspopup="true">About</a>
        <ul>
            <li><a href="/about/#who-we-are">Who we are</a></li>
            <li><a href="/about/#what-we-do">What we do</a></li>
            <li><a href="/about/#why">Why</a></li>
        </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Fine. What about at small screen size? Here my menu is displayed with each link on a new line (display: block) with the submenu shown underneath by default (with some padding-left so its indenting to indicate hierarchy). Now if I try and touch the parent link on my phone, nothing happens. At least on desktop mode, the menu appears and disappears on touch and if you really want to access the about page you tap the link again. However on a phone it just looks and feels like the menu is broken, as nothing happens when you tap it once, it only works when you tap it twice.

Is there a way of fixing this, other than writing some JS to inject aria-haspopup=”true” at min-width: whateverpx?