Don’t know if this is an appropriate place to post this but I wanted to continue this topic... I have been trying to get this to work with revo and have not had much luck.
Credits to lokust and David Bunk for getting this to work in evo and the only thing I managed to get was 3 days of pulling hairs out!:P
If anyone can help steer me in the right direction i would GREATLY appreciate it
here goes:
1. I created 6 chunks and named them with the prefix mega-----
outerTpl=
<ul id="topnav">[[+wf.wrapper]]</ul>
innerTpl=
categoryFoldersTpl=
<li><a href="[[wf.link]]" class="[[+wf.description]]" title="[[+wf.title]]">[[+wf.linktext]]</a> <div class="sub"> [[+wf.wrapper]]</div></li>
parentRowTpl=
<ul><li><h2><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></h2></li>[[+wf.wrapper]]</ul>
innerRowTpl=
<ul><li><h2><a href="[[+wf.link]]" class="[[+wf.description]]" title="[[+wf.title]]">[[+wf.linktext]]</a></h2></li></ul>
rowTpl =
<li><a href="[[+wf.link]]" class="[[+wf.description]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>
2. i called javascript and css files
<link rel="stylesheet" type="text/css" media="screen" href="mega.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="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>
* the css file is the unaltered mega.css from above
http://www.howsoon.co.uk/products.html David Bunkers example. All parent category items have link attribute rel="category"
my call to start the mess is:
[[Wayfinder? &startId=`0` &level=`3` &outerTpl=`megaouterTpl` &innerTpl=`megainnerTpl` &categoryFoldersTpl=`megacategoryFoldersTpl` $parentRowTpl=`megaparentRowTpl` &innerRowTpl=`megainnerRowTpl` $rowTpl=`megarowTpl`]]
from the example above in evo there is one step I didn’t complete and that was the wayfinder.inc.php line 163 edit:
} elseif ($resource['level'] == 2 && $this->_templates['innerRowTpl']) { // edited : orginal - } elseif ($resource['level'] == 1 && $this->_templates['innerRowTpl']) {
could that be my problem?
EDIT: forgot to mention the problem; the menu is showing in a single row and sub-categories in the tree are showing inline with the parent. There is no hiding of the child categories and definitely no rollover show.
Thanks to all you wayfinder gurus!
