Navigation item width

[CaldwellYSR]

I have a horizontal navigation bar in a wordpress template that I'm working on right now. I want the list to stretch the full 960px of the container by defining a specific width for each list item. I can do this pretty easily if I know how many items are going to be in the list, but since this is a WP template the size of the menu could change. I could, pretty easily, figure out the correct width using javascript (960 divided by the number of li's in the list) but I'm not sure that's the correct way to do it... Any suggestions for a noscript way to accomplish it?

 

[onlinetraining]

Use CSS and target each list item using a selector. You can just look at the HTML of a rendered page to determine the ID or specific CSS class associated with each item. In this case more likely, you'll see an ID for each element.
If that's a main navigation then you won't have to change those setting every often.

 

[CaldwellYSR]

Use CSS and target each list item using a selector. You can just look at the HTML of a rendered page to determine the ID or specific CSS class associated with each item. In this case more likely, you'll see an ID for each element.
If that's a main navigation then you won't have to change those setting every often.

Dur... The problem is I won't know HOW MANY items there will be since this is wordpress and they can add as many as they want so the width won't be determined until they make the menu. I know how to target the li's. Thanks though.

 

[ronaldroe]

Dur... The problem is I won't know HOW MANY items there will be since this is wordpress and they can add as many as they want so the width won't be determined until they make the menu. I know how to target the li's. Thanks though.

Read his response again. It's a canned response so he can get his links in. I highly doubt he even read your post.

At any rate, I don't know if there's any way to do it with just CSS.

 

[CaldwellYSR]

Read his response again. It's a canned response so he can get his links in. I highly doubt he even read your post.

At any rate, I don't know if there's any way to do it with just CSS.

Yeah I realize that now thanks

Right now I am doing it with jquery and setting up a fallback in case they don't have javascript. I guess that's just how I'm going to have to do it.

 

[CaldwellYSR]

So here's what my jquery looks like right now. Does this look like something I shouldn't be doing for some reason?

// Set up navigation item widths
var nav_items = $("#top-nav").children().length;
setNavItemWidth(nav_items);

function setNavItemWidth(num) {
	var w = 960 / num;
	$("#top-nav > li").css("width",w);
	$(".sub-nav").css("width",w);
	$(".sub-nav > li").css("width",w);
}

The 960 comes from the width of the container div.