<![CDATA[ Wayfinder mega menu - My Forums]]> https://forums.modx.com/thread/?thread=25755 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-504651
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>
]]> becstra Jul 25, 2014, 03:20 PM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-504651 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-492006 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

]]> flanger Mar 07, 2014, 07:30 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-492006 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-394393
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


]]> xheight Sep 22, 2011, 11:56 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-394393 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-131509
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]]> okyanet Aug 08, 2011, 09:14 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-131509 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-131508
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
]]> daz-dm Aug 08, 2011, 08:08 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=5#dis-post-131508 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131507 okyanet Aug 06, 2011, 07:09 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131507 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131506
Has anyone else got the solution to work and would like to share their chunks or have a look through mine??

This would be of great help because I’m struggling to make this work after following the solutions.

Thanks

Darren]]> daz-dm Aug 04, 2011, 11:11 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131506 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131505
Let’s see if the snippet works to begin with, just try this (in the parentRowTpl):
[!switch? &get=`[+wf.docid+]` &c1=`1` &do1=`menu1` &c2=`141` &do2=`menu141` &c3=`112` &do3=`menu112` &default=`defaultmenu`!]

It won’t load the chunks but should just display ’menu1’, ’menu141’, etc in the right places.]]> okyanet Jun 14, 2011, 05:17 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131505 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131504 Quote from: lucas at Jun 13, 2011, 01:20 PM

I guess I wasn’t paying attention - you haven’t configured the snippet correctly.

It should be:
[!switch? &get=`[+wf.docid+]` &c1=`1` &do1=`{{menu1}}` &c2=`141` &do2=`{{menu141}}` &c3=`112` &do3=`{{menu112}}` &default=`{{defaultmenu}}`!]


this makes no difference.
The snippet doesnt seems to work when is in config.php file (because it shows the code) and in chunk it doesnt do anything...]]> kudykam Jun 14, 2011, 03:35 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131504 <![CDATA[Re: Wayfinder mega menu]]> https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131503
It should be:
[!switch? &get=`[+wf.docid+]` &c1=`1` &do1=`{{menu1}}` &c2=`141` &do2=`{{menu141}}` &c3=`112` &do3=`{{menu112}}` &default=`{{defaultmenu}}`!]
]]> okyanet Jun 13, 2011, 08:20 AM https://forums.modx.com/thread/25755/wayfinder-mega-menu?page=4#dis-post-131503