Open jenlampton opened 1 month ago
I've created a PR so people can see how it feels, but the CSS in there probably needs a cleanup before this is ready to commit.
Reviewing the color of admin bar menu items is probably a good idea. I guess it's also a lot of work, as a nested menu has so many aspects (changing states, menu trail visibility, ...). I've only had a quick look at the PR so far. At first sight, it works okay within the single menu levels, but in my opinion it makes the whole menu trail less clear.
I like the proposed changes in the PR. It is much simpler to follow visually with multi-nested menus, especially when they fold back on each other, e.g. Configuration > Content authoring > Text editors and formats. I'm in favor of the proposed change.
I'm going to add pr - works for me
but leave needs testing
and needs more feedback
for others to chime in.
I resized the browser to make the first sub-menu drawn on the right and its sub-menus on the left.
I think that, in this screenshot, it is still clear that the Overview sub-menu is Structure > File types > Audio > Manage displays > Overview.
To compare, when sub-menus are all drawn on the right, this is how they appear.
@avpaderno Do you think the second image, all displays to the right, is a problem? Remember the user is not looking at a static image.
Do you think the second image, all displays to the right, is a problem?
No, I do not.
I just meant that the first screenshot (the worst case) is as clear as the second screenshot (the easier case).
In the admin bar, it appears as though menu links that have children get both a visual indicator arrow, as well as a different color background. This background color change can be confusing, and can interfere with usability when navigating to very deep places, or when menu items overlap.
I would like to recommend that we revisit this color change for items with children, and instead adopt a more standard color-change pattern such as:
I would like the hover color for the menu item to match the color of the sub-menu it opens, indicating that the two are related, and demonstrating the contrast between it and all of it's neighbors.
Level 1: -- special case
Level 2: -- same for all following even levels
Level 3: -- same for all following odd levels
Proposed change
5 levels deep:
Image styles:
Current examples from the Configuration menu
5 levels deep:
Image styles: