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!
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.
- Uses the most generic selectors for targeting. The same rules should target both menus.
- Adds a scrollbar to the menu, but, only when necessary. In other words, the Animals menu will have it, the Autos menu will not.
- Only implements a vertical scroll bar, and not a horizontal scroll bar.
- 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!
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.