Drop Down Menu Problem

[NorfolkGreg]

Wiz suggested I post here to see if others have the problem I experience with my own site at:
https://gregchapman.uk
and can suggest a solution.

If you visit the site you'll see that the main navigation menu includes a drop-down associated with the GAMES option. It works fine on a desk/laptop computer where a horizontal menu appears, but on phones and other small touch screen devices I experience problems, and presume others do too.

You'll see in the video:
https://gregchapman.uk/hovertest.mp4
I cannot touch the GAMES option and wait for the TABLE and BOARD options to open and slide onto them. Instead the GAMES page always opens - unless I hold my finger there till the context menu appears, when I can close the context menu to reveal the drop-down options now open and available to touch. Obviously that's messy and needs to be cured.

Basically, this comes down to a problem with the hover action on a touch screen device.
A search such as:
https://www.google.com/search?q=does+ho ... en+devices
seems to confirm I shouldn't be surprised. However, the solutions typically offered do not work on a Wcms based site as the menu will always take the form of a simple list with links with no possibility of adding extra code to allow solutions such as conversion of a hover action to a click action on small screens.

How have others solved the problem of dropdown menus with Wcms?

[nox]

Hey NorfolkGreg,

here is a css snippet for dropdown menu on mobile:
https://gist.github.com/Netroids/9906ed ... fef882148f

I can't test this on your site, but I did a quick private demo and it worked.

If you copy and paste this css inside footer (for a quick test) using <style>css snippet content</style> we can see how it looks on your website.

[NorfolkGreg]

Well, you've introduced me to the pointer-events property which I knew nothing about, but I fear you may have missed the point. My issue is on touch screen devices.

I looked it up on
https://www.w3schools.com/cssref/css3_p ... events.php
and played with the "Try me" feature. I find that as its name suggests, it affects how a mouse pointer behaves, but there is no mouse pointer that follows your finger around on a touch screen or jumps to your finger's position when you tap on a touch screen.

All the solutions I've read, and those I use on other non-Wcms sites, involve adding more HTML code than is provided by default in Wcms for page navigation. I suspect the solution to getting drop-down menus to work with Wcms is a plugin that adds the necessary code or an update that adds code that will have no effect on existing sites, but with the right CSS code can make drop down menus work.

[Sophieclaarke]

I faced the same issue on my site Modernage School Abbottabad, and solved it by using a small JavaScript tweak to make dropdowns work on touch devices.

Here’s the solution:

document.querySelectorAll('.menu-item-has-children > a').forEach(link => {
let tapped = false;
link.addEventListener('touchend', e => {
if (!tapped) {
e.preventDefault();
tapped = true;
link.parentElement.classList.add('open');
setTimeout(() => tapped = false, 300);
} else {
window.location = link.href;
}
});
});

And this CSS:

.menu-item-has-children ul {
display: none;
}
.menu-item-has-children.open ul {
display: block;
}
This makes the dropdown open on first tap and follow the link on second tap—ideal for WCMS-based menus.

[NorfolkGreg]

Many thanks for this. I'll study it as soon as I can (I'm in the middle of a protracted house move at the moment, so time for work on my theme will be a little short in the coming weeks.

However, I have had time for a little investigation and realised that I got very mixed up when creating my CSS code It should be fairly easy to switch from using :hover on small screens, but accept that JavaScript may well offer the easiest fix.

(However, I'm an HTML/CSS purist at heart and know I should be able to fix the issue just with a change in the CSS.)

[ericking89]

On touch devices, hover menus don’t work because tapping triggers the link immediately.
Solution: make the first tap open the submenu, second tap follow the link.

javascript
Copy
Edit
document.querySelectorAll('.menu-item-has-children > a').forEach(function(link) {
link.addEventListener('touchstart', function(e) {
if (!this.classList.contains('submenu-open')) {
e.preventDefault(); // Stop link from opening
this.classList.add('submenu-open'); // Mark as opened
}
});
});
Add this via your WCMS “header/footer script” option.
For a working example of mobile‑friendly navigation, see 12bit soul.

[NorfolkGreg]

My hoped for house move drags on. We've been packed up and ready to move for well over a month. You learn to hate legal practice in England when it comes to selling houses, but that's an aside. I've finally found time to investigate my menu problem

It seems Nox is due an apology. I discover the pointer-events property does do what's needed on a touch screen. I now have a version of the menu found at:
https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp
altered to match the menu code generated by Wcms.

There is a difference which can be significant. The Wcms code includes a page link on a dropdown menu option. The W3Schools menu does not However, I find adding a "pointer-events: none" line to the styling for that button means to works as in W3Schools version.

However, there seems to be a bug in the W3Schools code if you add a second dropdown item to the menu on a small screen touch screen device. Unlike on a desktop when, as soon as your pointer moves away from the dropdown the menu closes up again, on a touchscreen once opened the dropdown stays open until you tap on a second dropdown lower on the menu. The instant the second dropdown opens the higher one on the menu closes, and that means your finger is then pointing at one of the sub-options within that lower dropdown and you've moved to that page. There is a work-around. Simply tap off the menu before attempting to open a second dropdown - but there's got to be a better way.

[NorfolkGreg]

Hi Nox,

here is a css snippet for dropdown menu on mobile:
https://gist.github.com/Netroids/9906ed ... fef882148f

After more struggling trying to work things out for myself (my agéd 77 year old brain sometimes fails me when asked to think laterally) I have returned to examine what your code does.

I now see that not only does it use pointer-events it also uses focus-within, neither of which I have played with before.

If I'm interpreting the code and your comments right, it uses an approach I have used myself over the years, e.g.
https://hamptonsafari.uk/index.php
where a button is found on any bar on the menu that has further sub-menu options. I had thought of adapting its code, which is based on one found at:
https://www.cssplay.co.uk/menus/cssplay-responsive-multi-level-menu-three.html
written back in 2015 but it requires a multiplicity of tags and classes not generated in a standard Wcms site.

Many thanks! With your fresh inspiration, I'm hoping to come up with something with which I can feel happy.

[NorfolkGreg]

Right! Tested!
I've run the Nox code and realised it doesn't do what I described in my earlier post today. It merely moves the position of the down-arrow graphic to the far right, rather than placing it at the end of the menu option text.

It does the same thing that I described when trying the W3Schools menu that I linked to in an earlier post.

It works acceptably when there is a single option with a drop down at the top level but there is a problem when there are multiple options with drop-downs and you have opened one near the top of the menu. There is no way to close/hide the sub-menu options. If you then try to open another set of sub-options lower down the menu, the upper one closes and you find that the pointer has already operated one of the sub-menu options now opened on the lower dropdown and you have jumped to that page, never seeing the other options that might have been displayed.

I am becoming more convinced that we do need the standard index.php file in Wcms to generate more code than it does currently, so that there are sufficient tags/classes/IDs attached to menu options that it is possible to style them both to reveal and hide the menu options to sub-pages.

Currently, my test site, https://gregchapman.uk/ uses three approaches to access sub-pages.

1. In the WonderCMS section, there are links at the foot of each page that take you to other relevant pages in that section. Hardly ideal if I add still more material.
2. In the Games Section there is the barely satisfactory dropdown menu, that can be made to work by itself, but becomes unsatisfactory if multiple dropdowns are added to the site.
3. The Sundry section just opens a page with links to further pages in the section. (OK there's only one page linked there at the moment.) It's the same technique I am using once you've selected one of the two options in the GAMES section.

I would like to be able to use Approach 2 for the whole site at multiple levels.