WordPress.org

Making WordPress.org

Opened 6 weeks ago

Last modified 4 days ago

#4901 new enhancement

Handbooks: Improve menus design

Reported by: felipeloureirosantos Owned by:
Milestone: Priority: normal
Component: Handbooks Keywords: needs-patch needs-design has-screenshots
Cc:

Description

The menus are not really clear, and that is something that really could be improved.

I put some CSS just to make it easier, and it has got really better, but it would be nice if we could have a professional design proposal on it.

.menu-table-of-contents-container ul ul{
      border-left: 6px solid #0073aa;
      margin-left: 6px;
}

.menu-table-of-contents-container ul ul ul{
      border-left: 6px solid #0073aa;
      margin-left: 2px;
}

Attachments (4)

before.png (611.7 KB) - added by felipeloureirosantos 6 weeks ago.
Before
after.png (702.5 KB) - added by felipeloureirosantos 6 weeks ago.
After
Screen Shot 2020-01-15 at 10.47.37 AM.png (214.0 KB) - added by dufresnesteven 5 days ago.
Yeah, I agree. It's pretty hard to understand the hierarchy. For me the borders seem unnecessary. Here's another option:
Screen Shot 2020-01-17 at 10.31.20 AM.png (409.6 KB) - added by dufresnesteven 3 days ago.
Here is how Microsoft does it for their Fabric UI documentation.

Download all attachments as: .zip

Change History (8)

@felipeloureirosantos
6 weeks ago

Before

@felipeloureirosantos
6 weeks ago

After

#1 @felipeloureirosantos
3 weeks ago

  • Priority changed from low to normal

@dufresnesteven
5 days ago

Yeah, I agree. It's pretty hard to understand the hierarchy. For me the borders seem unnecessary. Here's another option:

#2 @dufresnesteven
5 days ago

I also think having the 'arrows' on the right is troubling because usually they help to define hierarchy but on the right they don't support that function and just identify whether the section is open and closed.

#3 @felipeloureirosantos
4 days ago

Thank for the contribution! :)

I agree that the border is not great. We would still need to create a better hierarchy.

About putting the arrows on the left side, I don't think that it would fix the problem because some of the navigation items don't have descendent items (like 'Filesystem' from your image), so these items wouldn't have the arrow and the hierarchy problem would be the same.

#4 @felipeloureirosantos
4 days ago

Something that could be great is structuring elements to be numbered sequentially like in the WBS coding scheme.

@dufresnesteven
3 days ago

Here is how Microsoft does it for their Fabric UI documentation.

Note: See TracTickets for help on using tickets.