How to Make a Dynamic Width Horizontal Navigation

December 29, 2012

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.

Author

Stay in Touch!

Stay in Touch!
Solutions Architecture

browse through our blog articles

Blog Archive