本家フォーラムのこちらを見て、mega menuの導入に挑戦しています。
http://modxcms.com/forums/index.php?topic=50255.0
環境
MODx 1.05J-r3
Wayfinder 2.0.2
サーバー ローカル環境（MacでMAMP）
目標はこのように動作させることです。
http://www.howsoon.co.uk/products.html
テンプレートHTML
コード: 全て選択
<script src="[(site_url)]assets/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="[(site_url)]assets/js/jquery.hoverIntent.minified.js" type="text/javascript"></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>
http://www.sohtanaka.com/web-design/meg ... ss-jquery/
こちらのCSSを追加
Wayfinderのconfig
上記の本家フォーラムの#5にあるzipファイルの中にあるものです。
もちろん、#2にある設定も試しました。
コード: 全て選択
<?php
$startId = 0;
$level = 3;
$selfClass = '';
$firstClass = '';
$hereClass = '';
$lastClass = '';
$parentClass ='';
$outerTpl = '@CODE: <ul id="topnav">
[+wf.wrapper+]
</ul>';
$innerTpl = '@CODE:[+wf.wrapper+]';
$categoryFoldersTpl = '@CODE:<li><a href="[+wf.link+]" class="[+wf.description+]" title="[+wf.title+]">[+wf.linktext+]</a>
<div class="sub">
[+wf.wrapper+]
</div>
</li>';
$parentRowTpl = '@CODE:<ul>
<li><h2><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></h2></li>
[+wf.wrapper+]
</ul>';
$innerRowTpl = '@CODE:<ul><li><h2><a href="[+wf.link+]" class="[+wf.description+]" title="[+wf.title+]">[+wf.linktext+]</a></h2></li></ul>';
$rowTpl = '@CODE:<li><a href="[+wf.link+]" class="[+wf.description+]" title="[+wf.title+]">[+wf.linktext+]</a></li>';
?>
HOME、Products、SALE、4th page、5th contentのリンク属性にrel="category"を追加
出力されるhtmlの該当部分
コード: 全て選択
<ul id="topnav">
<li><a href="http://localhost/modx/" class="" title="HOME">HOME</a></li>
<li><a href="/modx/index.php?id=2" class="" title="Products">Products</a>
<div class="sub">
<ul>
<li>
<h2><a href="/modx/index.php?id=12" title="Desktop">Desktop</a></h2>
</li>
<ul>
<li>
<h2><a href="/modx/index.php?id=13" class="" title="Link One">Link One</a></h2>
</li>
</ul>
<ul>
<li>
<h2><a href="/modx/index.php?id=14" class="" title="Link Two">Link Two</a></h2>
</li>
</ul>
</ul>
<ul>
<li>
<h2><a href="/modx/index.php?id=20" title="Server">Server</a></h2>
</li>
<ul>
<li>
<h2><a href="/modx/index.php?id=21" class="" title="子2-1">子2-1</a></h2>
</li>
</ul>
<ul>
<li>
<h2><a href="/modx/index.php?id=22" class="" title="子2-2">子2-2</a></h2>
</li>
</ul>
</ul>
<ul>
<li>
<h2><a href="/modx/index.php?id=16" title="Laptop">Laptop</a></h2>
</li>
<ul>
<li>
<h2><a href="/modx/index.php?id=17" class="" title="子2-1">子2-1</a></h2>
</li>
</ul>
<ul>
<li>
<h2><a href="/modx/index.php?id=18" class="" title="子2-2">子2-2</a></h2>
</li>
</ul>
</ul>
<ul>
<li>
<h2><a href="/modx/index.php?id=25" class="" title="apple">apple</a></h2>
</li>
</ul>
</div>
</li>
<li><a href="/modx/index.php?id=3" class="" title="SALE">SALE</a>
<div class="sub">
<ul>
<li>
<h2><a href="/modx/index.php?id=24" title="SALE ITEMS">SALE ITEMS</a></h2>
</li>
<ul>
<li>
<h2><a href="/modx/index.php?id=6" class="" title="子ドキュメント１">子ドキュメント１</a></h2>
</li>
</ul>
<ul>
<li>
<h2><a href="/modx/index.php?id=7" class="" title="子ドキュメント２">子ドキュメント２</a></h2>
</li>
</ul>
</ul>
</div>
</li>
<li><a href="/modx/index.php?id=4" class="" title="4th page">4th page</a></li>
<li><a href="/modx/index.php?id=5" class="" title="5th content">5th content</a></li>
</ul>
うまく動作しているDEMOがあるだけに、なぜ動かないのか･･･
ぜひ原因を教えてください！
よろしくお願いします。