Announcement

**John Ennals** · 26-Sep-2017, 08:30 AM

Hi Mash

I'm struggling to remember everything I did to modify the Mega Menu, but here goes:

Site options > Megamenu > How many sections to show in top menu > 12

I added the following to the foot of the 'Current Stylesheet':

Code:

#mega-menu ul, #brochure-menu ul, #brochure-menu ol {
	line-height:50%;
}
#mega-menu ul li, #mega-menu ul li:hover {
	padding:0px 5px;
	-webkit-flex: 1 1 auto; 
	-moz-flex: 1 1 auto;
	flex: 1 1 auto;
	/* Start of IE Flex box */
	-ms-flex-grow:1;
	-ms-flex-shrink:1;
	-ms-flex-basis:auto;
	/* End of IE Flex box */
}
#mega-menu ul li a, #mega-menu ul li a:hover, #brochure-menu li a {
	width:auto;  
	margin:.5em;
	font-weight:bold;
}
#mega-menu ul li ul {
	width:240px;
	height:1.8em;
}
#mega-menu ul li ul li a {
	font-weight:lighter;
	line-height:150%;
}
#mega-menu ul li div .row, #brochure-menu li div .row {
	height:1.8em;
	padding:0px 0px 5px;
	margin:0px 0px 5px;
	border:0px;
}

I removed all the box styling and shading as per Andrew Gosling's post here: http://community.sellerdeck.com/showthread.php?t=57039

I also did some modifications to improve the look of the drop-down menus:

Place of setting for variable MaxNumDropColumns changed to Section as well as Site.

Site options > Megamenu > Depth of Menu to Display > 2nd Level
Site options > Megamenu > Width of Each Column in px > 240

In Mega Menu Layout, set padding-left:1em (added to Line 41 on my as below):

Code:

$menu = '<div class="thinborder2" style="padding-left:1em; width:' . ($columnWidth + (5 * $numCols)). 'px;" onmouseover="mmCancelCloseTime()" onmouseout="mmCloseTime()" id="tc<actinic:variable name="ListIndex" selectable="false" />">';

And add the thinborder2 class to the stylesheet:

Code:

.thinborder2 {
	border: 1px solid <actinic:variable name="Palette2" />;
}

I've probably left out something really important, but hopefully this will help. Let me know if you want me to dig deeper!

John

**mash** · 26-Sep-2017, 02:30 PM

Thanks John, that is the ticket, much improved.

There is still the problem when the second order is displayed, it does not have a background and the boarder doesn't go round the lot of them.

See image attached. Also attached site image showing the mega menu, managed to get 10 across which is heaps better than before.

I have opted for Norman's Accordion Menu jQuery on the left side bar. Just to improve the menu structure.

The initial idea was to have the Accordion Menu on the left covering the store sections and brochure pages on the top menu. But testing on mobile, it meant the access to the store went to the bottom and only easy access to the brochure pages. So had to change direction.

Any thoughts on the background issue, please let me know.

Thanks Mash

Attached Files

**John Ennals** · 26-Sep-2017, 03:24 PM

One thing I forgot to mention (there may be others):

In Mega Menu Layout I amended Line 91 as below.

Code:

$menu = '<div class="thinborder2" style="padding-left:1em; width:' . ($columnWidth + (5 * $numCols)). 'px;" onmouseover="mmCancelCloseTime()" onmouseout="mmCloseTime()" id="tc'.$MoreLinksIndex.'">';

John

**mash** · 26-Sep-2017, 03:57 PM

It is odd as it misses of the last ones so not calculating the end of the list.

I will have a test site up hopefully by the end of the week, it may be a non problem once up on the server. Currently reviewing in the page preview which can cause some issues.

Fingers cross it will be fine.

Thanks Mash

**John Ennals** · 26-Sep-2017, 04:09 PM

I think Line 91 is the bit that handles the width of the last line. Here's my entire Mega Menu Layout (in case I've missed anything else or your line numbers are different).

Code:

<div id="mega-menu" class="menuFlex">
  <ul>
  <actinic:block php="true" >
    $remainingSections = array();
    <actinic:block type="TopLevelSectionList" >
		<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowSectionInMegaMenu%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3e%20%3cactinic%3avariable%20name%3d%22MaxNumMegaMenuItems%22%20%2f%3e%29" >
		 array_push($remainingSections, '<actinic:variable encoding="perl" value="Mega Menu More Section Links" name="MegaMenu" selectable="false" />');
		</actinic:block> 
      <actinic:block if="%3cactinic%3avariable%20name%3d%22ListIndex%22%20%2f%3e%20%3c%3d%20%3cactinic%3avariable%20name%3d%22MaxNumMegaMenuItems%22%20%2f%3e" >

		
        $kids = array();
		<actinic:block if="%28%3cactinic%3avariable%20name%3d%22MegaMenuDepth%22%20%2f%3e%20%3d%3d%20%272nd%20level%27%29%20%7c%7c%20%28%3cactinic%3avariable%20name%3d%22MegaMenuDepth%22%20%2f%3e%20%3d%3d%20%273rd%20level%27%29" >
	     <actinic:block type="ChildSectionList" >
          <actinic:block if="%3cactinic%3avariable%20name%3d%22IsSectionIncludedInSiteMap%22%20%2f%3e%20%26%26%20%3cactinic%3avariable%20name%3d%22ShowSectionInMegaMenu%22%20%2f%3e" >
	         array_push($kids, '<actinic:variable encoding="perl" value="Mega Menu Sub Section Links" name="MegaMenu" selectable="false" />');
          </actinic:block>
        </actinic:block>
       </actinic:block>
    
		<actinic:block if="%3cactinic%3avariable%20name%3d%22ShowSectionInMegaMenu%22%20%2f%3e" >

        echo '<li><a id="main-link<actinic:variable name="ListIndex" selectable="false" />" href="<actinic:variable encoding="perl" name="SectionHref" />"';
        if (count($kids) > 0) {
        echo ' onclick="mmClick(event, <actinic:variable name="ListIndex" selectable="false" />);" onmouseover="mmOpen(<actinic:variable name="ListIndex" selectable="false" />);" onmouseout="mmCloseTime();"';        }      
		  $sSectionName = strip_tags("<actinic:variable encoding="actinic" name="SectionName" selectable="false" />");		  
        echo '>'.$sSectionName.'</a>';
        if (count($kids) > 0) {
          $iKidsCount = 1;
			 $numKids = count($kids);
			 $numCols = <actinic:variable encoding="perl" name="MaxNumDropColumns" selectable="false" />;
			 
			 //perform some checking to ensure correct items per col/cols per page is set
			 if ($numKids < $numCols) {
			   	$numCols = $numKids;			 
			 }
			$columnWidth = ($numCols * <actinic:variable encoding="perl" name="DropColumnWidth" selectable="false" />);
			
					 
			 //perform checking to see if we have last menu item
          $menu = '<div class="thinborder2" style="padding-left:1em; padding-bottom:1em; width:' . ($columnWidth + (5 * $numCols)). 'px;" onmouseover="mmCancelCloseTime()" onmouseout="mmCloseTime()" id="tc<actinic:variable name="ListIndex" selectable="false" />">';         
			 
			 //create the div rows based on number of UL's versus columns here
			 $menu .= '<div class="row">';
			 
				//loop through each column
				//for ($i=0; $i < $numKids; $i++) {
				foreach ($kids as $kid) {
						$menu .= $kid;
						if ((($iKidsCount % $numCols) == 0) && ($iKidsCount != $numKids)) {
							$menu .= '</div><div class="row">';
						}
						$iKidsCount++;
				}
			 $menu .= '</div>';
          $menu .= '</div></li>';
          echo $menu;
      
        }
        else {
          echo '</li>';
        }
		</actinic:block>
		
      </actinic:block>
  
     
    </actinic:block>
    //
    // include the remaining sections in 'More..' menu
    //
    if (count($remainingSections) > 0) {
       $MoreLinksIndex = <actinic:variable encoding="perl" name="MaxNumMegaMenuItems" selectable="false" /> + 1;
        echo '<li> <a id="main-link'.$MoreLinksIndex.'"';
        echo 'href="#" onclick="return false;" style="cursor: default;" onmouseover="mmOpen('.$MoreLinksIndex.');" onmouseout="mmCloseTime();"';             
		  $sSectionName = '<actinic:variable encoding="perl" name="MoreLinkText" selectable="false" />';		  
        echo '>'.$sSectionName.'</a>';
        if (count($remainingSections) > 0) {
          $iKidsCount = 1;
			 $numKids = count($remainingSections);
			 $numCols = <actinic:variable encoding="perl" name="MaxNumDropColumns" selectable="false" />;
			 
			 //perform some checking to ensure correct items per col/cols per page is set
			 if ($numKids < $numCols) {
			   	$numCols = $numKids;			 
			 }
			$columnWidth = ($numCols * <actinic:variable encoding="perl" name="DropColumnWidth" selectable="false" />);
			
					 
			 //perform checking to see if we have last menu item
          $menu = '<div class="thinborder2" style="padding-left:1em; width:' . ($columnWidth + (5 * $numCols)). 'px;" onmouseover="mmCancelCloseTime()" onmouseout="mmCloseTime()" id="tc'.$MoreLinksIndex.'">';         
			 
			 //create the div rows based on number of UL's versus columns here
			 $menu .= '<div class="row">';
			 
				//loop through each column
				//for ($i=0; $i < $numKids; $i++) {
				foreach ($remainingSections as $kid) {
						$menu .= $kid;
						if ((($iKidsCount % $numCols) == 0) && ($iKidsCount != $numKids)) {
							$menu .= '</div><div class="row">';
						}
						$iKidsCount++;
				}
			 $menu .= '</div>';
          $menu .= '</div></li>';
          echo $menu;
      
        }
        else {
          echo '</li>';
        }
       }          
    </actinic:block>

  </ul>
  </div><div style="clear:left"></div>

**John Ennals** · 26-Sep-2017, 05:05 PM

Sorry, I found something else!

In the Responsive CSS stylesheet (found in Design Library > Theme Stylesheets) I've made the following changes (original values commented out). This starts at Line 275 on my version:

Code:

#mega-menu ul li ul, #brochure-menu li ul, #brochure-menu li ol {
	/*width:9em;*/
	width:240px;
	height:auto;
	margin:0;
	padding:0;
	font-size:1em;
	text-align:left;
}

#mega-menu ul li ul li a, #mega-menu ul li:hover ul li a, #brochure-menu li li a, #brochure-menu li:hover li a {
	/*width:8em;*/
	width:220px;
	min-height:2.3em;
	margin:0;
	padding:0.1em;
	/*text-align:center;*/
	text-align:left;
}

John

**graphicz** · 27-Sep-2017, 01:03 PM

Might have to take the border bottoms out of the #mega-menu ul li ul li, #brochure-menu li li in 'Current Stylesheet':

Commented out here...

Code:

/*#mega-menu ul li ul li, #brochure-menu li li {
	border-bottom:1px dotted <actinic:variable name="Palette1" />;
}
#mega-menu ul li ul li:hover, #brochure-menu li li:hover {
	border-bottom:3px solid <actinic:variable name="Palette1" />;
}*/

**graphicz** · 27-Sep-2017, 03:21 PM

SD takes it upon itself to add an inline height style to the main-link 'a' tags, presumably to allow for folding of the section name.

I have added this to the bottom of my stylesheet:

Code:

[id^="main-link"],[id*="main-link"] {height:auto!Important;}

**mash** · 02-Oct-2017, 11:43 AM

Thanks for the input, it has been very helpful, I have been away since Wednesday so haven't been able to respond.

Hopefully I will have a test site up tomorrow. It has been a bit of a chase through CSS to find all the borders which I have managed to do.

The only thing letting it down is the calculation of final row, if there is 3 items on the next level down, it places a 2 and 1 together which is fine but the singe sub section is cut in half by the border. Once the test site is up you can have a look at it and any suggestion will be brilliant. I guess it is the process of calculating the last row.

The rest has come together really well.

Thanks

**mash** · 02-Oct-2017, 01:49 PM

I put up the test site.

Sub sections are still a mess but getting there slowly.

Thanks M

**John Ennals** · 02-Oct-2017, 10:38 PM

Did you make the additional change I suggested in post #4?

John

**mash** · 03-Oct-2017, 07:08 AM

Yes, I double checked and I did do that step. A lot of messing around so it is easy to get lost in the process, I had done it.

Thanks

**John Ennals** · 03-Oct-2017, 09:54 AM

Hi Mash,

I've had a look at your site (Vegetable menu heading) and the problem with the "Other" drop heading is that it is being included in the same "Row" division as "Onions & Leeks" and "Oriental", and when displayed it wraps round and overlaps the bottom border. Also, some drop headings in the rows above aren't appearing at all. If you look at the first row of Vegetables, you have "Beans & Peas" and "Beetroot & Chard", but Brassicas, Courgettes and Salads aren't displaying although they are present in the html. I think they may be wrapping as with the bottom row, but are being obscured by the following row(s).

So basically all the drop heading rows are wrapping round after the second column.

This may arise from a problem with the script in the Mega Menu Layout that creates the rows and calculates their width. However, the layout I posted is a straight copy-and-paste from my own site, so if you're using that it should work. Might also be worth checking the Mega Menu parameter settings at section level as well (e.g. no. of columns in each drop-down).

I am guessing a bit here so I hope it helps!

John

**mash** · 03-Oct-2017, 10:17 AM

Right, have had another look at this and worked through the settings, I changed the number of columns in each drop down box from 5 to 2. Then increase the maximums links to appear from 5 to 20. And finally changed the width of each column to 240px.

Now it formatted correctly, so your spot John regarding wrapping the text was the cause. I haven't been able to upload a working copy, I am in Paddington station at the moment and upload isn't possible at the moment.

Thanks for the help on it. Much appreciated. M

Announcement

Mega menu - how to improve the number of section on the top menu

Mega menu - how to improve the number of section on the top menu

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment