I have a drop-down menu working for levels 1 and 2 but need to add a flyout for level 3. Here is my call and code.
[[Wayfinder?
&startId=`0`
&level=`3`
&outerTpl=`msc.topOuter`
&innerTpl=`msc.inner`
&firstClass=`firstItem`
&lastClass=`lastItem`
&hereClass=`active`
&parentClass=`parent`
]]
msc.topOuter
<ul class="menu">[[+wf.wrapper]]</ul>
msc.inner
<ul>
[[+wf.wrapper]]
</ul>
What do I need to add?
[ed. note: bridgecourt last edited this post 14 years, 1 month ago.]
******************************************
Crawford Paul, Owner
Bridgecourt Inc. www.bridgecourt.com
Proudly using MODX CMS and love it!
Hmmm...well as a guide the minimum for nav styling i would use in a chunk call would be....
[[Wayfinder?
&startId=`0`
&level=`3`
&rowTpl=`wfRow`
&parentRowTpl=`wfParentRow`
&outerTpl=`wfOuter`
&innerTpl=`wfInner`
]]
Chunks would be as follows (roughly)...
wfOuter
<nav >
<ul>
[[+wf.wrapper]]
</ul>
</nav>
wfParentRow (wfRow could be the same)
<li [[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
wfInner
<ul>
[[+wf.wrapper]]
</ul>
does that help?
Styling would obviously be in the css i could send you a sample if you like, but if you already have 2 levels working sounds like you've just about got it.
[ed. note: 9thwave last edited this post 14 years, 1 month ago.]
www.9thwave.co.uk
WEB | DESIGN | PRINT
Thanks, still not seeing anything show up. If you can paste the css I will check it against what I have.
******************************************
Crawford Paul, Owner
Bridgecourt Inc. www.bridgecourt.com
Proudly using MODX CMS and love it!
-
☆ A M B ☆
- 756 Posts
Are you not getting anything in your output? Did you clear your cache to make sure that wan't the reason? Also make sure that the resources are not set to be hidden from the menu if you want them displayed by default through WF.
Evo Revo // Ubuntu, CentOS, Win // Apache 2x, Lighttp (Lighty)
Visit
CharlesMx.com for latest news and status updates.
Level 3 is showing but not flying out. I just takes up the bottom spot of the dropdown. Here is what I have in my css for level 2.
/* Level 2 */
.menu li ul {
background: #e8e9e9 url('../images/topNav-sub-bg.png') top left repeat-x;
position: absolute;
display: block;
height: 0;
overflow: hidden;
}
.menu li:hover ul { /* Should be hover on the li element, but for testing it's like this. */
display: block;
height: auto;
}
.menu li ul li {
float: none;
display: block;
height: auto;
}
.menu li ul li a, .menu li:hover ul li a {
display: block;
padding: .5em 1em;
background: none;
color: #000;
font-size: 14px;
font-family: arial;
height: 18px;
line-height: 18px;
}
.menu li ul li a:hover {
background: url('../images/topNav-sub-hover-bg.png') top left repeat-x;
color: #fffefe;
}
What do I need to add to make level 3 flyout?
******************************************
Crawford Paul, Owner
Bridgecourt Inc. www.bridgecourt.com
Proudly using MODX CMS and love it!
have you got the position:relative for your .menu li
www.9thwave.co.uk
WEB | DESIGN | PRINT
This is resolved now thanks to 9thwave!! It was a problem with the css.
******************************************
Crawford Paul, Owner
Bridgecourt Inc. www.bridgecourt.com
Proudly using MODX CMS and love it!
