Dynamic width on drop-down sub-menu

JavaScript
1

OK I spent way too long writing a buggy and bloated jQuery script that is supposed to allow the sub-menus of a drop-down menu be a dynamic width (i.e. the submenu assumes the width of the widest list item). I am probably missing some base CSS property, surely it cant be this hard? My script I wrote is:

// drop down menu
var setWidth = 2;
var nextSetWidth = 0;

$jQ(‘.nav li’).hover(function(){

var thisList = $jQ(this).parent('ul');
if (thisList.parent('li').length > 0) {
	thisList.children('li').each(function(){
		var thisSpan = $jQ(this).find('span');
		var spanWidth = thisSpan.width();
		if (spanWidth > setWidth) {
			setWidth = spanWidth;
			}
	});
	setWidth = setWidth + 16;
	thisList.css('width', setWidth);
}

var nextList = $jQ(this).find('.nav:eq(0)');
if (nextList.parent('li').parent('ul').parent('li').length == 0){
	nextList.css('left', '2px');
	}

nextList.children('li').each(function(){
	var nextThisSpan = $jQ(this).find('span');
	var nextSpanWidth = nextThisSpan.width();
	if (nextSpanWidth > nextSetWidth) {
		nextSetWidth = nextSpanWidth;
		}
});

nextSetWidth = nextSetWidth + 16;
nextList.css('width', nextSetWidth);
if (nextList.parent('li').parent('ul').parent('li').length > 0){
	nextList.css('left', setWidth);
}

}, function(){
$jQ(this).find(‘.nav:eq(0)’).css(‘left’,‘9999em’);
setWidth = 2;
nextSetWidth = 0;
});

//End of Drop down menu

The HTML looks something like:

<ul class=“nav”>
<li><a><span></span></a></li>
<li><a><span></span></a></li>
<li><a><span></span></a>
<ul class=“nav”>
<li><a><span></span></a></li>
</ul>
</li>
</ul>

2

First of all i would suggest you to find some jquery menu plugins so that you don’t have to bother yourself with such small stuffs since they are already well tested with examples.

Secondly, why do you need to have such dynamic width? If you want to make the width in such a flexible way then why don’t you just make the width fixed to maximum with your available space?

3

Hi rajug,

Thanks for pointing out the plugins. I guess the importance of what I was asking is that clients have a habit of breaking fixed width designs, ecspecially in narrow areas of a webpage - i.e. side columns etc etc.

I think having a drop down menu with a full-width would be painfully unneccessary - it would take up way too much real estate on a website and look quite ugly. I dont think I can recall anyone ever implementing a full-width drop-down. Would almost start to appear as a modal box then I would imagine.

4

If you are making the width flexible as per the clients enters the name (of the menu) in a menu item then I don’t think that it will be good to always calculate and have the width according to the size of the menu container. Better have a fixed width then make overflow hidden from CSS if the space is really narrow. You must be strict at some end since you cannot allow a bigger width due to your page width fixed.

5

i have a same problem for fixing a dynamic width for a menu column.
Please reply.