The new menu builder WayFinder is ready for Testing

I have completed a new version of the snippet with some new features.

• Ability to set a template & class for a parent doc
• Added default template so you do not need to specify a chunk to get output
• Added newline characters and ability to remove them for easier output code reading
• Modified how output is created to allow for future templating upgrades
• Cleaned up the Wayfinder class for better performance (still needs some tweaking though )

I think thats about it. If anyone can give this a test drive and see if it meets their menu needs it would be appreciated.

Thanks Kyle, I will certainly try this tomorrow. I’ll try to do the css play dropdown menu things with it..

Like this: http://stanginlizard.com/ ?

That’s using the latest Wayfinder and some off John’s code. Will be cleaned up for distribution as a demo. IE sfhover or hoveranything is not yet implmented, so look in FF.

Quote from: rthrash at Jul 20, 2006, 05:16 PM

Like this: http://stanginlizard.com/ ?

Nope, this from Stu Nicholls in CSSPlay

Ahhh... I thought you were referencing Big Johns stuff from PositionIsEverything.net

I’ll say this... WayFinder made matching the required HTML 1000% pain free. This thing rocks.

The addition of the template functionality will be just flat amazing.

Hmm, some problems. I have the same page structure what I’ve posted before and I call wayfinder like this:



I only get the first level returned. Tried to remove &level parameter and also set it to 0, but same results. Here’s what debug prints out on page 1.2.3:

WayFinder Debug Output:
Docids for ’Here’ class checking
56, 1, 61

Chunk Checks
No chunk found for parentRowTpl using default.

No chunk found for innerRowTpl using default.

No chunk found for innerHereTpl using default.

Document Processing
Item Processed: (55) Page 1.1
template: rowTpl | class: class="first" | level: 2
Item Processed: (58) Page 1.2.1
template: rowTpl | class: class="first" | level: 3
Item Processed: (60) Page 1.2.2
template: rowTpl | class: | level: 3
Item Processed: (61) Page 1.2.3
template: hereTpl | class: class="last active" | level: 3
Nesting Complete - Previous 3 level 3 items inserted into innerTpl with class
Item Processed: (56) Page 1.2
template: rowTpl | class: class="parent active" | level: 2
Item Processed: (57) Page 1.3
template: rowTpl | class: class="last" | level: 2
Nesting Complete - Previous 3 level 2 items inserted into innerTpl with class
Item Processed: (1) Page 1
template: rowTpl | class: class="first parent active" | level: 1
Item Processed: (52) Page 2.1.1.1
template: rowTpl | class: class="first" | level: 4
Item Processed: (53) Page 2.1.1.2
template: rowTpl | class: class="last" | level: 4
Nesting Complete - Previous 2 level 4 items inserted into innerTpl with class
Item Processed: (50) Page 2.1.1
template: rowTpl | class: class="first parent" | level: 3
Item Processed: (51) Page 2.1.2
template: rowTpl | class: class="last" | level: 3
Nesting Complete - Previous 2 level 3 items inserted into innerTpl with class
Item Processed: (49) Page 2.1
template: rowTpl | class: class="first parent" | level: 2
Item Processed: (54) Page 2.2.1
template: rowTpl | class: class="first last" | level: 3
Nesting Complete - Previous 1 level 3 items inserted into innerTpl with class
Item Processed: (38) Page 2.2
template: rowTpl | class: class="last parent" | level: 2
Nesting Complete - Previous 2 level 2 items inserted into innerTpl with class
Item Processed: (44) Page 2
template: rowTpl | class: class="last parent" | level: 1
Nesting Complete - Previous 2 level 1 items inserted into outerTpl with class

Chunks contains:

wfHere:
<li class="[+wf.classes+]"><span>[+wf.linktext+]</span></li>

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

wfOuter:
<ul id="nav">
[+wf.wrapper+]
</ul>

wfRow:
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>

Quote from: doze at Jul 21, 2006, 03:05 PM

Chunks contains:

wfHere:
<li class="[+wf.classes+]"><span>[+wf.linktext+]</span>[+wf.wrapper+]</li>

wfRow:
<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

try the chunks above, you need to have the wf.wrapper placholder for submenus.

Quote from: kylej at Jul 21, 2006, 06:01 PM

try the chunks above, you need to have the wf.wrapper placholder for submenus.

Ok, that solved it, thanks! And that needs to be also fixed in the mollio example if it’s going to be released with the snippet. And I can confirm that the example works. Also, you could add the secondary mollio navigation example what I posted on this thread while ago.. I’ll try to make the css only dropdown work now.

Ok, I got the cssplay menus done with Wayfinder and the new parentRowTpl feature. The snippet is shaping to be a very good indeed! Thanks alot Kyle and all involved.

I attached the cssplay menu codes to this post. There is the template.html file what has the snippet call and can be used for quick tests. The snippet call is the same for all menu types. By changin the css filenames at the top of template, you can switch to a different type of menu. These are all pure CSS menus and no javascript done, they all validate and works with FF and IE (didn’t test other browsers, but I’m sure they’ll work with lots of others too).

The menus icluded are: basic dropdown menu, multi level dropdown menu, dropline menu, flyout menu and pull-up menu. By changin the css, you can do some cool things quite easily.

Now some questions:

1. Is it good that the firstClass, lastClass and parentClass defaults to first, last, parent. Why not default to ’’ like the here class. It’s great to have them available, but it seems weird that they are used by default too.

2. Would it be good do have a "cssTpl" paremeter available to define a chunk where users could add the needed css and wayfinder would use regClientCSS to add it to the template?

EDIT: also, there is some minor flaws in the comment texts. In parentRowTpl there is a example to use [+wf.nestedmenu+] placeholder, but it should be [+wf.wrapper+] right? And even smaller note: the example usage call at the bottom of the comments use "wayfinder" as the snippet call, maybe change it to start at capital letter like the snippet name says, so Wayfinder.

Great work doze!

Quote from: doze at Jul 22, 2006, 12:38 PM

1. Is it good that the firstClass, lastClass and parentClass defaults to first, last, parent. Why not default to ’’ like the here class. It’s great to have them available, but it seems weird that they are used by default too.

2. Would it be good do have a "cssTpl" paremeter available to define a chunk where users could add the needed css and wayfinder would use regClientCSS to add it to the template?

1. I think so. These are pretty commonly requested selectors and if your menu doesn’t need them or you don’t have css defined for them, they cause no problems. I might lean towards turning off ’first’ and ’parent’ by default though. hereClass should actually be on by default to ’active’ IMO.

2. Definitely indeed. Might likewise think about doing the same for Javascript as well... for supporting transparency via sleight.js or hover-anything support via suckerfish.

I’ve updated the hover zone drop down menu to work fine in IE now, too. By hover zone, I mean that you can errantly hover off the menus a bit without loosing your menu pop-up, and it’s all done with some clever CSS and innerTpls.

Let’s package these two samples up and get some wider public feedback, what say?