Best Practice for Dropdown Trigger Links and Page Structure

[anyway]

I have now spent a few hours doing some research in the forum, but I can't get any further with a fundamental question. What is the best practice in Processwire with regard to trigger links for dropdowns, as can be found for example in mobile navigation.

With desktop navigation, I can use a link as a hover for triggering the drop-down, as well as a click that leads to the linked page. The question is, if this is good in a view of usability, because it doesn't work with a mobile drilldown navigation and some users don't realize that you can also click the trigger link. The tap always triggers the submenu.

The question arises if it is not better to place the parent link always at the top of the drop-down list, too. This would then work in both desktop and mobile navigation.

What would the best practice solution in Processwire be? Is there a way to place the parent link at the top of the drop-down list? I had already asked this question in the MarkupSimpleNavigation module area, but I didn't get an answer there. Maybe this cannot be realized with this module?

And which page structure would make the most sense for this? Should the parent page be hidden for the trigger? It probably wouldn't be so nice. Wouldn't it be best if all pages in the page tree containing content?

So my question is two-part: Which page structure is necessary for navigation where the parent is in the dropdown and how do you build such a navigation?

There are certainly already robust concepts for this. It's probably just a matter of my understanding.  I'm currently building a page tree, what partly schematically looks like this:

|--  Link
+-- Parent
      |-- Child
      |-- Child
      +-- Parent
            |-- Child
            |-- Child
            +-- Parent
                 |-- Child
                 |-- Child

 

Is it possible to repeat the triggering link of the drop-downs (which should not link to the parent page) inside the dropdowns, where it links to the corresponding page of course?

|--  Link
+-- Parent (Trigger)
      |-- Parent
      |-- Child
      |-- Child
      +-- Parent (Trigger)
            |-- Parent
            |-- Child
            |-- Child
            +-- Parent (Trigger)
                  |-- Parent
                  |-- Child
                  |-- Child

 

Thanks for your advice!

 

[bernhard]

Hi anyway,

I think I read your post in the other thread but didn't get your point. The problem you are describing here is not processwire specific - it's a general problem related to touch and non touch devices. you can find some possibilities here (and in the linked thread):

 

[anyway]

Thank you bernhard!

You're right, it's a general problem related to touch and non-touch devices and with javascript you can prevent clicking on the "real" link.

However, I am still confused about the page structure. Don't I need a page in the tree to provide the trigger link and then another one for the first link in the dropdown, which would actually be one and the same? I don't know how to explain this differently than by the two trees I have shown above.

What I'm trying to figure out is: Do I need the parent page twice in the tree, which is probably a bit of nonsense, or can the menu be built that the parent link appears twice - once as a trigger and once as a link in the drop-down list.

I'm sorry if I express myself in a complicated way and ... my PHP skills are somewhere between beginner and intermediate level

 

[bernhard]

Hi anyway,

in my link (and the sublink) you can see two possible solutions:

1. Open the dropdown on 1st click, open the link on the 2nd
2. Show some additional link via javascript on 1st click

In both cases you don't need to change the page structure (2 pages in the tree for 1 page would theoretically be possible with hooking/redirecting, but definitely not a good idea).

Other options would be to add the parent as sub-item like you showed (parent trigger + parent). You could do this via javascript or via php. The point is that you don't modify the pagetree in the backend but you define what happens on the frontend (display). See https://github.com/processwire/processwire/blob/master/site-default/templates/_func.php#L61-L118 for an example of a custom pagetree render function.

[anyway]

Okay, thanks a lot for your help, bernhard!