Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    Hi there,

    I have been searching through the mega menu threads and can't find an answer, I think John Ennals from Tortoys mentioned it once before.

    I have 16 sections, I want to increase the number of sections available on the top menu with out going to a second line.

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

    Currently set to 6 as 7 pushes it to the next line, there are plenty of space, section names are very long so you should get more than 6.

    www.tortoys.co.uk are showing 10 sections
    www.harrisontelescopes.co.uk 10 again slightly wider site, space is ever expanding!

    I haven't managed to bunch it up to increase the number of sections available, clearly it is possible.

    Thanks Mash
    Mash

    #2
    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
    John Ennals
    www.tortoys.co.uk

    Comment


      #3
      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
      Mash

      Comment


        #4
        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
        John Ennals
        www.tortoys.co.uk

        Comment


          #5
          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
          Mash

          Comment


            #6
            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
            www.tortoys.co.uk

            Comment


              #7
              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
              John Ennals
              www.tortoys.co.uk

              Comment


                #8
                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" />;
                }*/
                Jonathan Chappell
                Website Designer
                SellerDeck Website Designer
                Actinic to SellerDeck upgrades
                Graphicz Limited - www.graphicz.co.uk

                Comment


                  #9
                  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;}
                  Jonathan Chappell
                  Website Designer
                  SellerDeck Website Designer
                  Actinic to SellerDeck upgrades
                  Graphicz Limited - www.graphicz.co.uk

                  Comment


                    #10
                    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

                    Comment


                      #11
                      I put up the test site.

                      Sub sections are still a mess but getting there slowly.

                      Thanks M
                      Mash

                      Comment


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

                        John
                        John Ennals
                        www.tortoys.co.uk

                        Comment


                          #13
                          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
                          Mash

                          Comment


                            #14
                            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
                            John Ennals
                            www.tortoys.co.uk

                            Comment


                              #15
                              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
                              Mash

                              Comment

                              Working...
                              X