CSS Challenge

Are you up for a challenge?! There’s this CSS issue that I can’t seem to figure out. After spending about 3 hours on it, I decided to change gears and seek more interactive help. Rather than going back and forth on the forum, though, I thought it might be more fun as a challenge you can actually put your hands on. So, here it is! :smiley:

The Problem

When an admin bar menu has a lot of entries, some of them may become inaccessible. The menu is simply cut short to fit in the viewport. No scroll bar appears. I’ve been able to get the scroll bar working, but, when it is present, the submenu fly-outs don’t work. I’ve tried every overflow tweak I could think of and nothing has worked completely.

The Setup

To give you a working canvas on which to devise a solution, I’ve written a simple plugin, CSS Menu Challenge. The plugin creates two menus in the admin bar, Animals and Autos, which you can use to compare and contrast as you go.

  • The Animals menu is very long and scrolls out of the viewport, making the last entries inaccessible. The first item has a few sub-items while the others do not.

  • The Autos menu only has a few items and each has item has sub-items.

  • The plugin enqueues a CSS file and a JS file. Both files can be found in the /assets/ directory.

The Challenge

In either the CSS or JS file (or both) devise a solution that accomplishes the following objectives.

  1. Uses the most generic selectors for targeting. The same rules should target both menus.
  2. Adds a scrollbar to the menu, but, only when necessary. In other words, the Animals menu will have it, the Autos menu will not.
  3. Only implements a vertical scroll bar, and not a horizontal scroll bar.
  4. Scroll bar existence does not break the fly-out behavior of the submenu items.

Note: A non-vendor-prefixed CSS solution is preferred. If your solution contains JavaScript, it’s fine to use either vanilla or jQuery, however, either way, it will be loaded only after the document has loaded, as noted in the JS file.

So, that’s it…

I hope someone’s up for this challenge! Seems simple, I know. And maybe hopefully it is! Sadly, there’s no actual prize involved in this challenge. Well, I mean, unless you consider being an awesome solver of problems a prize, then there’s that! :smiley:

If you have any questions, ask away! Or, if you come up with a solution, you can post your CSS/JS/both right here on the thread. If you’d like to discuss the pros/cons of menu sizes, please start a new thread. :+1:

4 Likes

Anything that goes in the admin bar should be short!

2 Likes

Thanks for the observation. I’m intending this to be a hands-on challenge more than a philosophical discussion on the length of menus. :wink:

2 Likes

Is it a requirement that the menu itself scrolls, when the page could scroll?
And does the scrolling of a menu that appears on hover assume a mouse wheel? (I don’t check keyboard navigation much, but I assume tabbing to the next menu item will scroll the page to show it).

I’m not sure what you mean by this. The menu would only scroll if the items exceeded the viewport (presumably because the menu is constrained to that size.)

For those that appear on hover (ie, submenus) I don’t envision a submenu flyout having a scroll in any cases…it would just be the first level that had a scroll. I hadn’t considered the tabbing behavior, but, that seems logical.

I’m on my phone, so can’t write a lot. What I like to do with long menus is break them into columns. Like a simple mega menu. CSS columns do this easily.

See if that helps.

2 Likes

When I wrote my theme’s mobile menu, I chose to make it position: static so that long menus push the page content down, and scrolling is handled normally (the page itself gets a scrollbar). I’ve seen a lot of menus in theme reviews that choose to make it position: absolute so that it is on “above” the page content and therefore out of the normal flow, and a long menu will not cause the page to have a scrollbar. This has to be managed separately, such as with max-height: 100vh; overflow-y: auto. My choice was to let the browser handle it – less CSS.

2 Likes