Forum Moderators: not2easy

Message Too Old, No Replies

Are hover dropdown menus still unaccessible for mobile user?

         

deeper

12:53 am on Apr 13, 2015 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi,
often menues have a submenu expanding via hover. Many CMS offer this kind of dropdown menues.

Is it still impossible for mobile user to get access to a submenu, because mobile devices still don't know how to handle or at least compensate "a:hover"?

Applying all link states, including a:focus and a:active, is no sufficient help?

Dymero

4:24 pm on Apr 14, 2015 (gmt 0)

10+ Year Member



I have a hover submenu on a site I work on. I was worried about this for the transition to mobile, but at least on Android it functions as if it were a click-to-open submenu. I actually use embedded lists for this purpose. I can't say how it'd function if I were using the anchor tag.

deeper

9:57 pm on Apr 14, 2015 (gmt 0)

10+ Year Member Top Contributors Of The Month



To be honest, I don't use a mobile device myself, but I'd like to find a solution without JavaScript, which supports at least all important mobile devices.
I have Wordpress, which has a decent menue system, and my site has only one small submenu. Therefore IMHO in this case a submenu expanding via hover is not worse than via click.

With the help of Google recently I've found a lot of information about link states active/hover/focus and if they help mobile user to deal with hover dropdowns. Unfortunately there are three different opinions:

-Using hover+focus+active is enough; in worst case your submenu won't close on some devices, but basically your mobile user will be happy and other solutions have their small flaws too.
-You even don't need to implement all three link states (just "tap and double tap"), but this won't work properly on some devices.
-Especially regarding hover dropdown menues there is only one good solution for your mobile users: JavaSript.

Thanks Dymero, may be others want share their experiences too.

diddly

10:54 am on Apr 18, 2015 (gmt 0)

10+ Year Member



just recently i found out that both iphone and windows phones still don't react to ":hover" events, i.e. do not translate taps into hover events, so my dropdown menu wouldn't work.
instead of adding hacks for apple & microsoft, i decided to replace the hover event with a checkbox and style it to look like a menu button.
it works on my android phone, but i don't know about iphone and windows phone yet, as i have no way of testing for those, other than asking friends & colleagues.

anyhow, here's the html:

<input id="menu-icon" type="checkbox"/>
<label for="menu-icon">
<div id="navbar-linklist">
<ul>
<li class="active"><a href="http://xxx.xxx/test.html">Hauptseite</a></li>
<li class=""><a href="http://xxx.xxx/test1.html">40-Jahres-Feier</a></li>
<li class=""><a href="http://xxx.xxx/team">Team</a></li>
<li class=""><a href="http://xxx.xxx/angebot">Angebot</a></li>
<li class=""><a href="http://xxx.xxx/anmeldung">Anmeldung</a></li>
<li class=""><a href="http://xxx.xxx/geschichte">Geschichte</a></li>
<li class=""><a href="http://xxx.xxx/termine">Termine</a></li>
<li class=""><a href="http://xxx.xxx/themen">Jahresthemen</a></li>
<li class=""><a href="http://xxx.xxx/praktika">Praktika</a></li>
<li class=""><a href="http://xxx.xxx/alben">Fotoalbum</a></li>
<li class=""><a href="http://xxx.xxx/links">Links</a></li>
<li class=""><a href="http://xxx.xxx/karten">Karten</a></li>
</ul>
</div>
</label>


and here's the css:

/* only used for mobile devices */

input[type=checkbox] {
display: none;
}
input[type=checkbox] + label { display:inline-block;
width: 50px;
height: 50px;
background: url(../img/menu-hand.png) no-repeat center;
}
#menu-icon + label #navbar-linklist {
display:none;
position: absolute;
background: #BC0000;
border: 5px solid #BC3838;
left: 0;
top: 50px;
z-index: 999;
list-style: none;
width: 100%;
}
#menu-icon:checked + label {
background-color: #bc3838;
}
#menu-icon:checked + label #navbar-linklist {
display: inline-block;
}
#navbar-linklist li {
padding: 0;
border: none;
width: 100%;
}
#navbar-linklist li.active > a { color: #F7F4E6; cursor: default; }
#navbar-linklist li.active:hover { cursor: default; }

#navbar-linklist li a:hover { color: #F7F4E6;
background-color: #BC3838;
}
#navbar-linklist li a { color: #222222;
display: block;
padding: 0.5em;
width: 100%;
}

[edited by: not2easy at 3:27 pm (utc) on Apr 18, 2015]
[edit reason] Charter Compliance [/edit]