search

WordPress / wporg-mu-plugins

Development of the Global Header and other mu-plugins used on WordPress.org.
60 stars 29 forks source link

Increase header menu target size #16

Closed dd32 closed 2 years ago

dd32 commented 2 years ago

Currently the target areas for the menu items in the header are much smaller than the size of the menu, this leads to a lot of dead space around menu items that is unclickable.

Additionally, there's no feedback to the user (other than the mouse pointer) on if they are/are not over a menu item.

Can we increase the target area for menu's to be the full "area" of the item?

For example, I've added a background colour to the existing hover/clickable area in this video:

https://user-images.githubusercontent.com/767313/138382182-295d5d1a-cdd9-4ec9-b779-ab624e2e9a71.mov

At the one-second mark you'll also see a glitch where it looks like the menu is shown before the parent target is reached, looks like there might be a 1px window where the menu is hidden in the background.

dd32 commented 2 years ago

At the one-second mark you'll also see a glitch where it looks like the menu is shown before the parent target is reached, looks like there might be a 1px window where the menu is hidden in the background.

Turns out that was because the mouse crossed the lower section of the support tab on it's way to News, as something like HoverIntent isn't used here to verify that the user was actually heading to that item. Similarly, the menu vanishes instantly without any form of grace period (even if the link for the menu is still in a hover state, but the mouse has left)

kellychoffman commented 2 years ago

Two more things that can be done in the same PR:

dd32 commented 2 years ago

Remove black background on hover. (not seeing that in any of the Figma files

This was requested via #63

beafialho commented 2 years ago

Currently the target areas for the menu items in the header are much smaller than the size of the menu, this leads to a lot of dead space around menu items that is unclickable.

I agree they're too small and think the entire area around the menu items could be clickable.

Captura de ecrã 2022-01-26, às 16 19 30

Two more things that can be done in the same PR: Remove black background on hover. (not seeing that in any of the Figma files, @beafialho please confirm.) Remove excess top padding on mobile view

There should be a dark background on hover. @kellychoffman is this the top padding you're referring to?

Captura de ecrã 2022-01-26, às 16 22 20
ryelle commented 2 years ago

@beafialho These issues have been addressed in https://github.com/WordPress/wporg-mu-plugins/pull/121, I just added you to that PR.

Edit: Oh, you've already replied there, I thought you hadn't seen it yet. 🤦🏻

kellychoffman commented 2 years ago

is this the top padding you're referring to

yes. was that intentional?

dd32 commented 2 years ago

The issue here, and others mentioned within the comments appears to be resolved now.