Automatically align multicolumn menu

HTML & CSS
1

hi all

has anyone seen a css multicolumn menu which automatically position itself to align right/left or center if the width of dropdown menu increases so that it doesnt go beyond the page width.

suppose i have a fullpage width navigation and i have to put a 3 column menu on last or second last navigation <li> then it will go beyond page width.

If css alone doenst solve this, then jquery example would be fine.

vineet

2

Hi vineet!

I’ve seen it done with Javascript: used to move the dropdown/submenus of links closer to the right-side of the web page being set further to the left (so they never scoll offscreen and they never make the page wider than the dropdown menu itself).
fonq.nl uses Javascript for the menu (yeah, they use a table for the menu, just ignore that silliness). The distance from the right gets calculated. They use jQuery as a basis and then this:

(I’m going to translate the comments)


	Mainmenu: function () {

		// what's the max width we may use?
		var containerWidth = $("div.outer-container:first").width();

                //Mainmenu general mouseLeave
		var timeout = null;

		$(".menu-container td").hover(function () {
			var self = $(this);

			// clear timeout
			if (timeout != null) clearTimeout(timeout);

			timeout = setTimeout(function () {

                                //make sure submenus appear
				self.addClass("sfhover");

				// location of the subnav
				var nav = self.find(".subnav");

				// set left to 0 so that the correct width can be calculated
				nav.css({
					left: 0
				});

				var pos = self.position();
				var width = nav.width();

				// does it fall out of the container? ->set submenu all the way to the right
				if ((pos.left + width) > containerWidth) {
					self.css("position", "inherit");
					nav.css({
						left: 'auto',
						right: 0
					});
				}
				// enough room to the left? -> shuffle it back to the left a bit
				else if (pos.left > 100) {
					nav.css({
						left: pos.left
					});
				}

			}, 150);

		}, function () {
			// set timeout
			if (timeout != null) clearTimeout(timeout);

			// make sure submenus become hidden
			$(this).removeClass("sfhover");
		});

	},

You might recognise the “fshover” name from Suckerfish, but so far as I can tell this has nothing to do with Suckerfish and is simply using the silly class name for whatever reason. You can see there’s also on-off hover delays in there. I left them in but you don’t need them for the submenu positioning. Having an onhover delay isn’t a bad idea though, because the submenus are so large you wouldn’t want to accidentally trigger one just because you wanted to move your mouse to the top of the screen.