adapt css hover menu to touchscreens

[helenp]

Hi,
I am going maid searching, trying, I am desperate.
I have a pure css hover menu, (Peterneds whatever hover)
However I want it to work in touchscreens (smartphones, tablets etc), the problem is I dont have any so is very dificult to test,
I have been trying to add an a link # to made the li clickable however dont manage, and dont know if its the best way or not. Read that javascript should be avoided as some smartphones needs javamachine and that takes much battery, not sure on that.
Or maybe its better to serve a diferent menu to touchscreens.

Well this is the relevant css:

#menu p {display: block; border: 1px solid; border-color: #ccc #888 #555 #bbb; margin:0; padding:2px 3px; color:#000099; 
text-align:center; background:url("../images/background5.gif"); font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; 
font-weight:bold;}
#menu ul ul .level2{ display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099; 
background:#FFFFFF; text-align:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; 
padding-left:1px; padding-top:3px; padding-bottom:3px; text-decoration:none; width:250px;}
#menu a{display:block; border:1px solid; border-color:#ccc #888 #555 #bbb; margin:0; color:#000099; background:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; 
padding-bottom:3px; text-decoration:none;}
#menu ul ul .level2:hover {color:#000099; background:#FFFF99;}
#menu a:hover {color:#000099; background:#FFFF99;}
#menu li:hover {position:relative; z-index: 500;} 
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;}

And this is a piece of the html:

<ul>
<li><p>About Us&nbsp;<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
 <ul>
<li class="level4"><a href="guestbook_2011.htm">Holiday makers comments and tips</a></li>
<li class="level4"><a href="about_us.htm">About Us</a></li>
<li class="level4"><a href="example.htm">maintenance company</a></li>
</ul>
</li>
</ul>
<ul>
<li><p>Properties&nbsp;<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li class="level2">Town Center&nbsp;<img src="new_arrow.gif" alt="Arrow right" border="0">
<ul>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a> </li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
</ul>
</li>
<li class="level2">example&nbsp;<img src="new_arrow.gif" alt="Arrow right" border="0">
<ul>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a> </li>
<li class="level3"><a href="example.htm">example</a></li>
<li class="level3"><a href="example.htm">example</a></li>
</ul>

[edited by: alt131 at 6:04 pm (utc) on Feb 5, 2012]
[edit reason] Thread Tidy [/edit]

[alt131]

Hi helenp, I think the major issue is not being able to test to see how the menu is performing. six revisions has some articles about testing for mobile devices [sixrevisions.com]. They date to 2010, but are a place to start.

Once you can test the site it becomes easier to decide what adjustments (if any) need to be made. Just keep in mind that peterneds is a behaviour to deal with legacy internet explorer, so it should not be affecting other browsers. Plus it is possible to code a hover menu using just css (no javascript). Given you are trying to reach the widest number of devices, you may consider avoiding all the potential issues associated with javascript by not using it - which may also avoid the need to serve a different menu to smallscreens

[helenp]

Plus it is possible to code a hover menu using just css (no javascript). Given you are trying to reach the widest number of devices, you may consider avoiding all the potential issues associated with javascript by not using it - which may also avoid the need to serve a different menu to smallscreens

Dear Alt,
Peternetds whateverhover is for internet explorer yes, but without the whatever hover file its just a normal pure css menu.

You says "it is possible to code a hover menu using just css (no javascript). Given you are trying to reach the widest number of devices, you may consider avoiding all the potential issues associated with javascript by not using it"

How is it possibe, any exampel? for exampel Suckerfish dropdownmenu? Been searching for exampels for days.
Also you says to avoid javascript, my peterneed menu dont have any javascript,
Also I read many devices does not support hover as they dont have any mouse, so how can it be done.
I like to have the menu for many reasons, its easy to access to everything, my homepage have a lot of keywords etc.
Thanks,

[helenp]

Forgot to say,
I have done all kind of emulators and site looks ok, even the menu, but I am using a mouse, not a finger on the screen, so it looks you need a real device to test hover.
thanks,

[alt131]

Hi Helenp, I'm sorry I was confused - I thought you were wondering whether to use javascript for the menu. And of course hovering isn't much help if the device doesn't recognise :hover - and you can't test touch on an ordinary screen :)

I guess the main issue is how the wide variety of devices deal with :hover, or if they provide a "hover "equivalent". Quirksmode has mobile compatibility tables [quirksmode.org], but they haven't been updated for a while and wading through the developer documentation for each possible device is a bit of a chore. However, given the menu "looks fine", I wonder if an easy way to accomodate a wider range of devices is to use :active as well as :hover.

[helenp]

I guess the main issue is how the wide variety of devices deal with :hover, or if they provide a "hover "equivalent". Quirksmode has mobile compatibility tables [quirksmode.org], but they haven't been updated for a while and wading through the developer documentation for each possible device is a bit of a chore. However, given the menu "looks fine", I wonder if an easy way to accomodate a wider range of devices is to use :active as well as :hover.

Dont know exactly what active does, If I have a css rule active and same for hover, the active will open the menu just as hover or will be clickable (my peterneds dont use ane a# so no link in li? and what about closening the menu, will be closed after active has finished?
Its really complicated without being able to test, and cant find much information on the web.

One told me to use focus and blur, but that is javascript and javascript is not recomended.

And its not only mobiles, its also tablets, tried with applets tablet in shop, and sometimes hover worked sometimes not, a mess, so not good.

Thanks for your help

[alt131]

You are so right about the lack of information available - surprising given the number of touch screens now in use. Like you I've also seen the recommendations to use javascript, but I still think it would be ideal to avoid it.

:active applies when an element is has been activated - for example, by a mouse press, and it ceases to apply on mouse-up or when the mouse is moved off. A mouse click (or tabbing) gives the element focus, which is a different state that applies to elements that accept user input (such as <input> and <a>, and remains in place until another element is clicked or tabbed. Read more in 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus [w3.org] I'm not sure I've explained that well, so it might help to watch them in action at son of spring's demo page [sonspring.com].

In that way :active is similar to a "touch" and I understand some devices are using it as the "hover equivalent" - while others have chosen to just apply the :hover rule. Setting the same rule for :active and :hover will have limited impact on mouse or keyboard users, and means the menu should close once the element ceases to be active.

I think the "a#" you are referring to is the href attribute of a link ( <a> ). (Tell me if I have that wrong). That is different to the dynamic pseudo-classes, so you can set li:hover and li:active even though there is isn't an <a> or href.

Edit Reason:
Correcting smile face

[edited by: alt131 at 7:34 am (utc) on Feb 11, 2012]

[helenp]

I think the "a#" you are referring to is the href attribute of a link (<a>). (Tell me if I have that wrong). That is different to the dynamic pseudo-classes, so you can set li:hover and li:active even though there is isn't an <a> or href.

Many thanks, I will do a test with my actual menu adding a active style, as I like it more, and ask a friend to test on blackberry, apple is more complicated as seems to works sometimes and sometimes not.
Will let you know if it works, thank a lot.

[helenp]

I think the "a#" you are referring to is the href attribute of a link (<a>). (Tell me if I have that wrong). That is different to the dynamic pseudo-classes, so you can set li:hover and li:active even though there is isn't an <a> or href.

Just tried,
the exampel you gave me have an link to hover, active and focus, like this:
<td><a href="#">&nbsp;</a></td>
my li to hover or have active is like this:
<li>About Us<img src="new_arrow_down.gif" alt="Arrow down" border="0">
<ul>

Just changed the hover to active, to see how it acts on the computer, and on both it is activated on click and as soon as I stop clicking the menu or exemapel disappear....
I Imagine in a touchscreen its just the same, or will it be diferent?

Anyway, I will let my friend test it.

[alt131]

Hi Helep, I hope things are progressing.

Yes on touch screens that understand :active you should get the same result with a touch as with the mouse. I'd still be inclined to set both :hover and :active to cover the greatest range of devices though.

[helenp]

Thanks,
active without touch is awful, as soon as you stop having the button in the mouse pressed down the menu disappears, so its imposible use, I am still waiting for one to check in her blackberries......then I will ask one in ipone, and i will let you know. I am waiting lol.
I wonder wich touchscreens wont understand hover or active,

[alt131]

active without touch is awful, as soon as you stop having the button in the mouse pressed down the menu disappears, so its imposible use,

:) - hence setting :hover as well!

The main problem should be older devices as there was a lot of talk about developing the ability to sense :hover last year. The issue in the back of my mind is that the discussion centred on <a>'s which makes me wonder if it has been applied to other elements like <li>. That's one reason I haven't suggested :focus which is what an element should receive after a touch/tap. (The other is that it would impact on mouse users.)

So it will be interesting to hear how things work for your friends.

[helenp]

I thought about applying, hover, active and focus if posible to use all 3, just to cover all possibilites.
However I dont have any link on my li, but menu can be changed, however Peterneds is very good.
Heard many said its there favourite, and I imagine they meant the css, not the .htc file.
And I sort of dont link the li to be a link as that looks like a link to click to go to another page, I like the menu the way it is.

[helenp]

Finally I got an answer, and honestly no idea how a blackberry works, however think is one of the worst for navigating, only thinks no idea, so good to start with that.

Well she said that the same happened to here as to me, as soon as she left the button with the mouse the menu disappeared, so I said dont you use the finger which she said, no the mouse touch...

So I done several other menus using <a href> in the li and one with javascript etc. lets see if someone works.

Been looking after a nice on click menu, I suppose those works on all devices but cant find any nice 2 level on click menu, but I dont like menus that stays open and you have to click to close them.

If none of the others I sent her works, wich alternatives are there using click dropdown menus?
I have not sent her any focus and blur as dont know how to do and as you said is not good for mouseusers.
Thanks,