Hi NorfolkGreg,
hope everything is going well for you.
Checked your website again and I would keep everything as is for the menu. And only for the tier 2 sub-menu where the arrow is visible, add with css pointer-events: none; just on the arrow. If we look at Games sub-menu:
Menu (using input checkbox for mobile menu)
Home
Wonder
Games ⬇
- Board
- Table
where ⬇ is: .menu > li > a::after {pointer-events: none;} and disables interacting with link, so taping-clicking on Games will lead to Games page and taping on Games arrow will open-reveal sub-menu and close if it is not focused, for example taping outside the menu should close sub-menu. It will not work if there is another (tier 3) sub-menu, nested inside Board or Table (because first pointer-events losses focus).
That's just a theory, I didn't test it out yet.
Another option is to reveal sub-menu items on mobile and they are always visible but styled differently from the top menu items. For example if you tap on hamburger icon on your website:
Home
Wonder
Games
- Board
- Table
...
everything is revealed and there is no need for pointer-events.
Drop Down Menu Problem
-
NorfolkGreg
- Posts: 175
- Joined: Wed Sep 01, 2021 7:50 am
Re: Drop Down Menu Problem
Thanks Nox, for spending time on this.
Perhaps I should explain what I would like to achieve, as my existing site is only a work in progress and doesn't include all the things I would like the GregCustom theme to be able to deliver.
I want to allow for multiple dropdown menus each with, say, half a dozen options that may also include further dropdowns, as I assume (haven't tested) WonderCMS allows multiple dropdown levels, not just the one second level option that I currently have on my site.
In my testing of the code Gemini produced, I would sometimes find that if I widened the window I would find a dropdown open although the mouse pointer was nowhere near it. Tolerable as it wouldn't really be discovered by most users and easily correctable with a sweep of the mouse, but not as neat as I would like.
Gemini never managed to achieve the two things I asked of it for Narrow screens.
For top level options where there is a dropdown
1. A tap should Open a closed dropdown AND close any other open dropdowns
2. A tap on an open dropdown should close it
Gemini did use CSS pointer-events and was using JavaScript to do the rest of the work.
I believe that it may be impossible to do what I want with the existing menu code generated by Wcms. I suspect it needs some additional tags/classes within the menu structure that will allow theme code to distinguish between different sub-menus, their level within the menu structure and their open/close status and that will be true whether CSS alone is used or JavaScript.
Perhaps I should explain what I would like to achieve, as my existing site is only a work in progress and doesn't include all the things I would like the GregCustom theme to be able to deliver.
I want to allow for multiple dropdown menus each with, say, half a dozen options that may also include further dropdowns, as I assume (haven't tested) WonderCMS allows multiple dropdown levels, not just the one second level option that I currently have on my site.
In my testing of the code Gemini produced, I would sometimes find that if I widened the window I would find a dropdown open although the mouse pointer was nowhere near it. Tolerable as it wouldn't really be discovered by most users and easily correctable with a sweep of the mouse, but not as neat as I would like.
Gemini never managed to achieve the two things I asked of it for Narrow screens.
For top level options where there is a dropdown
1. A tap should Open a closed dropdown AND close any other open dropdowns
2. A tap on an open dropdown should close it
Gemini did use CSS pointer-events and was using JavaScript to do the rest of the work.
I believe that it may be impossible to do what I want with the existing menu code generated by Wcms. I suspect it needs some additional tags/classes within the menu structure that will allow theme code to distinguish between different sub-menus, their level within the menu structure and their open/close status and that will be true whether CSS alone is used or JavaScript.
Re: Drop Down Menu Problem
Hey NorfolkGreg,
here is an example of GregCustom theme with Javascript menu: https://wonde.rf.gd/home
Main menu links with submenus are not leading to respective pages, but serving as a menu reveal.
Hamburger menu is a button above WonderCMS menu, visible on smaller screen view port (600px).
There are 2 files (theme.php and style.css) where some changes are done, every change has a leading comment starting with REV.
>UPDATE: theme.php.txt is the theme file, download, remove .txt and add to GregCustom theme.
Disregard this: Theme.php is blank if opened in browser directly, right click on the link and save, then open with a text editor. I should probably use Github for that, so the code is easily visible and readable.
Inside theme.php is a replaced Javascript code at the end of the document, provided by Copilot. It actually did quite good following instructions.
Both files probably need more attention, as I didn't really tried to make it neat.
here is an example of GregCustom theme with Javascript menu: https://wonde.rf.gd/home
Main menu links with submenus are not leading to respective pages, but serving as a menu reveal.
Hamburger menu is a button above WonderCMS menu, visible on smaller screen view port (600px).
There are 2 files (theme.php and style.css) where some changes are done, every change has a leading comment starting with REV.
>UPDATE: theme.php.txt is the theme file, download, remove .txt and add to GregCustom theme.
Disregard this: Theme.php is blank if opened in browser directly, right click on the link and save, then open with a text editor. I should probably use Github for that, so the code is easily visible and readable.
Inside theme.php is a replaced Javascript code at the end of the document, provided by Copilot. It actually did quite good following instructions.
Both files probably need more attention, as I didn't really tried to make it neat.
-
NorfolkGreg
- Posts: 175
- Joined: Wed Sep 01, 2021 7:50 am
Re: Drop Down Menu Problem
Thanks, nox!
That's a massive improvement on what I achieved.
As you suggest, I have some work tweaking the CSS still to do, but I do have confidence I can deal with that when I make the time. (House sale looks as if it's finally going through, so I have a huge distraction to deal with over the next few weeks.)
As it stands it doesn't quite close all the sub-menus, when you click another option elsewhere in the tree in the way I thought would be best, but I reckon I can live with that until I've thought about it some more. I fancy there could be situations where closing up every option might not be ideal.
One more thing your demo shows up are a couple of bugs that I hadn't realised I had with my existing code. (Sub-pages with titles longer than the top level title are not handled as prettily as I would like.)
Thanks again, nox, but don't expect an instant GregCustom update. That house move is going to be a challenge that must be my priority.
That's a massive improvement on what I achieved.
As you suggest, I have some work tweaking the CSS still to do, but I do have confidence I can deal with that when I make the time. (House sale looks as if it's finally going through, so I have a huge distraction to deal with over the next few weeks.)
As it stands it doesn't quite close all the sub-menus, when you click another option elsewhere in the tree in the way I thought would be best, but I reckon I can live with that until I've thought about it some more. I fancy there could be situations where closing up every option might not be ideal.
One more thing your demo shows up are a couple of bugs that I hadn't realised I had with my existing code. (Sub-pages with titles longer than the top level title are not handled as prettily as I would like.)
Thanks again, nox, but don't expect an instant GregCustom update. That house move is going to be a challenge that must be my priority.
-
NorfolkGreg
- Posts: 175
- Joined: Wed Sep 01, 2021 7:50 am
Re: Drop Down Menu Problem
Hi nox,
Actually, I am having a difficulty with working out how best to achieve the couple of edits I wanted to make as, thanks to the JavaScript, not all the HTML is shown when you play with the dropdown menus.
1. One wide screens I'd like the top level menu buttons to remain at a constant width and not expand if the dropdown contents under it is wider
2. On narrow and wide screens I'd like to see an indent to sub-menu options that appear as a dropdown is opened to distinguish those items from any that follow them.
I probably could work it out given enough time, but the house move means I won't find long enough batches of time to concentrate on it.
Actually, I am having a difficulty with working out how best to achieve the couple of edits I wanted to make as, thanks to the JavaScript, not all the HTML is shown when you play with the dropdown menus.
1. One wide screens I'd like the top level menu buttons to remain at a constant width and not expand if the dropdown contents under it is wider
2. On narrow and wide screens I'd like to see an indent to sub-menu options that appear as a dropdown is opened to distinguish those items from any that follow them.
I probably could work it out given enough time, but the house move means I won't find long enough batches of time to concentrate on it.