Hi!
It took me a couple of hours to get a mega menu based on the jquery menu by Soh Tanaka working in modx revolution (thanks sparky) so i decided to put together a little how to.
Here is a demo of the menu:
http://www.teylyn.com/wp-content/uploads/2012/03/mega-dropdown.html
First install wayfinder, jquery and the jquery hoverIntend Plugin.
You need to add a rel="category" to the subcategories of your mega Menu.
Then create these chunks:
topCategoryFoldersTpl
<ul>
<li><h3>[[+wf.linktext]]</h3></li>
[[+wf.wrapper]]
</ul>
topInnerTpl
topOuterTpl
<ul id="topnav">
[[+wf.wrapper]]
</ul>
topParentRowTpl
<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>
<div class="sub">
[[+wf.wrapper]]
</div>
</li>
topRowTpl
<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
This is the Wayfinder call
[[Wayfinder? &startId=`1` &level=`99` &outerTpl=`topOuterTpl` &innerTpl=`topInnerTpl` &categoryFoldersTpl=`topCategoryFoldersTpl` &parentRowTpl=`topParentRowTpl` &innerRowTpl=`topInnerRowTpl` &rowTpl=`topRowTpl` &parentRowTpl=`topParentRowTpl` ]]
here is the Javascript
<script type="text/javascript" src="[[++site_url]]assets/js/jquery.min.js"></script>
<script type="text/javascript" src="[[++site_url]]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;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(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>
and the css
ul#topnav {
margin: 0; padding: 0;
float:left;
width: 100%;
list-style: none;
font-size: 1.1em;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative;
}
ul#topnav li a {
float: left;
height: 44px;
}
ul#topnav li:hover a, ul#topnav li a:hover { background-position: left bottom; }
ul#topnav a {
background: transparent no-repeat;
margin-right:10px;
color:#fff;
text-decoration:none;
}
ul#topnav li .sub {
position: absolute;
top: 44px; left: 0;
background: #444;
padding: 20px 20px 20px;
float: left;
display: none;
}
ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#topnav li .sub ul{
list-style: none;
margin: 0; padding: 0;
width: 180px;
float: left;
}
ul#topnav .sub ul li {
width: 100%;
color: #fff;
}
ul#topnav .sub ul li h3 {
padding: 0; margin: 0;
padding-bottom:8px;
font-size:16px;
font-weight: normal;
color:#ff00ff;
}
ul#topnav .sub ul li h2 a {
padding: 5px 0;
background-image: none;
color: #e8e000;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0; /*--Reset text indent--*/
height: auto;
padding: 7px 0px 7px 0px;
display: block;
text-decoration: none;
color: #fff;
font-size: 13px;
}
ul#topnav .sub ul li a:hover {color: #ddd; background-position: 5px 12px ;}
of course the css needs some styling but as a test it works quite well. I hope this helps anyone how wants to implement this menu as well.
