Width of bins

Also if you have added padding/margin to a wide bin then you might end up with a horizontal scroll bar on your site. I think the screen width offset needs to be a bit more generous and as suggested above it might be useful if it was programmatic or if the bin was more centered.

As a temporary suggestion I changed line 163 of megamenu.js to:

if (edgeOverlap < 0) {
					megaBins.eq(k).css('left',(edgeOverlap-40) + 'px');		
			}

Which moves the whole bin 40 pixels further away from the window edge.

Hi,

I tried something similar..

My container width is 960px and my menu is at the right hand side.

If the bin is narrow enough to stay within my "container" div, I want it not to spill outside the container. I made the following hack to the js file at line 162 to keep the menu aligned with the right hand edge. I havent tested much yet but so far, so good.

  if (edgeOverlap < 0) {
      if (megaBins.eq(k).outerWidth(true)<960) {
          var exContainerWidth = ($(window).width() - 960)/2;
          megaBins.eq(k).css('left',  ( - megaBins.eq(k).offset().left + exContainerWidth + 960 - megaBins.eq(k).outerWidth(true)) + 'px');		
      }
      else{                                  
          megaBins.eq(k).css('left',(edgeOverlap-100) + 'px');		
      }
  }

Hi - I too am having issue with the width of the drop down, I would like it to be constrained with the 960 Width container so that it is not outside of the web design. I have tried to implement your code but its not working for me, I have attached a screen shot of the issue, is this a JS issue or something I can resolve within the CSS?
Anyone any ideas?
Thankyou

Hi Stacy925

I have attached a screenshot of my site with the megamenu within 960px. You can see it live here: www.pensionen-mit-charme.de. The code I have used is quite an ugly hack of the megamenu module. After looking at your screenshot, I think maybe the reason my hack does not work for your site is that perhaps the megamenu popup area (i.e. "bin") is wider than 960px. As a test, why not remove or hide one of the 2nd level menu items or "slots" (e.g. hide "Seville Province")

Also, here is my css, adapted from the skin included within the module:

/**********************************************************
 *                 MEGAMENU = BLOCK
 *                 MEGAMENU CHARMANTE SKIN 
 **********************************************************/
#block-megamenu-0{
  clear:none;
  float:right;
  width:600px;
  margin:0px;
	z-index: 10;
}

/*   CHARMANTE MEGAMENU SKIN -*/

/* start - ensure that #megamenu-menu bar is the same height in all browsers
 * very frustrating to get this correct - do not touch!
 *--------------------------------------------------------*/
.megamenu-skin-charmante .megamenu-item a,
.megamenu-skin-charmante .megamenu-item span
{
	font-size:13px;
}
.megamenu-menu,
.megamenu-skin-charmante .megamenu-parent,
.megamenu-skin-charmante .megamenu-parent-title
/* this is the key -- all these must be set to the same value */
{
	font-size:20px;
	line-height:110%;
	height:100%;
}

.megamenu-skin-charmante .megamenu-parent-title a,
.megamenu-skin-charmante .megamenu-parent-title a:link,
.megamenu-skin-charmante .megamenu-parent-title a:visited,
.megamenu-skin-charmante .megamenu-parent-title a:focus,
.megamenu-skin-charmante .megamenu-parent-title a:hover,
.megamenu-skin-charmante .megamenu-parent-title a:active,
.megamenu-skin-charmante .megamenu-parent-title span
{
	padding:4px 13px;
}
/* end - ensure that #megamenu-menu bar is the same height in all browsers
 *--------------------------------------------------------*/

.megamenu-skin-charmante ul{
  list-style-type:none;
}

.megamenu-skin-charmante .megamenu-parent{
/*  padding:5px 20px 5px 20px; */
  float:right;
  border-right:dotted 1px #626363; /* PMC grey */
}

.megamenu-skin-charmante .megamenu-parent.first{
  border-right:none;
}

.megamenu-skin-charmante .megamenu-bin {
	background-color:#white;
  margin-top:11px;
}

.megamenu-skin-charmante .megamenu-bin {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(255, 255, 255);
/* RGBa with opacity */
background: rgba(255, 255, 255, 0.98);
/* For IE 5.5 - 7 
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
*/
/* For IE 8         */
-ms-filter: "alpha(opacity=98)";
/*
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";*/
}

.megamenu-skin-charmante .megamenu-parent-title{
}

.megamenu-skin-charmante .megamenu-slot-title a,
.megamenu-skin-charmante .megamenu-slot-title {
  padding: 0px 5px;
  line-height:120%;
  font-size:17px;
  font-weight:normal;
  /*color: #626363;  PMC grey */
  color: #2e8fc1; /* PMC blue */

}

.megamenu-skin-charmante .megamenu-item a,
.megamenu-skin-charmante .megamenu-item {
  padding: 0px 0px 0px 5px;
  line-height:120%;
  color: #626363; /* PMC grey */
}

I hope this is helpful

regards,
jim

Thanks for your comments! :-)

JimNastic - I have checked the bin width, in total it is less than 960 px - the width of the whole nav bar is 960 and on some drop downs I only have a few elements but the issue still occurs - I am still having strange results!!!

I have attached two screenshots, some of them have worked and are aligning to the right, others not? Seems very strange! Is there something I need to amend for my menu??? Is this something to do with the calculations in the JS? Sorry I cannot code at all so I am a bit clueless really...

Thanks
NB - Is this a lot of work for you? do you need to charge? Let me know

Hi Stacy,
I'm happy to help as much as I can. The problem is I'm really just winging it myself as well. Based on the screenshots, I haven't really got any suggestions. I know it will be difficult to understand, but I would recommend using some debugging tools to track through the javascript and see what is happening. If you are using firefox browser, then install a plug in called firebug.
Here are some steps:
* Open firebug
* Select the "scripts" tab
* use the pull down menu to find the megamenu.js file
* Scroll down to find the section of code you have modified (around line 162)
* In the left you can see each line of code is numbered. When you click on a number you create a "breakpoint". This means that the browser will pause executing the code. It is like freezing the program so you can inspect what it is up to half way through running.
* Place a breakpoint next to the first bit of modified code "if EdgeOverlap...."
* Refresh the page
* Hover the mouse over the various variables in the code and you can see their current value
* Then you can instruct the brower (firebug) to step through the code one line at a time and you can see how the variables change values. You do this by pressing the little arrow. There is also a green play button which is like asking the program to run again until it gets to the end or hits another breakpoint

I know this is a steep learning curve, but I cant suggest much else. Why not give it a try and come back here when you have more questions.

Good luck!
Jim

OK - this is more of an "I just got lucky in my implementation" workaround - but, maybe it could be of use to someone else...
in the megamenu.js file, within the function megamenu_sizer() I replaced the lines:

/* auto bin width start */


			if(megaBins.eq(k).hasClass('megamenu-slots-columnar')) {
				var slotTotalWidth = 0;
					for ( var i=0 ; i < megaSlots.length ; i++ ) {
				
						slotTotalWidth += megaSlots.eq(i).outerWidth(true);
						
						if (slotTotalWidth > $(window).width()) {
							slotTotalWidth = 0;
							for (var j=0 ; j < i ; j++) {
								slotTotalWidth += megaSlots.eq(i).outerWidth(true);				
							}
							break;
						} 	 
					}
					megaBins.eq(k).css( 'width' , slotTotalWidth);
					megaBins.eq(k).width(slotTotalWidth);
			} 
			else {

with the following:

/* auto bin width start */


			if(megaBins.eq(k).hasClass('megamenu-slots-columnar')) {
				var slotTotalWidth = 0;
					if(megaSlots.length > 5) {
					megaBins.eq(k).css('width', 525);
					megaBins.eq(k).width(550);
				} else if(megaSlots.length > 3) {
					megaBins.eq(k).css('width', 250);
					megaBins.eq(k).width(250);
				} else {
					megaBins.eq(k).width(250);
					megaBins.eq(k).css('width', 250);
				}
			} 
			else {

this just happened to work for us with the numbers of items we have in our pull down menus.

basically, if there is more than 5 top level items in a pull down, I get a width of 525; if there is 3 or 4 top level items, I get a width of 250, and anything else defaults to 250 at this point.

Hope this can help someone

You can see it in action here

Jim's hack (#4) working for me. Code lines were changed in dev from 2011-Feb-09 (I think this dev=6.x-2.0-beta1)
I attached patched megamenu.js below

Hi
I have insatlled mega menu module on OpenPublic drupal 7.

Can you please upload the skin you have used.

Thanks
Revathi

Can you please upload the skin you have used(megamenu-skin-coa)

Thanks
Revathi Gajula

Can you please help me with the slot height. white space between the items due to height.

Can you please respond to #17 (related to megamenu issue).

my megamenu works fine with all important browsers without js (for example ie 7 - ie9). only with css. with js the position of the item, which is closest to the border, is wrong calculated and the item is not directly under the main-item (vertical navigation).

So I've done a workaroung in my page.tpl.php:

    // removes the megamenu js-file. because when window is small, the javascript calculates the wrong position of the submenu.
    $scripts = str_replace('    // removes the megamenu js-file. because when window is small, the javascript calculates the wrong position of the submenu.
    $scripts = str_replace('megamenu/megamenu.js', '', $scripts);', '', $scripts);
    print $scripts; 

May someone uses a better idea, which is simple to implement, without using a unstable dev-version.

Thanks JimNastic for your hack at #4.. it works for me..

Look alike a lot of modification done through JS and CSS to make last edge does not overlap with menus. Can feature request to put width or max-width of area these fabulous mega menu fit in?