January 10th, 2010 // Posted in WebdesignComment (0)

So, I’m working on a layout for a Bistro theme and ran into a bit of a problem. See, there’s a dynamically populated menu module in Bistro which allows the website owner to add, remove and edit elements in their main menu. I like to use unordered lists to create horizontal menus as opposed to tables, which can create a problem if you’re trying to use up 100% of the width of a div or something. I figured it was about time to actually write a little bit of jquery to handle setting the widths of the list-items dynamically and will share it with the world lest it be useful to someone else:

<script type=”text/javascript”>
$(document).ready(function(){
children = $(“#menuList”).children(“li”);
num = children.length;
size = (940/num) – 1;
$(“#menuList”).children(“li”).width(size);
});
</script>

So, make sure you are using jquery and throw that up there in the header. Then you can make an unordered list with the id of “menuList” and populate the list-items which ever way you please!

Leave a Reply

You must be logged in to post a comment.