SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    619
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Automatically align multicolumn menu

    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. #2
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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)

    Code:
    	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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •