Sliding Doors Nav Help

Hello
First off, I’m really sorry I have to post here. I try very hard to figure things out on my own and simply cannot wrap my brain around this one. And just so everybody knows, I’ve read the wiki, documentation, and the muddgydogpaw site examples.

I have a fairly simple Sliding Doors Navigation consisting of 3 links, with id="current" for the page you’re on.



Now, when you’re on the home page for example, there are "sub-links". These links below would change if you went to a different Parent page, quite easy to do when creating a site in Dreamweaver.



Now the problem is that I can’t seem to duplicate this with Wayfinder. I’m sure I could do it with manual links, but then if I had a new
parent page or child page I’ll have to change the template, and that doesn’t make sense.

I guess I’m just trying to find some simple explanation on how to do this. Even if you forget about the bottom navigation and just
try and explain how to convert a simple UL into Wayfinder. Every time I do it, all the pages show up, I can’t seem to say "Show only these
certain pages here for the top nav" and then "show these certain pages for the bottom UL.

Any help would be very wonderful.

Sorry again for posting this, I know it’s inconvenient to be asked the same questions over and over.

Wayfinder will make up a menu based on the children of the Id you specify in the &startId= option. Then you can style the resulting menu (an unordered list by default) just as you would any unordered list menu, hiding and showing the nested lists in CSS. To use the Sliding Doors technique, you really need to make up a template for the row items so that you can give a "here" or "active" class to both the <a> and the <li> elements for the image placement.

You can ease the "submenu" display by using &hideSubMenus=`1`; now the only submenu that will be generated is the one for the "active" main menu item.

Okay, I think I’m slowly starting to catch on....

First Off: When I specify $startId = `1` where 1 is my Home page with 2 children, nothing shows up

In Modx I have only 4 pages currently. The Home page has 2 children and the other parent page Portfolio has no children currently.

When I use the following code, I get the Home and Portfolio links.......neither shows as Current or Active, but that can wait.



As for the second div, I’m not really sure what to put in there. I guess I just don’t understand this well enough.

One More Thing
I don’t know if it helps but my CSS rules say this, in a nutshell.
( #nav #current ) has the image for the right active link and ( #nav #current a ) has the image for the left active link
( #nav li ) image left for non-active, and ( #nav a ) image right for non-active

Really sorry if I’m confusing you with all this.......

In your post, you have $startId=`1`; is this just a typo, or is that what you actually used in the Wayfinder call?

In my post I’m saying I tried $startId=`1` and it Did Not wok

However when I use $startId=`0` I do get the parent pages showing

Hopefully that makes sense

[edit]
Sorry, The reason nothing was showing (with &startId=`1`) is because the pages were not published.
i’m an idiot

All right, so I’m making some progress

Using code below, I’m off to a decent start



So Now I just have to change the children links when I click on a different Parent.

And get those darn Active CSS properties to display on the Active Link.

Well, the second Wayfinder call is not necessary; just leave off the &level option, and use the &hideSubMenus=`1` option, and Wayfinder will only generate the submenu for the current (active) main menu item. Then use CSS to style the <li><ul> elements. If you want drop-down, you might also want to use &removeNewLines=`1` to make IE behave better with it.

By default, Wayfinder uses 0 for the startId, so if you put garbage there it will just ignore it and use 0.

Sorry if I’m annoying anyone with this thread but I’m almost there.

At this point I’ve created two chunks...

1. wfOuter = <div id="nav">[+wf.wrapper+]</div>
2. wfInner = <div id="nav2">[+wf.wrapper+]</div>

I’m calling this in my template.....

[[Wayfinder? &startId=`0` &hideSubMenus=`1` &hereClass=`current` &outerTpl=`wfOuter` &innerTpl=`wfInner`]]

And when I View Source at the ouputted Html file, this is what I see......



It’s so close, but it puts DIV 2 inside of the first DIV

It does put the right pages in the right DIV’s though, which is a good start

So, does anyone know why it shoves the Second DIV directly after the first <li>

Because you told it to. The outer tpl is for the first, outer, level of <ul><li></ul> elements, the inner tpl is for the inner levels of <ul><li> elements within that first level.

Try making a very basic nested list menu and play with it a bit, then add templates one at a time until you really understand what it’s doing.

Thanks for your help Susan.

I finally got it working with your advice.

The problem as I’m sure you know was that my Nested List
was not formatted correctly.

Now it works just Dandy!