f w h

jQuery Menu Item Width

You’re designing a website based on a CMS, when it hits you. What if the client adds more menu items than what I’m setting up for them? You’ve calculated the width of the menu items based on the number you’re putting in there. If they add another, it’ll be pushed to the bottom, if they remove one, there will be a gap.

jQuery to the Rescue

The following snippet will calculate the width of each menu item by dividing 99.99 by the number of items. Why 99.99? This will force partial pixels to be rounded to less than 100% to ensure they don’t push the last item to the next line.