Start Free Trial

asked on

Best approach for a multi-level menu with touch support

I'm looking for a multi-level menu approach with touch support that preferably uses no javascript.

My current live menu from www.fobgfc.org uses the hidden checkbox technique, but it doesn't work on touch devices so I must have gone wrong somewhere.

(I will aim to reduce the number of sublevels in the future, but the principle is the same.)

I attach the html for the menu and its CSS.

Thanks in advance,

Col
include_menu.php
menu.css

what is not working? It seems to work for me on both mobile touch (android) and windows desktop touch screen.

ASKER

Ah, OK, it doesn't work on iPads, I haven't tried it on android tablets. Surprised it works on windows desktop touch screen.

Is there something unique about iPads?

When I say it doesn't work, nothing happens when you touch the top level menu (eg About us, Teams...)

ASKER

Just bumping this. I have simplified the menu and put it in http://www.col-b.uk/test/

In iPad (landscape), nothing happens when you tap "About Us", "Teams" or "More".

It looks like your slick css and js are throwing 404's. Start off by using the browser console to look for these things and try and get it error free and test again. Sometimes js errors in one spot cause problems in another. When I used the console to mimic iPad Pro, I did see intermittent issues.

ASKER

Thanks, they weren't needed so I have commented out their calls.

It is a long time since I coded this and at the time the checkbox hack was new to me.

Looking at the code I don't seem to do anything with the checkbox in the CSS, other than hide it at the start. There is no CSS action for eg.

input[type=checkbox]:checked ~ ul {
	position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

Open in new window

So maybe it's something really simple.

I think it is working or at least better

ASKER

OK. I have simplified the menu to a max of a single dropdown, gone over the various checkbox tutorials, moved the label to after the checkbox and moved it all to http://www.col-b.uk/menu/

I attach the html and css files.

Now, with an iPad (landscape), if you tap on About Us, Teams or More, the dropdown list appears - Great! this wasn't happening before.

Now I would like to know two things:

when the dropdown is shown, if I tap away from the list, it disappears; this is the desired outcome. If I tap on the About Us label again, I would like the same thing to happen (ie toggle the dropdown), but it stays visible. Incidentally, if I tap on the top banner when the dropdown is shown, it doesn't disappear.
The second thing I would like to know is how/why it IS working, because I can see no reference to the checkbox or label in my CSS. What am I doing right??!!

Cheers
include_menu.php
menu.css

I'm only quickly looking at this. I'm sorry I didn't catch out before.

Why are you using checkbox's and labels?

Try just using <li><a class="topnavlink" href="#">Link></a></li> then have your js/jquery listen for the a click with whatever class you gave it and in the example li.toplink a

ASKER

I'd like to do it without js if poss.

js is pretty common especially for mobile. But first thing, make sure the site validates https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.col-b.uk%2Fmenu%2F or at least get rid of the errors such as closing tags. That may solve the issue.

ASKER

Good idea - it validates now.

ASKER

No change though.

We have to keep eliminating things. The next thing I would work on is removing the checkbox/label in place of <a> tags.

ASKER

About Us shouldn't be a link, it should open/close the dropdown, so I replaced the checkboxes with spans instead.

Now nothing happens when they are tapped on an iPad.
menu.css
include_menu.php

Not sure if this is relevant but there is an optimisation with apple devices that disables click notifications on elements that are not <a> elements.

I seem to remember that it requires setting a cursor:pointer on the element to make it work.

So what you do is on your non-<a> element that must be clicked to activate simply add

.element-class-or-name-here {
   cursor: pointer;
}

Open in new window

ASKER

This does have an effect but puts me back to here and with the cursor being a pointer on the desktop, which it shouldn't.

I have found info about @media (pointer: fine) - could that be useful here?

ASKER

with the cursor being a pointer on the desktop

fixed easily by switching the cursor to default on :hover.

Maybe this is the best I can get with this issue? It is certainly much more difficult than i imagined. Even the example I wanted to aspire to, on www.chipsteadfc.org.uk "cheats" by having the top menu items go to their own pages when clicked / tapped, when I would expect it to do nothing.

Did you see that example you want to aspire to uses jquery to make it work?

ASKER

Ah no...what do they do?

Looks like they use https://github.com/dachcom-digital/jquery-doubletaptogo.

ASKER

What's your opinion Scott? I'm tempted to stick with what I have now.

I don't have an ipad but used chrome to emulate and it appears to be working although using the console, I can see some of your files are throwing 404's.

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

I meant to attach the two files relevant to this.
include_menu.php
menu.css

ASKER

I found why my checkbox solution wasn't working.