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
LVL 3
Colin BrazierAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
what is not working?  It seems to work for me on both mobile touch (android) and windows desktop touch screen.
0
Colin BrazierAuthor Commented:
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...)
0
Colin BrazierAuthor Commented:
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".
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
1
Colin BrazierAuthor Commented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think it is working or at least better
0
Colin BrazierAuthor Commented:
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:

  1. 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.
  2. 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
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
0
Colin BrazierAuthor Commented:
I'd like to do it without js if poss.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
1
Colin BrazierAuthor Commented:
Good idea - it validates now.
0
Colin BrazierAuthor Commented:
No change though.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
We have to keep eliminating things. The next thing I would work on is removing the checkbox/label in place of <a> tags.
0
Colin BrazierAuthor Commented:
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
0
Julian HansenCommented:
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

1
Colin BrazierAuthor Commented:
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?
0
Colin BrazierAuthor Commented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Did you see that example you want to aspire to uses jquery to make it work?
0
Colin BrazierAuthor Commented:
Ah no...what do they do?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
0
Colin BrazierAuthor Commented:
What's your opinion Scott?  I'm tempted to stick with what I have now.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
0
Colin BrazierAuthor Commented:
I found a solution today, inasmuch as I changed  http://www.col-b.uk/menu/ and will update the live site www.fobgfc.org tomorrow (Friday).  The checkbox hack was working but not with narrow screens  - I changed
/* Display Dropdown when clicked on Parent label */
	[id^=drop]:checked + ul {
		display: block;
	}

Open in new window

to use tilde instead of plus
/* Display Dropdown when clicked on Parent label */
	[id^=drop]:checked ~ ul {
		display: block;
	}

Open in new window

and now all is working as prescribed, w/o javascript.

I know I shouldn't use display:none because of accessibility issues but will address that next, along with the 404's etc.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Colin BrazierAuthor Commented:
I meant to attach the two files relevant to this.
include_menu.php
menu.css
0
Colin BrazierAuthor Commented:
I found why my checkbox solution wasn't working.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.