Menu assistance requested

I am working on a site that has requested some unique menuing configurations. I have searched and read as many posts about DropMenu as I can and am still scratching my head.

The site in question will have at least three levels of navigation, identified as primary, secondary, and tertiary navigation. They will be centered around 7-8 primary pages, with each primary page having various secondary and tertiary pages linked to them.

The site design calls for a horizontal primary navigation that runs across the top of the page. On each of these primary pages, the site design calls for secondary navigation to be located in a vertical orientation running down the left hand side of the page. Because the design already has the primary navigation across the top of the page, the secondary navigation along the left hand side of the page would be ONLY the navigation elements relative to that primary section.

For example, if the primary navigation consisted of "Home, Primary1, Primary2, Primary3, etc.", when you click on "Primary1", you would be presented with an overview document relative to "Primary1" and secondary navigation down the left hand side of the page such as "Primary1Sub1, Primary1Sub2, Primary1Sub3, etc."

I have figured out rather easily how to force DropMenu to output a one level deep primary navigation and how to output it in a horizontal orientation. I have not figured out how to force DropMenu to output a one level deep secondary navigation that was relative only to the primary navigation page a viewer was on.

To complicate matters, the site design calls for dropdown and flyout menus that list the secondary and tertiary links from both the primary, horizontal navigation menu and the secondary, vertial navigation menu.

Is the solution to have DropMenu output an entire menu two times and then control the display characteristics using CSS based on a horizontal or vertical orientation? What configuration data do I supply to the DropMenu call to allow me to do this?

An example site map/heirarchy would really be tremendously helpful here.

You’ll need to call DropMenu twice, once for the horizontal menu and once for the vertical menu. The "startDoc" for the vertical menu will vary depending on the document you are on, so I would recommend using a TV to contain that snippet call. That way you can edit the call as necessary on each page. I would use @INHERIT, and set the startDoc value in each top-level document to its own document ID. All of its children would then inherit that value.

As far as the drop-down and pop-out sections go, that’s just basic CSS. There are a ton of tutorials explaining how to do that.

Ryan, the site map would look like this:

Home
Primary1
> Primary1Sub1
> > Primary1Sub1Tert1
> > Primary1Sub1Tert2
> Primary1Sub2
> > Primary1Sub2Tert1
> > Primary1Sub2Tert2
> Primary1Sub3
Primary2
> Primary2Sub1
> Primary2Sub2
> Primary2Sub3
Primary3
> Primary3Sub1
> Primary3Sub2
> Primary3Sub3

When listed on the page, you see across the top:

"Home | Primary1 | Primary2 | Primary3"

If you click on "Primary1", the same navigation is at the top, but on the left hand side you see:

"Primary1Sub1"
"Primary1Sub2"
"Primary1Sub3"

If you mouseover "Primary1Sub1" you get CSS flyouts for "Primary1Sub1Tert1" and "Primary1Sub1Tert2", etc.

Susan, you mentioned finding the StartDoc ID for the child documents. Is this something like what "UltimateParent" does?

I realize there tons of tutorials out there, but where can I find ones pertinent specifically to MODx. It would be so much easier to create brilliant, vivid MODx-generated sites if there were more detailed examples that stated "Use DropMenu with these configuration settings, naming your DIVs, ULs and LIs similar to this, and the CSS configuration similar to this."

I am trying to build a site in a production environment using MODx as the engine. It was my suggestion to use MODx. But this also means I don’t have forever and a day to learn all the nuances of every snippet’s configuration. That is why I am seeking assistance. MODx looks like a very powerful CMS solution, but if that power is only known to the developers and not communicated to a growing community, then all the power in the world doesn’t matter.

DropMenu generates a basic nested unordered list. It can be styled in any way you want. And everybody wants it styled in a different way, so it is a little difficult to say "Do it this way."

As far as the doc ID to use, if you are in the Primary1 section, then use Primary1’s document ID, in Primary2, use Primary2’s document ID.

Create a new TV. Name it SideMenu. Set its default value to @INHERIT. Check the box next to your template name to give its documents access.

In your template, use the [*SideMenu*] tags as the startDoc value in your side DropMenu call:

[[DropMenu?startID=`[*SideMenu*]`&levelLimit=`2`]]

For each of the top level documents, edit the SideMenu TV and just put that document’s ID.

Now that document will have the menu displaying its children, and all of its children will inherit the same menu.

Repeat for each top-level document.

You don’t have to edit any of the lower level documents, because they will inherit the value from their parent.

Quote from: sottwell at Jun 12, 2006, 02:30 PM

DropMenu generates a basic nested unordered list. It can be styled in any way you want. And everybody wants it styled in a different way, so it is a little difficult to say "Do it this way."

Yeah, I do understand that.

As far as the doc ID to use, if you are in the Primary1 section, then use Primary1’s document ID, in Primary2, use Primary2’s document ID.

Create a new TV. Name it SideMenu. Set its default value to @INHERIT. Check the box next to your template name to give its documents access.

Do I need to change any of the other settings when creating the TV, like is it "Text"?

In your template, use the [*SideMenu*] tags as the startDoc value in your side DropMenu call:

[[DropMenu?startID=`[*SideMenu*]`&levelLimit=`2`]]

For each of the top level documents, edit the SideMenu TV and just put that document’s ID.

When I load the top level document for editing, I scroll down to the TV edit box. Do I just replace "@INHERIT" with the document number and save?

Now that document will have the menu displaying its children, and all of its children will inherit the same menu.

Repeat for each top-level document.

You don’t have to edit any of the lower level documents, because they will inherit the value from their parent.

It all seems pretty straight forward. Other than the questions I posed above I think I got it.

I have been reviewing the CSS drop down and fly out example at http://www.positioniseverything.net/css-dropdowns.html. It appears they use quite a bit of custom coding to make the elements behave as they want, such as individualized z-index settings as well as setting the last navigation element to fly out to the left rather than to the right because of a problem with horizontal scroll bars. While all of this is quite easily edited on static navigation systems, can DropMenu handle such invidualized coding tweaks to control the output?

Susan, I think I have confused myself somehow because of the results I am getting.

I did as you suggested creating the TV, then editing my template call to Dropmenu and then editing the parent documents to have the correct StartDoc ID number in the TV edit box for SideMenu. I have verified that the TV SideMenu is properly inserting the StartDoc ID relative to the documents by inserting [*SideMenu*] in the template and watching its output.

When it runs, it is outputting the menus exactly as if DropMenu was called unconfigure. The whole menu is there, all the children are there, it is no different. I was expecting to see a menu generated specific to the parent document, instead I am getting the entire menu.

Can you post your [[DropMenu...]] call?

Quote from: sottwell at Jun 12, 2006, 11:53 PM

Can you post your [[DropMenu...]] call?

[[DropMenu?startID=`[*SideMenu*]`&levelLimit=`2`]]

I’m awfully sorry... that should be startDoc, not startID!