equalWidths jQuery Plugin by Andy Ford

(Blog Post) ~ (Download on github)

The equalWidths plugin can be applied to a navigation list (UL or OL) to make all the child elements (LI's) have an equal width. It's actually generic enough that it can be applied to any element to make the child elements equal widths, so it may have other uses. If the math does not work out perfectly, then the last item may be a pixel or two wider than the rest.

View source for usage examples. For comments or suggestions, leave a comment on the blog post, DM me on Twitter, or ping me at andy {~at~} aloestudios.com.

Plugin Options

Currently, stripPadding is the only option. It can take the argument 'child', 'grand-child' or 'both' (the default is 'none') and will strip the left and right padding from the matching elements to prevent box model mayhem. (see Demo #3. Inspect in FireBug or Web Inspector)

Usage

Apply the .equalWidths() method to the parent element whose children should have equal widths:

$('ul#main-nav').equalWidths();

If you'd like to strip the left and right padding from the child or grand child elments, use the stripPadding option:

$('ul#main-nav').equalWidths({'stripPadding': 'child'});

$('ul#main-nav').equalWidths({'stripPadding': 'grand-child'});

$('ul#main-nav').equalWidths({'stripPadding': 'both'});

Assuming that equalWidths is applied to a UL with a markup structure of UL > LI > A, then 'child' would strip the padding from the LI's, 'grand-child' would strip the padding from the A's (anchors), and 'both' would strip padding from the LI's and A's.

Demos

1. Plugin not applied

• One
• Two
• Three
• Four
• Five
• Six
• Seven

2. Plugin applied

• One
• Two
• Three
• Four
• Five
• Six
• Seven

3. Plugin applied, using ‘stripPadding’ option

• One
• Two
• Three
• Four
• Five
• Six
• Seven

4. Plugin not applied, using ‘display:table;’ & ‘display: table-cell;’ in the CSS

• One
• Two
• Three
• Four
• Five
• Six
• Seven

Questions or Comments?

For questions, comments or suggestions, leave a comment on the blog post, DM me on Twitter, or ping me at andy {~at~} aloestudios.com.