Wayfinder Configuration / Formatting

Hi, all.

I have a -reasonably- simple site setup and am trying to enhance the menus a little. I have five pages that show up on the default menu including a "Members" link at the end. The Members link bring them to a login page where they can authenticate and activate access to additional pages.

I want to display the links for the additional pages in a menu row below the main row and I want that row to appear / disappear based on whether the user is logged in or not. I have been able to achieve this by making the protected resources children of one of the other main menu links, but that disrupts the flow of the main menu (the children appear and push everything to the left).

I've looked at the MuddyPaws site to see if there were some usable examples there, but they all seem to be for pop-up style menus.

Can anyone provide me with some general direction here?

What you want is called "dropline" or "hybrid drop-down" menu. Here's how I learned to do it (and used this as the basis for the MODx Manager's main menu many years ago). http://alistapart.com/article/hybrid

It's really all in the CSS; you can use some javascript to fancy it up, but it can all be done with CSS.

Thank you for the pointer. I've read through that page and looked at the examples and I think I'm missing something.

Can I leverage this sort of process for Menu Index numbers and let Wayfinder bring the pages into the listing automatically? If not, then this solution doesn't work for me. If so, how do I define which pages should be considered primary and which secondary for the purposes of what row they show up on?

I am not seeing that sort of definition by reading through the page.

Still struggling with this and really haven't gotten anywhere at all with this. If anyone has any additional pointers or tips, I would appreciate them.

Perhaps you can achieve this with little help of extra Login with a seperate Wayfinder call. Just check if user is logged in and show conditional menu.

See: http://rtfm.modx.com/display/revolution20/Users for more information about user stat.

Define which resources belong to the logged in user's group, and simply make them children of the parents they belong to. Wayfinder will show them as dropdowns if you use CSS to create the dropdown menu.

You'll need a rowTpl (usually standard from Wayfinder), wrapped by your outer ul class or Id.

Then you'll make an innerTpl like shown in the Wayfinder docs, and assign your dropdown class to that.

I posted some examples in this thread a couple days back. Hope it helps. https://forums.modx.com/thread/84762/dropdown-menu-creation#dis-post-471006

It's really all about the CSS for the menu, and Login coupled with resource groups and permissions. The menu is the least of your worries, as once you get a menu working it'll show what you tell it to show in your resource tree hierarchy. Displaying the menu items for resource groups is a little tricky, but only because permissions can be tricky.

I'd also take a look at Bob Ray's Subscribe snippet, which is quite handy for subscribing users, and works nicely with Login.

Read through the security documentation here http://rtfm.modx.com/display/revolution20/Security, and also read up on permissions/security at http://bobsguides.com.

Quote from: donquicky at Jul 08, 2013, 04:20 AM

Perhaps you can achieve this with little help of extra Login with a seperate Wayfinder call. Just check if user is logged in and show conditional menu.

See: http://rtfm.modx.com/display/revolution20/Users for more information about user stat.

I don't believe this is what I'm trying to do. I have already created users, assigned them to a group and given a role. The group has access to certain pages, so being logged in to see them is necessary. And, they show up.

But... It's "messy". The protected items (children of a parent) show below the parent. But, they also move all of the other menu items at the same level as the parent over to the right.

What I'm really looking for, I would think, is a way to have "Member Pages" have a drop-down menu from it that would appear with a tap/click, but only when users are logged in. Otherwise, a tap/click on "Member Pages" should show "Log In".

Quote from: frogabog at Jul 08, 2013, 04:59 AM

Define which resources belong to the logged in user's group, and simply make them children of the parents they belong to. Wayfinder will show them as dropdowns if you use CSS to create the dropdown menu.

You'll need a rowTpl (usually standard from Wayfinder), wrapped by your outer ul class or Id.

Then you'll make an innerTpl like shown in the Wayfinder docs, and assign your dropdown class to that.

I posted some examples in this thread a couple days back. Hope it helps. https://forums.modx.com/thread/84762/dropdown-menu-creation#dis-post-471006

It's really all about the CSS for the menu, and Login coupled with resource groups and permissions. The menu is the least of your worries, as once you get a menu working it'll show what you tell it to show in your resource tree hierarchy. Displaying the menu items for resource groups is a little tricky, but only because permissions can be tricky.

I'd also take a look at Bob Ray's Subscribe snippet, which is quite handy for subscribing users, and works nicely with Login.

Read through the security documentation here http://rtfm.modx.com/display/revolution20/Security, and also read up on permissions/security at http://bobsguides.com.

Thanks for the thoughts here, and in the other thread. You lost me on the first piece you posted, however... Why do I need to "wrap" Wayfinder? And, what is my navigation class?

You'll wrap Wayfinder in your main navigation class/id, and then let Wayfinder do the rest as shown in the examples. That id/class isn't going to change, your menu will always need that outer class/id to function. So you don't need Wayfinder to produce it. Just as if you had the menu hard coded, it would always be wrapped with the outer class/id.

See below, Wayfinder is wrapped in the nav id "main_nav".



Sounds like your troubles are actually with the css for the the menu. Wayfinder does what it's told to do. You'll need the css to produce a dropdown instead of adding items to the main row.

What's your menu css say for the (example) .main_nav ul li ul.sublist ? If it doesn't have such a style, you don't have dropdown menus and will need to build your dropdowns with css, or find another menu that does have a dropdown class such as in the example, .sublist.

The MENU section of my CSS is very basic and does not contain any sort of "sublist" definition. Also, my menu is not adding items to the main row - the new items are added to a row below the main row, but their presence impacts the other items on the main row.

Is there someplace I should look for an example of CSS code to define drop downs?