1446465 - Menu items with submenu items underneath them do not work as links. They only show/hide the submenu

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: General, defect, P3)

Description

[Rob]

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: unspecified
 Technical Contact: 

:: Details

url of interest is: https://developer.mozilla.org/en-US/docs/Web/JavaScript
but: this could be a systemic problem on all/many MDN pages.

Dropdowns on this url reference a url to link to for drilling down but they actually DO NOT GO TO THE URL--they only drop down to show sub menu items. To effectively get to the url that you should have gone to, you must click on a sub-menu item and then once on that page click on the breadcrumbs on the child page to get to the desired parent page.

Example: go to this url, under "References" in the left-side menu, hover over "Functions". You see it is supposed to link to a url. Click on it. You are not taken to the url. But the sub-menu items are shown in the dropdown. Now click on a sub-menu item to go to its page. Now go to breadcrumbs and click on the parent page in the breadcrumbs. You can get to the page you should have gone to when "Functions" was first clicked to display its dropdown.

The major problem with the current behavior is that people are not finding desired documentation through your menu system.

Comment 1

[Chris Mills [:cmills]]

Hi Rob,

Yes, this is an issue with the quicklinks menu system. We've fixed it in different ways in different places. For example, in the Learning area menu I've added an extra "...overview" item into each sub menu so that you can click on it to go to the parent page:

https://developer.mozilla.org/en-US/docs/Learn

But hacking it is not ideal. I'll make our front end dev aware of this issue and see if we can work out a better way of doing this.

Comment 2

[Schalk Neethling [:espressive]]

Hey All,

One immediate option that jumps out is that we can change the interaction so that you need to click on the arrow in order for a section to expand. Currently you can click on either the text or the arrow.

One problem with this is that the hit area becomes tiny, which is not great in general. We could bump up the size of the caret or, another option is the add an icon to the right of the text that takes you to the page, instead of expanding the section.

The second is again problematic in two ways:

1. Small hit area
2. Assumes that the purpose of the icon will be clear

Thinking out load here. If anyone has suggestions, those would be welcome. I will think about this some more if I can think of any other options. Perhaps my initial thought is the way to go though, with an increased hit area.

Comment 3

[Florian Scholz (Open Web Docs)]

Triage notes:
This is one of the design issues with sidebars. We would like to have a tracking bug for a project that "makes sidebars suck less".

Comment 4

[Schalk Neethling [:espressive]]

Agreed. I wonder if we have a document or something that details how these are currently constructed? For a lot of these things I do not have enough of the history of why things are the way they are. Would be great to have that as a starting point to work from. Any suggestions, ideas?

Comment 5

[John Whitlock [:jwhitlock]]

The JavaScript sidebar is constructed by the JsSidebar macro [1]. You can see the history of the macro in the current repo and in the KumaScript archive [2]. Kuma extracts the sidebar by the class "quick-links" and moves it to the left sidebar. The style of the sidebar is set in Kuma [3], as well as the interaction JS [4].

There's no design documents for Kuma, outside of some screenshots around re-skinning every few years, and those are not maintained. Sometimes you can learn about features from bugs, commit messages, pull requests, and review comments. I find it valuable to get good at quickly navigating these resources.

[1] https://github.com/mdn/kumascript/blob/master/macros/JsSidebar.ejs
[2] https://github.com/mdn/archived_kumascript/commits/master/en-US/JsSidebar.ejs
[3] https://github.com/mozilla/kuma/blob/master/kuma/static/styles/components/wiki/quick-links.scss
[4] https://github.com/mozilla/kuma/blob/master/kuma/static/js/wiki.js#L12-L17

Comment 6

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.