Embedded Files
Expanding "Navigation Menu item with subentries" by the text
Hello all!
One of the most frequently feedback I get about the user experience of my projects is "navigation menu entries with subentries are not expanded when I click to text, I had to click to expand icon".
To make the menu text also clickable, we need a Javascript snippet executed on page load of the Global Page:
And the Javascript Snippet is:
What this snippet does is pretty straight-forward:
Bind click handlers:
• Adds click behavior to specific top-level nodes in a tree menu (#t_TreeNav).
• If a user clicks on a node's content (div.a-TreeView-content without a link), it triggers a toggle action (span.a-TreeView-toggle) to expand or collapse the node.
Handle Dynamic DOM Changes:
• Uses a MutationObserver to monitor changes in the navigation container (#t_Body_nav).
• Reapplies the click behavior whenever new nodes are added or the structure changes.
Note that, this snippet is only created for my case and might need further changes.
After the Javascript code is executed on page load, navigation menu item with subentries is now expanding when clicked to text:
I also agree with the users that it was annoying to use the small chevron icon to expand the menu. So this quick tutorial shall fix that, hope you also find it useful.
Google Sites
Report abuse