How to Make a Dynamic Width Horizontal Navigation

You'll agree it's pretty annoying to do if you've ever had to create this effect on a project before. Now there is a jQuery tool that will save loads of time by doing it for you! HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it's container.

1. Include whichever version of jQuery and the plugin

2. Start with a unordered list syntax, such is the case with many navigations.

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

3. apply the initializing function when the page loads

$(document).ready(function() {
$('ul').horizontalNav();
});

Of course, you can always get this effect by using the CSS property: display:table... BUT, that doesn't work for IE7, so it's great for use when providing support for earlier browsers.