In my ‘previous’ WordPlus life, I was rather sloppy with my menus.
Let’s first agree on what we are talking about: WordPress knows keywords and categories. Now we also need a name for the entries in nested menus, which themselves still have sub-entries. They can be regarded as categories, too — because of their grouping effect. But they are not what WordPress means by ‘category’.
To avoid confusion, I prefer not to speak of a (menu) category, but of a menu grouping, when I refer to menu entries having sub-entries.1
Where were we? Exactly. At my sloppy handling: I didn’t think about whether my nested menus were reader-friendly, nor did I care about consistency. Sometimes the menu groupings were linked to specific pages, sometimes they didn’t. And I didn’t check whether such a menu grouping page was accessible on smartphones and tablets. If I had done it, I would have noticed that I could systematically select and display these pages on the desktop, but not on small devices. This time I should do it better:
- Enable the ‘ShortCodes in Menus’ feature.
- Set in the WordPress backend under
Siteurl + %postname.
- Give all pages and posts a simple
- Convert all menu groupings (=menu items with sub-items) to custom links.
- If such a menu entry was previously created by a page with content, append it with a suitable name under the just-created custom link.
- Enter the string
[myDomain]into each custom link, which stands for a menu grouping.
- Append to it — following the pattern
[myDomain]/slug— the slug of the post or page that should be displayed to the user of a desktop system when she clicks on the menu grouping.
The ‘problem’ is caused by the feature
hover: In the browser of a desktop machine, a HOVER sub-menu pops up automatically when the mouse pointer slides into the area of a menu grouping. So you can also click on the menu grouping and see the page ‘behind’ it.
hover on smartphones or tablets is a problem: it is not operated there. Instead, the reader has to click on a menu grouping if she wants to reach the subgroup below. That’s why she can never reach the page behind the menu grouping: the next click already closes the sub-menu again.
Bootstrap - and thus also bootScore — follow the principal mobile first. Hence, they don’t incorporate HOVER menus. Because big and small devices should offer the same user experience: If a menu item ‘contains’ sub-items, a click on it opens the sub-menu, otherwise the respective page or post.2
The desire for HOVER menus is great.3 We also want to try that here. But then we must not act as sloppily as I did in the past. We must prepare ourselves to embed HOVER menus into our site: We may not combine a group of sub-entries by a WordPress page or post, but only by a custom link pointing to a page or post inside the group. If we do so, that referred page or post is displayed on desktop devices, if the reader clicks on the respective menu grouping. But on the smaller devices, the reader herself picks the page out of the sub-menu.
- For the technicians among us — that is, all of us — a menu is a tree. And each non-terminal node of this tree is then a menu grouping. [↩]
- This is a general design decision, that goes back to 2012. [↩]
- They are offered as an extension or plugin on GitHub. [↩]