[SOLVED] Wayfinder + 3 level vert menu problems

213 Posts

rav3n Reply #21, 18 years, 6 months ago

here’s the complete solution, feel free to use it and make it better. maybe it’s not the best way but at least it works grin

snippet call:

[[Wayfinder? &startId=`78` &level=`3` &outerTpl=`ctl.outer` &innerTpl=`ctl.inner` &parentTpl=`ctl.parent` &innerRowTpl=`ctl.innerRow` &rowTpl=`ctl.row`]]

and chunks:

&outerTpl

<ul id="menu"[+wf.classes+]>
	[+wf.wrapper+]
</ul>

&innerTpl

<ul>
	[+wf.wrapper+]
</ul>

&innerRowTpl

<li [!isParent? &id=`[+wf.docid+]`!]><a href="[+wf.link+]">[+wf.linktext+]</a>
	[+wf.wrapper+] 
</li>

&parentTpl

<li class="sub">[+wf.linktext+]
               <ul>
		[+wf.wrapper+]
                </ul>
</li>

&rowTpl

<li class="sub">[+wf.linktext+]
	[+wf.wrapper+] 
</li>

isParent snippet:

<?php
$id = isset( $id )? $id: $modx->documentIdentifier;
//$child = $modx->getChildIds($id);
$child = $modx->getDocumentChildren($id,1,0,'hidemenu', 'hidemenu=0');
if($child){
	return 'class="fly"';
} else {
return '';
}
?>

and css:

#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:30px; left:20px; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#383431; position:relative; border-top:1px solid #fff;}

#menu li.sub {background:#605d5c;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none;  cursor:pointer; font-weight:bold; text-indent:5px;}


#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}

#menu li.hover {color:#ac8949; z-index:500;}
#menu li.click {color:#ac8949;}

#menu li.click ul {display:block;}
#menu li.click ul li.hover ul, 
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}

#menu li.click ul li.fly {background: #383431 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#524C47;}

#menu li.click ul li.hover ul li {background:#aaa9a9;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}

#menu li.click ul li.hover ul li.fly {background: #aaa9a9 url(frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#ac8949;}
#menu li.click ul li.hover ul li.hover a {color:#000;}

#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}