On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hi Lucas

    Please see my code below

    Chunks

    mega-outerTpl=
    <ul id="topnav">[[+wf.wrapper]]</ul>


    mega-innerTpl=
    [[+wf.wrapper]]


    mega-categoryFoldersTpl =
    <li><a href="[[+wf.link]]" class="[[+wf.description]]" title="[[+wf.title]]">[[+wf.linktext]</a> <div class="sub"> [[+wf.wrapper]]</div></li>


    mega-parentRowTpl =
    <li><h2><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></h2></li>[[+wf.wrapper]]


    mega-innerRowTpl =
    <ul><li><h2><a href="[[+wf.link]]" class="[[+wf.description]]" title="[[+wf.title]]">[[+wf.linktext]]</a></h2></li></ul>


    mega-rowTpl =
    <li><a href="[[+wf.link]]" class="[[+wf.description]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>


    Call to JS =
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/nav.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="assets/js/jquery.hoverIntent.minified.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
        function megaHoverOver(){
            $(this).find(".sub").stop().fadeTo('fast', 1).show();          
            //Calculate width of all ul's
            (function($) {
                jQuery.fn.calcSubWidth = function() {
                    rowWidth = 0;
                    noColumns = 4;
                    //Calculate row
                    $(this).find("ul").each(function() {   
                        maxWidth = ($(this).width() * noColumns);           
                        rowWidth += $(this).width();
                                          if(rowWidth > maxWidth) {
                                         rowWidth = maxWidth;
                                         }
                    });   
                };
            })(jQuery);       
            if ( $(this).find(".row").length > 0 ) { //If row exists...
                var biggestRow = 0;   
                //Calculate each row
                $(this).find(".row").each(function() {                              
                    $(this).calcSubWidth();
                    //Find biggest row
                    if(rowWidth > biggestRow) {
                        biggestRow = rowWidth;
                    }
                });
                //Set width
                $(this).find(".sub").css({'width' :biggestRow});
                $(this).find(".row:last").css({'margin':'0'});         
            } else { //If row does not exist...        
                $(this).calcSubWidth();
                //Set Width
                $(this).find(".sub").css({'width' : rowWidth});    
            }
        }
      
        function megaHoverOut(){
          $(this).find(".sub").stop().fadeTo('fast', 0, function() {
              $(this).hide();
          });
        }
        var config = {   
             sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)   
             interval: 100, // number = milliseconds for onMouseOver polling interval   
             over: megaHoverOver, // function = onMouseOver callback (REQUIRED)   
             timeout: 500, // number = milliseconds delay before onMouseOut   
             out: megaHoverOut // function = onMouseOut callback (REQUIRED)   
        };
        $("ul#topnav li .sub").css({'opacity':'0'});
        $("ul#topnav li").hoverIntent(config);
    });
    </script>


    Wayfinder Call =
    [[Wayfinder? &startId=`0` &level=`3` &outerTpl=`mega-outerTpl` &innerTpl=`mega-innerTpl` &categoryFoldersTpl=`mega-categoryFoldersTpl`  $parentRowTpl=`mega-parentRowTpl` &innerRowTpl=`mega-innerRowTpl` &rowTpl=`mega-rowTpl` &parentRowTpl=`mega-parentRowTpl` &innerClass=`sub`]]
    


    nav.CSS =
    @charset "utf-8";
    /* CSS Document */
    
    /* navigation */
    
    #topnav {
    	margin: 0; 
    	padding: 0 0 0 2px;
    	float:left;
    	width: 100%;
    	list-style: none;
    	font-size: 12px;
    	background-image:url(/assets/img/navBG.png);
    	height: 47px;
    }
    ul#topnav li {
    	float: left;
    	margin: 0;
    	padding: 0;
    	position: relative; /*--Important--*/
    	    border-right: 1px solid #DDDDDD;
    	
    }
    ul#topnav li a {
    	float: left;
    	line-height: 40px;
        padding-left: 8px;
    	padding: 0 20px;
    	height: 42px;
    	color: #373737;
    	text-decoration:none;
    	margin-top:3px;
    }
    
    ul#topnav li a.sub {
    	
    }
    
    ul#topnav li a:hover {
    	color:#F90;
    	background-color:#FFF;
    }
    
    
    
    ul#topnav a.home {
    	background: url(file:///C|/Users/Office%201/Documents/nav_home.png) no-repeat;
    	width: 78px;
    	color: #333;
    }
    ul#topnav a.products {
    	background: url(file:///C|/Users/Office%201/Documents/nav_products.png) no-repeat;
    	width: 117px;
    }
    ul#topnav a.sale {
    	background: url(file:///C|/Users/Office%201/Documents/nav_sale.png) no-repeat;
    	width: 124px;
    }
    ul#topnav a.community {
    	background: url(file:///C|/Users/Office%201/Documents/nav_community.png) no-repeat;
    	width: 124px;
    }
    ul#topnav a.store {
    	background: url(file:///C|/Users/Office%201/Documents/nav_store.png) no-repeat;
    	width: 141px;
    }
    
    ul#topnav li .sub {
    	position: absolute; /*--Important--*/
    	top: 46px; left: 0;
    	z-index: 99999;
    	background: #FFF; /*--Background gradient--*/
    	padding: 20px 20px 20px;
    	float: left;
    	/*--Bottom right rounded corner--*/
    	-moz-border-radius-bottomright: 5px;
    	-khtml-border-radius-bottomright: 5px;
    	-webkit-border-bottom-right-radius: 5px;
    	/*--Bottom left rounded corner--*/
    	-moz-border-radius-bottomleft: 5px;
    	-khtml-border-radius-bottomleft: 5px;
    	-webkit-border-bottom-left-radius: 5px;
    	display: none; /*--Hidden for those with js turned off--*/
    	border:#dddddd solid 1px;
    }
    ul#topnav li .row { /*--If needed to break out into rows--*/
    	clear: both;
    	float: left;
    	width: 100%;
    	margin-bottom: 10px;
    }
    ul#topnav li .sub ul{
    	list-style: none;
    	margin: 0; padding: 0;
    	width: 150px;
    	float: left;
    }
    ul#topnav .sub ul li {
    	width: 100%; /*--Override parent list item--*/
    	color: #fff;
    }
    ul#topnav .sub ul li h2 { /*--Sub nav heading style--*/
    	padding: 0;  margin: 0;
    	font-size: 1.3em;
    	font-weight: normal;
    }
    ul#topnav .sub ul li h2 a { /*--Sub nav heading link style--*/
    	 padding-bottom: 15px;
    	background-image: none;
    	color: #333333;
    	line-height: 15px;
    }
    ul#topnav .sub ul li a {
    	float: none;
    	text-indent: 0; /*--Override text-indent from parent list item--*/
    	height: auto; /*--Override height from parent list item--*/
    	background: url(file:///C|/Users/Office%201/Documents/navlist_arrow.png) no-repeat 5px 12px;
    	padding: 7px 5px 7px 15px;
    	display: block;
    	text-decoration: none;
    	color: #039;
    	line-height:5px;
    }
    ul#topnav .sub ul li a:hover {
    	color: #ddd;
    	background-position: 5px 12px ;/*--Override background position--*/
    	
    }
    
    .inner {
    	float: left;
        list-style: none outside none;
        margin: 0;
        padding: 0;
        width: 150px;
    }
    */
    
    
    /* siteSelect */
    
    #siteSelect {
    	width:400px;
    	float:right;
    	text-indent: -9999px;
    }
    
    
    #hireSite {
    	background: url(/assets/img/live-link.png) no-repeat;
    	width:160px;
    	height: 62px;
    }
    
    #hireSite a:hover {
    	background: url(/assets/img/live-link.png) no-repeat 0px -62px;
    }
    
    #instSite {
    	background: url(/assets/img/install-link.png) no-repeat;
    	width:160px;
    	height: 62px;
    }
    
    #siteSelect li {float:left; list-style:none; display:inline;}
    
    #siteSelect li, #siteSelect a {
    height:62px;
    display:block;
    }
    


    I really appreciate you looking over this.

    I can give you a log in to the site if you require.

    Darren
    • In your Wayfinder call you have $parentRowTpl - change that to &parentRowTpl.

      Otherwise it looks ok at first glance.

      What you should do is code up your basic menu in html only (ie. no Wayfinder), get all your js and css working correctly, then set up all your Wayfinder templates and make it dynamic. That way you can pinpoint where the error is.

      If that doesn’t work, PM me your login and I’ll try to look at it tonight for you smiley
      • OK I am trying to Follow this but I am afraid I am a bit lost. I basically want to do a mega menu that splits a long list into columns on a drop down.

        Using Revo...

        Will the above code @daz-dm work in Revo.

        Is this mega menu only image based?

        I don't need it to be but will work with it if that is how it works.

        Thanks for the help.

        -Sean


        • Hi! I'm also trying to figure this out but without any luck... Did anyone get this mega dropdown menu working in revo?
          Here is a working example of how it should look like:
          http://www.teylyn.com/wp-content/uploads/2012/03/mega-dropdown.html but unfortunately it is not working with the chunks found here... any help is welcome!

          EDIT:
          I got it working now: find my solution here:
          http://forums.modx.com/thread/89514/wayfinder-mega-menu-for-revo-based-on-the-jquery-dropdown-by-soh-tanaka#dis-post-492203

          [ed. note: flanger last edited this post 5 years, 6 months ago.]
            https://www.beautyislife-shop.de - premium make-up!
            https://www.topsterne.de - sell it here!
            ---------------------------------------------------------
          • Ok hopefully someone can help me out here. I am brand new to MODX Evo and I've been tasked with building a mega menu.

            The original HTML mega menu code is below.

            How would I turn this into a mega menu? I have everything set up on my system exactly like daz-dm posted above (just copy/pasted his posted code).

            What do I need to do to get this working? Add pages? Add a menu? I'm a little lost on what's the next step?

            <ul class="jetmenu"><li class="showhide"><span class="title">MENU</span><span class="icon"><em></em><em></em><em></em><em></em></span></li>
              <li class="home">
                <a href="/"><abbr title="National Association of Attorneys General">NAAG</abbr><i class="fa fa-chevron-circle-down"></i></a>
                <ul class="dropdown" style="display: none; width: auto;">
                  <li><a href="#">National Association of Attorneys General</a></li>
                  <li><a href="#">Training and Research</a></li>
                  <li><a href="#">Meetings</a></li>
                </ul>
              </li><li class="open"><a href="#">Menu</a></li>
              <li class="fix-sub"><a href="">About<span class="arrow-up" style="display: none;"></span></a>
                <div class="megamenu full-width" style="display: none; width: auto;">
                  <div class="row">
                    <div class="span-2">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Development</h5></li>
                          <li><a href="#">Website design</a></li>
                          <li><a href="#">ECommerce</a></li>
                          <li><a href="#">Website Maintenance</a></li>
                          <li><a href="#">Web Enhancements</a></li>
                          <li><a href="#">Website Hosting</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="span-2">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Hosting</h5></li>
                          <li><a href="#">Website Hosting</a></li>
                          <li><a href="#">WordPress Hosting</a></li>
                          <li><a href="#">SharePoint Hosting</a></li>
                          <li><a href="#">VPS Hosting</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="span-2">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Design services</h5></li>
                          <li><a href="#">Graphics</a></li>
                          <li><a href="#">Vectors</a></li>
                          <li><a href="#">Business cards</a></li>
                          <li><a href="#">Custom logo</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="span-2">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Web Marketing</h5></li>
                          <li><a href="#">Facebook</a></li>
                          <li><a href="#">Search Engine Marketing</a></li>
                          <li><a href="#">Email Marketing</a></li>
                          <li><a href="#">Optimization (SEO)</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="fix-sub"><a href="">Courses<span class="arrow-up" style="display: none;"></span></a>
                <div class="megamenu full-width grid-12" style="display: none; width: auto;">
                  <div class="row">
                    <div class="span-4">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Development</h5></li>
                          <li><a href="#">Website design</a></li>
                          <li><a href="#">ECommerce</a></li>
                          <li><a href="#">Website Maintenance</a></li>
                          <li><a href="#">Web Enhancements</a></li>
                          <li><a href="#">Website Hosting</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="span-4">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Hosting</h5></li>
                          <li><a href="#">Website Hosting</a></li>
                          <li><a href="#">WordPress Hosting</a></li>
                          <li><a href="#">SharePoint Hosting</a></li>
                          <li><a href="#">VPS Hosting</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="span-4">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Design services</h5></li>
                          <li><a href="#">Graphics</a></li>
                          <li><a href="#">Vectors</a></li>
                          <li><a href="#">Business cards</a></li>
                          <li><a href="#">Custom logo</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>			
              </li>
              <li class="fix-sub"><a href="">Newsletters<span class="arrow-up" style="display: none;"></span></a>
                <div class="megamenu full-width" style="display: none; width: auto;">
                  <div class="row">							
                    <div class="span-4">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Hosting</h5></li>
                          <li><a href="#">Website Hosting</a></li>
                          <li><a href="#">WordPress Hosting</a></li>
                          <li><a href="#">SharePoint Hosting</a></li>
                          <li><a href="#">VPS Hosting</a></li>
                        </ul>
                      </div>
                    </div>
                    <div class="span-4">
                      <div class="inner">
                        <ul>
                          <li class="title"><h5>Design services</h5></li>
                          <li><a href="#">Graphics</a></li>
                          <li><a href="#">Vectors</a></li>
                          <li><a href="#">Business cards</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>							
                </div>				
              </li>
              <li><a href="">Research</a></li>
              <li class="secondary pipe"><a href="">Faculty</a></li>
              <li class="secondary"><a href="">Search</a></li>
              <li class="secondary last login"><a href="">Login</a></li>
            </ul>