Wayfinder Menu help required, spent days ...

30 Posts

vbTrev Reply #1, 15 years, 4 months ago

HI I have the following menu, i have tried and tried and read hours of code, and cannot get it to work...

am using Revo 2.1 RC4

Can someone help with the the code required for the below menu using Wayfinder.

THank you in advanced.

Trev


<ul id="menu-main-nav">
<li><a href="#">Featuresabout this theme</a>
<ul class="sub-menu">
<li><a href="#">Feature</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Feature</a></li>
<li><a href="#">Feature</a></li>
</ul>

</li>

<li><a href="#">Pageslayout templates</a>
<ul class="sub-menu">
<li><a href="#">Pages – jQuery 2</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Pages</a></li></ul>
</li>

<li><a href="_demo-colors/color-autumn.html">Stylescolor variations</a>
<ul class="sub-menu">
<li><a href="#">color</a></li>
<li><a href="#">color</a></li>
<li><a href="#">color</a></li>
<li><a href="#">color</a></li>
<li><a href="#">color</a></li>
</ul>
</li>

<li><a href="template-gallery-3d.html">Galleryvideos & images</a>
<ul class="sub-menu">

<li><a href="#">Gallery</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Gallery</a></li></ul>
</li>

<li><a href="#">Blogarticles & ideas</a></li></ul>

Use our Free Developers API and build SMS in to your customers website or store or application. http://www.VibeActiveMedia.com

30 Posts

vbTrev Reply #2, 15 years, 4 months ago

Ok this is what i have got so far

i have high lighted in red the bit that i think is the problem, if i remove the </li> from the chunk it removes it from the RED location and all the Blue locations, and the red location should be at the bottom by the orange

<ul id="menu-main-nav"><li><a href="#">Menu1</a> <ul class="sub-menu"><li><a href="#" title="Menu1">SUB MENU</a></li>
<li><a href="#" title="Item1">Item4</a></li>
<li><a href="#" title="Item2">Item5</a></li>
<li><a href="#" title="Item3">Item6</a></li>

</ul></li></li>

hope that makes some sense, if you look at the full menu as listed it works out that the </li> should be at the end.

my call is : [[!Wayfinder? &startId=`0` &level=`3` &outerTpl=`cssplay_outerTpl` &innerTpl=`cssplay_innerTpl` &parentRowTpl=`cssplay_parentRow` &rowTpl=`cssplay_row` &hereClass=`active` &activelink=`active` &excludeDocs=`1,45,12,13,10,5` &firstClass=`` &lastClass=`` $selfClass=``]]

Use our Free Developers API and build SMS in to your customers website or store or application. http://www.VibeActiveMedia.com

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 15 years, 4 months ago

What I always do when making up custom chunk tpls for Wayfinder is to first put the default tpl structure into the chunk and get it to display a similar structure to what I want. I’ll use the classname setting parameters as much as possible.

Then I start editing the chunk tpls, adding the extra tags like tags that I need for the styling.

For a very complex menu, I’ll create a working resource with nothing in the template but the most basic HTML and the Wayfinder call so that it’s easy to follow my progress by refreshing the page and using the browser’s View Source feature.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

30 Posts

vbTrev Reply #4, 15 years, 4 months ago

I have tried to do that, i have been using Firebug and have managed to get the menu starting to look right, but one bit is acting weird.

what would you charge to get the menu working? pm me the price if you want

thanks

Trev

Use our Free Developers API and build SMS in to your customers website or store or application. http://www.VibeActiveMedia.com

793 Posts

ottogal Reply #5, 15 years, 4 months ago

Could you cite here your templates [tt]cssplay_outerTpl[/tt] , [tt]cssplay_innerTpl[/tt] , [tt]cssplay_parentRow[/tt] , [tt]cssplay_row[/tt] ?

30 Posts

vbTrev Reply #6, 15 years, 4 months ago

Ok, after many more days im getting there, although the only way so far was to create 1 chunk with the whole thing in,

<ul id="menu-main-nav"
<li class="parent">
<a href="[[+wf.link]]">
<span>
<strong>Heading</strong>
<span class="navi-description">Sub Heading</span>
</span>
</a>
<div class="drop" style="display: block; height: 0px; overflow: hidden; opacity: o;">
<div class="t"></div>
<div [[+wf.classes]]class=c>
<ul class="sub-menu" style="display: block; left: 0px;">
<li class="">
<a href="[[+wf.link]]">
<span>Item 1</span>
</a>
</li>
<li class="">
<a href="[[+wf.link]]">
<span>Item 2</span>
</a>
</li>
<li class="">
<a href="[[+wf.link]]">
<span>Item 3</span>
</a>
</li>
<li class="">
<a href="[[+wf.link]]">
<span>Item 4</span>
</a>
</li>
<li class="">
<a href="[[+wf.link]]">
<span>Item 5</span>
</a>
</li>
</ul>

</div
<div class="b"></div>
</div>
</li>


</ul

if anyone can help me break it down in to proper chunks that would be appreciated.

i have 1 bit that has stumped me.

<div class="drop" style="display: none; height: 0px; overflow: hidden; opacity: 0;">
<div class="t"/></div>
<div class="c">
<div class="b"/></div>
</div>

The problem is when eve i put in the letter c in to the middle class (yes it has to be there) and then check it in firebug it changes it to drop )same class as the parent) in the css i have:

/*---------------------------------------------------------------*/
/* NAVIGATION
/*---------------------------------------------------------------*/
#menu-main-nav li strong {color:#FFF !important;}
#menu-main-nav a span {color:#7D92B9 !important;} /* link color parent level  */
#menu-main-nav a:hover span,
#menu-main-nav li.current_page_item a span,
#menu-main-nav li.current_page_parent a span,
#menu-main-nav li.current-page-ancestor a span,
#menu-main-nav .drop ul li.current-menu-item a,
#menu-main-nav .drop ul li.current-menu-item a span,
#menu-main-nav .drop ul .drop ul li.current-menu-item a,
#menu-main-nav .drop ul .drop ul li.current-menu-item a span{text-decoration:none;color:#FFF !important;} /* A. active link color parent level (see B)  */
#menu-main-nav .drop ul li.current-menu-item a,
#menu-main-nav .drop ul li.current-menu-item a span,
#menu-main-nav .drop ul .drop ul li.current-menu-item a,
#menu-main-nav .drop ul .drop ul li.current-menu-item a span{text-decoration:none;color:#6984AB !important;} /* B. active dropdown link color (if different than A)  */
#menu-main-nav li {background:url(../images/_global/seperator-main-nav.png) 0 50% no-repeat !important;}

/* dropdown */
#menu-main-nav .drop .t {background:url(../images/_global/global-sprite.png) -724px -938px no-repeat !important;}
#menu-main-nav .drop .b {background:url(../images/_global/global-sprite.png) -724px -949px no-repeat !important;}
#menu-main-nav .drop .c, #menu-main-nav li.parent:hover {background:#101E35 !important;}
/* IE only - un-comment for rounded corners 
*:first-child+html #menu-main-nav li.parent:hover {background:url(../images/_global/global-sprite.png) -724px -877px no-repeat !important;} 
*:first-child+html #menu-main-nav li.parent:hover {background-color: none !important;}
*:first-child+html #menu-main-nav li.parent {min-width: 88px !important;width: auto !important;} 
*/

/* dropdown link hover rounded image top */
#menu-main-nav .drop ul li.hover a,
#menu-main-nav .drop ul a:hover {background:#283B67 url(../images/karma-royal-blue/bg-drop-li-t.jpg) no-repeat !important;}
#menu-main-nav .drop ul .drop ul li.hover a,
#menu-main-nav .drop ul .drop ul a:hover {background:#283B67 url(../images/karma-royal-blue/bg-drop-li-t.jpg) no-repeat !important;}
#menu-main-nav .drop ul .drop ul .drop ul li.hover a,
#menu-main-nav .drop ul .drop ul .drop ul a:hover {background:#283B67 url(../images/karma-royal-blue/bg-drop-li-t.jpg) no-repeat !important;}
#menu-main-nav .drop ul .drop ul .drop ul li.current-menu-item a,
#menu-main-nav .drop ul .drop ul .drop ul li.current_page_ancestor a,
#menu-main-nav .drop ul .drop ul .drop ul li.hover a,
#menu-main-nav .drop ul .drop ul .drop ul a:hover {background:#283B67 url(../images/karma-royal-blue/bg-drop-li-t.jpg) no-repeat !important;}

/* dropdown link hover rounded image bottom */
#menu-main-nav .drop ul li.hover a span,
#menu-main-nav .drop ul a:hover span {background:url(../images/karma-royal-blue/bg-drop-li-b.jpg) 0 100% no-repeat !important;color:#FFF !important;}
#menu-main-nav .drop ul .drop ul li.hover a span,
#menu-main-nav .drop ul .drop ul a:hover span {background:url(../images/karma-royal-blue/bg-drop-li-b.jpg) 0 100% no-repeat !important;color:#FFF !important;}
#menu-main-nav .drop ul .drop ul .drop ul li.hover a span,
#menu-main-nav .drop ul .drop ul .drop ul a:hover span {background:url(../images/karma-royal-blue/bg-drop-li-b.jpg) 0 100% no-repeat !important;color:#FFF !important;}
#menu-main-nav .drop ul .drop ul .drop ul li.current-menu-item a span,
#menu-main-nav .drop ul .drop ul .drop ul li.current_page_ancestor a span,
#menu-main-nav .drop ul .drop ul .drop ul li.hover a span,
#menu-main-nav .drop ul .drop ul .drop ul a:hover span {background:url(../images/karma-royal-blue/bg-drop-li-b.jpg) 0 100% no-repeat !important;color:#FFF !important;}

/* misc nav settings */
#menu-main-nav li.current-menu-parent li a span,
#menu-main-nav li.current-menu-item li a span,
#menu-main-nav li.current_page_ancestor li a span,
#menu-main-nav .drop ul a,
#menu-main-nav .drop ul a span,
#menu-main-nav .drop ul .drop ul a,
#menu-main-nav .drop ul .drop ul a span,
#menu-main-nav .drop ul .drop ul .drop ul a,
#menu-main-nav .drop ul .drop ul .drop ul a span,
#menu-main-nav li .sub-menu li .sub-menu li .sub-menu li a span {background:none !important;color: #FFF !important;} /* C. dropdown link color */
.search-header #menu-main-nav .sub-menu a span, .search-header #menu-main-nav .current_page_parent  .sub-menu a span, .error-header #menu-main-nav .sub-menu a span, .error-header #menu-main-nav .current_page_parent  .sub-menu a span {color: #FFF !important;}
#menu-main-nav .drop ul li.current-menu-item ul li a,
#menu-main-nav .drop ul li.current-menu-item ul li a span {color:#FFF !important;} /* D. dropdown link color (match C) */
.search-header #menu-main-nav a span, .search-header #menu-main-nav .current_page_parent a span,
.error-header #menu-main-nav a span, .error-header #menu-main-nav .current_page_parent a span{color:#6984AB !important;}
/* #menu-main-nav li{text-shadow:1px 1px 1px #172D52;} */
#menu-main-nav .sub-menu li {text-shadow:none !important;}

Use our Free Developers API and build SMS in to your customers website or store or application. http://www.VibeActiveMedia.com

793 Posts

ottogal Reply #7, 15 years, 4 months ago

The code you posted makes no sense.
Or you show us the output you want to be created by Wayfinder, or you give us the templates.

Your first "chunk" seems somehow like your wanted output - but if so, then it must not contain parameters like [tt][[+wf.link]][/tt] .
Said this: May be it’s due to copying and pasting, but the code you showed contains svereal syntactical errors.

(1): The outer [tt]<ul>[/tt] and [tt]</ul>[/tt] are missing the final "[tt]>[/tt]".

(2): This is not correct: [tt]<div [[+wf.classes]]class=c> [/tt]
Not only that the c should be enclosed by "" - if you want to add an extra class, you need to use [tt][[+wf.classnames]][/tt] instead of [tt][[+wf.classes]][/tt] and put it this way: [tt]<div class="[[+wf.classnames]] c"> [/tt] (but of course, in the WF template!)

(3): In your second piece of code the slashes in [tt]<div class="t"/></div>[/tt] and [tt]<div class="t"/></div>[/tt] are wrong.

(I have not yet looked over your css style definitions.)

24,544 Posts

BobRay Reply #8, 15 years, 4 months ago

When things get weird, it’s always a good idea to validate the page here: http://validator.w3.org/.

It’s difficult to make invalid HTML code work properly. wink

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting