Drop Down Menu Problem

[NorfolkGreg]

Thanks for trying, Wiz.

Unfortunately, that behaves exactly like the default on v3.5.0 (Haven't tried 3.6.0 on any device yet.)

I haven't looked at the code behind your greg5 test and the video link appears broken so I can't see how things work for you. I wonder if you're trying to solve a problem that's not the one I'm experiencing.

For example you refer to "click" without saying "hover over the "games"" option and click". On a touch screen I "tap" on "Games" option and it instantly opens the games page. If I want the open the Games sub-menu without moving to the Games page I need to "tap and hold". Only then does the dropdown open, but that also opens the OS context menu and to clear that I tap elsewhere on the screen and then tap on the required option. That adds unnecessary taps, isn't as quick as it could be and isn't pretty.

The current code works fine on desk/laptop devices where you can operate with a pointer that has the "hover" facility, but "hover" doesn't exist on a touch screen.

I hope to have time after the weekend to come up with the kind of list structure I would like to see for the main navigation menu. With that, using CSS alone, you can get a sub-menu to open on tap when you can then tap on one of those sub-menu options.

[NorfolkGreg]

I have looked at my favourite source for menu code, Stu Nicholls CSSPLAY site and turned up a couple of examples that should achieve my goal.

Where Wcms currently generates:

Code: Select all

<li class="nav-item subpage-nav">
  <a class="nav-link" href="#">Option 3</a>
  <ul class="subPageDropdown">
    <li class="nav-item "><a class="nav-link" href="#">Option 3.1</a></li>
    <li class="nav-item "><a class="nav-link" href="#">Option 3.2</a></li>
  </ul>
</li>

in one of the examples that could be used as a model CSSPlay uses this for an option with a sub-menu:

Code: Select all

<li><details><summary>Option 3</summary>
  <ul>
    <li><a href="#">Option 3.1</a></li>
    <li><a href="#">Option 3.2</a></li>
  </ul>
  </details>
</li>

while another uses this:

Code: Select all

<li><label><input type="checkbox"><span>Option 3</span>
  <ul>
    <li><a href="#">Option 3.1</a></li>
    <li><a href="#">Option 3.2</a></li>
  </ul>
  </label>
</li>

Given that both Wcms and CSSPLAY wrap their menu code in <nav> tags it can be seen that there's a lot of redundant classes in the current Wcms code as the CSS code in a theme need only to reference the <nav> tag in its selector to distinguish it from other list code. Of course, the major difference between the two is that, at the top level, Wcms code includes a link tag.

As a self-taught coder, I am willing to be corrected, but I understand that you cannot operate a touch screen device where a link is attached to a sub-menu without activating the link -- unless you are prepared to accept that visitors will need to use a a "tap and hold" that will also bring up a context menu that needs to be cleared before you can action one of the sub-menu options. So, if the link is to be retained in Wcms for backwards compatibility reasons, then CSS pointer-events code would need to be used in any theme effectively disabling the link on screens where a pointer appears.

For reference the two example menus I quote from are found at:

CSS Responsive - simple checkbox tree menu
https://cssplay.co.uk/menus/cssplay-sim ... -menu.html#

CSS Responsive - Oh so simple! tree menu
https://cssplay.co.uk/menus/cssplay-oh- ... -menu.html#

Visit
https://cssplay.co.uk/menus/
and you will find other examples that could be of interest including a more recent menu design using "Details/Summary".