Menu Icon Fix For jQuery UI

With a few additional elements in the markup, it's easy to add icons to jQuery UI menu widgets. We simply place spans to the left of the menu item text. We also have to add the relevant icon classes from the theme framework. That's the easy part. However, since we're manually changing the way the widget is rendered, there's no guarantee that it'll look how it's supposed to. And in fact, there is a minor issue with the icon placement — they're slightly too high.

This minor misplacement is easily fixed with a few CSS overrides, as demonstrated here. Here is a comparison of the results. The menu to the left is the menu demo before our CSS fixes, and the menu to the right is the resulting menu.

The fix itself is really straightforward. The .ui-menu .ui-icon selector fixes the position of the icons to the left of the item text. We're just slightly increasing the top property, pushing the icon downward. But then we have this selector — .ui-menu .ui-menu-icon. That's used to fix the sub-menu icon positioned to the right of the text. Since this icon is positioned statically, we have to use the margin-top property to push the icon down.

The changes are hardly noticeable, but, they alignment bothered me. So, this is my fix should the alignment bother anyone else.