So I have a navigation menu built, which resizes each li to fit the entire width of the menu with js.
$(function() {
changeWidth(500);
function changeWidth(menuWidth){
var menuItems = $('#menu li').size();
var itemWidth = (menuWidth/menuItems)-2;
$('#menu').css({'width': menuWidth +'px'});
$('#menu a').css({'width': itemWidth +'px'});
}
});
Here it is set up nicely http://jsfiddle.net/MZ2wt/
I wondered if there was a way to set the width to be 100%, rather than having to declare an absolute width (currently 500px)?
Thanks!
Here’s a better fiddle: http://jsfiddle.net/MZ2wt/2/
Effectively, all it is doing is taking the
<body>width and judging with respect to this. Bear in mind, however, that you might get some seriously odd results if your element is not a direct child ofbody. As such, if I were you, I’d pass a reference to the element you’re resizing and call$(this).parent().width()instead of$("body").width()