I have been intending to post this later, in my own topic, but perhaps I can post some here unpolished.
Right now, I do have something working that appears to be approximately what you are speaking of...
Unfortunately, I’m not really sure what all will be usefull so I’m going to pretty much post it all
.
Right now this is something under development so alot of the names are not what I will end up w/. somewhat modified from a cssplay flyout example found.
This is in my modX template, (call to menu)
<div id="menubar">
{{menuBarText}}
</div>
This is from chunk ’menuBarText’
<ul id="verticalNav">
<li>
[[Wayfinder? &startId=`0` &level=`3` &parentRowTpl=`main_cssplay_parentRow` &excludeDocs=54,55,56 &outerTpl=`main_cssplay_outer` &innerTpl=`main_cssplay_inner` &rowTpl=`main_cssplay_row` &outerClass=`toplevel` &cssTpl=`flyout` &lastClass=&hereClass=&levelClass=lvl]]
</li>
</ul>
This is from chunk ’main_cssplay_parentRow’
<li [+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<ul class="sub">
[+wf.wrapper+] </ul>
</li>
This is from chunk ’main_cssplay_outer’
<ul class="toplevel">
[+wf.wrapper+] </ul>
This is from chunk ’main_cssplay_inner’
This is from chunk ’main_cssplay_row’
<li[+wf.classes+]><a class="sub2" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>[+TEST+]
(Above, you can see the wayfinder callout to the template variable [+TEST+].)
This template variable TEST is linked to my modX template, but not used in the normal page, only grabbed by the wayfinder menu as needed (if present), on my site, this is in the ’3rd child pages’ of the site
This is from chunk ’flyout’
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/newUMD/flyout2.css" />
This is flyout2.css
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/vertical-list.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menuContainer {width:750px; height:500px; background:url(vertical-list/fashion.jpg); position:relative;}
#verticalNav {
position:absolute;
left:222px;
top:130px;
margin:0;
list-style:none;
font-family:verdana, sans-serif;
float:left;
padding:0 0 0 0;
}
#verticalNav ul.toplevel {
width:153px;
padding:0;
margin:0px 0 0 0;
list-style:none;
}
#verticalNav ul.sub{
padding:0;
list-style:none;
}
#verticalNav table {
border-collapse:collapse;
margin:-1px;
}
#verticalNav ul.toplevel ul.sub {
display:none;
left:-9999px;
width:173px;
}
#verticalNav li.lvl3 {
left:-9999px;
display:none;
}
#veerticalNav ul.toplevel li {
float:left;
width:153px;
}
#verticalNav ul.toplevel li a {
display:block;
width:146px;
padding-left:11px;
height:22px;
line-height:22px;
text-decoration:none;
color:#000;
font-size:9px;
background:#eef011 url(/assets/images/ltrgrey.gif) repeat 157px center;
//border:1px solid #ddd;
//border-width:1px 1px 1px 1px;
border:none;
}
#verticalNav li.lvl3 {
position:absolute;
display:none;
}
#verticalNav li.lvl2 { // testing purposes....
//position:absolute;
margin:0px 0px 0px -61px; // left spacing
}
#verticalNav li.lvl1 {
position: relative;
margin:0px 0px 0px 0px;
padding:0px 0px 2px 11px;
}
#veerticalNav a:hover {
white-space:nowrap;
}
#verticalNav ul.toplevel li a:hover {
color:#069;
filter:alpha(opacity=80);
opacity:.8;
background:#EEE url(/assets/images/ltrlightgrey.gif) repeat 157px center;
}
#veerticalNav ul.toplevel li:hover > a {
color:#069;
filter:alpha(opacity=100);
opacity:1.0;
}
#verticalNav :hover ul.toplevel :hover ul.sub {
position:absolute;
display:inline;
top:0px;
left:214px;
}
#verticalNav :hover li.lvl2 {
}
#verticalNav :hover li.lvl2 a {
}
#verticalNav :hover li.lvl3 {
}
#verticalNav :hover ul.toplevel :hover ul.sub li a {
background:#eee;
background:#000;
color:#FFF;
filter:alpha(opacity=75);
opacity:75;
}
#verticalNav :hover ul.toplevel :hover ul.sub li a:hover {
background:#fff;
color:#069;
filter:alpha(opacity=90);
opacity:90;
}
#verticalNav ul.toplevel ul div.base {
margin:0px 0px 0px -150px;
position:absolute;
left:-9999px;
background:#fff;
border:1px solid #ddd;
padding:0px;
width:340px;
height:310px;
}
#verticalNav ul.toplevel ul div.border {
margin:0px 0px 0px -150px;
position:absolute;
left:-9999px;
background:#515151;
filter: alpha(opacity=60);
width:362px;
height:333px;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base {
top: 15px;
left:-480px;
z-index:2;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.border {
left:-490px;
top:5px;
z-index:2;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {
float:left;
padding:0;
margin:0;
list-style:none;
width:200px;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {
display:inline;
float:left;
width:150px;
height:auto;
padding:0;
margin:0;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {
width:190px;
padding-left:10px;
background:#fff url(vertical-list/dot.gif) no-repeat left center;
color:#000;
border:0;
margin:0;
height:auto;
line-height:18px;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {
color:#069;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base h4 {
color:#888;
font-size:13px;
margin:0;
padding:5px 0 5px 0;
}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base p {
color:#555;
font-size:11px;
margin:0;
padding:0 0 5px 0;
line-height:18px;
}
and finally,
this is the HTML that I put into the ’test’ rich text template variable (on the pages, I wish it to show up)
<div class="border b2"> </div>
<div class="base div">
<h4><img src="assets/images/wm3.jpg" alt="" width="220" height="178" /></h4>
<h4>World Wide Innovator</h4>
<p>We provide blur task.
</p>
<ul>
<li><a href="#url">blur Systems</a></li>
<li><a href="#url">blur</a></li>
<li><a href="#url">blur Systems</a></li>
</ul>
</div>
I hope this can be of any use to you... gluck.
☆ A M B ☆