WayFinder method for more complex menu?

37 Posts

Darkelve78 Reply #1, 18 years, 1 month ago

I’m trying to make sense of WayFinder... I succesfully made a navigation for my ’main’ categories, but I’ve also got subcategories that have specific markup.

I’m confused as to how I could achieve the following in WayFinder:

- The class ’activepage’ gives the background for the main section a different style (background color)
- each subsection gets a class ’subpage’ ; this styles it a bit differently (e.g. indentation) to differentiate it from its main section
- in the currently ’active’ subsection (actual page you are on), the menu link gets the class ’active’

So to recap:
* the current ’main section’ should get class ’activepage’ in its listitem
* all subsections of the current ’main section’ should get class ’subpage’ in their list items
* the menu link representing the current page inside of the ’subsections’ should get class ’active

Remark: There will only be one ’main section’ that has subsections on a particular page. So there are no multiple main sections+subsections on the same page.

Edit: after thinking it over, because it’s not such a big website, it would be acceptable for me if I had to give the menu link a class myself using e.g. an html editor or the Modx Quick-Editor. I figured out the code to add ’activepage’ (using chunks), so that just leaves putting the ’subpage’ class on the list items that immediately follows the list item with class ’activepage’ .

However, the program has no way of knowing how many subitems there are, so perhaps I should consider re-writing my code and use a nested list for the subsections?

Below the code:

<div id="rightcol">

<ul id="nav">

<li><a href="/.">Home</a></li>
<li class="activepage"><a href="/about /">About Us</a></li>
    <li class="subpage"><a class="active" href="mission.php">Our Mission</a></li>
    <li class="subpage"><a href="history.php">History</a></li>
<li><a href="/infrastructure/">Infrastructure</a></li>
<li><a href="/products/">Products</a></li>
<li><a href="/promotion/">In Promotion</a></li>
<li><a href="/documentation/">Documentation</a></li>
<li><a href="/contact/">Contact</a></li>
<li><a href="../contact/guestbook.php">Guest Book</a></li>
</ul>

</div>

P.S. : Hi!

241 Posts

bob1000 Reply #2, 18 years, 1 month ago

By default, Wayfinder would output your menu something like:

<ul>
<li><a href="/.">Home</a></li>
<li class="active"><a href="/about /">About Us</a>
    <ul>
    <li class="active"><a href="mission.php">Our Mission</a></li>
    <li class="last"><a href="history.php">History</a></li>
    </ul>
</li>
<li><a href="/infrastructure/">Infrastructure</a></li>
<li><a href="/products/">Products</a></li>
<li><a href="/promotion/">In Promotion</a></li>
<li><a href="/documentation/">Documentation</a></li>
<li><a href="/contact/">Contact</a></li>
<li class="last"><a href="../contact/guestbook.php">Guest Book</a></li>
</ul>

This can be achieved by using a simple Wayfinder call:

[[Wayfinder? &startId=`0` &hideSubMenus=`true`]]

Notice how Wayfinder inserts class="active" into the current list items for both main and sub level lists. If you wanted to change that to use your ’activepage’, ’subpage’ and ’active’ classes, you will need to create your own template chunks for each of the menu components. Take a look at the documentation for an explanation of the parameters and chunk options http://www.muddydogpaws.com/development/wayfinder/parameters.html.

Personally, I prefer to use Wayfinder’s default classes and reference them in the CSS to style the menu. So you could change any references to ’activepage’ to just ’active’.

Also notice how the submenus are inside their own <ul> tags. This is the correct way to display a submenu as it is a separate list inside a list. This way, you don’t need the ’subpage’ class, you can reference the submenus in the CSS by using

ul#nav li li {color: red}

Instead of putting the ’active’ class on the submenu link, you can reference the ’active’ class on the submenu list item

ul#nav li li.active {color: blue}

37 Posts

Darkelve78 Reply #3, 18 years, 1 month ago

Thanks for the reply. I suppose I should have done it the ’right’ way... it seems like ModX is about the only CMS that rewards you for doing your code the right way (valid, standards, semantically).

The class on the ’a’ link in the submenu is so I can give the link(s) inside the submenu its own styling. However, I suppose I could use something like this for that as well:


ul li ul li a.active {
background: #000; border: 1px solid #fff;
}

4,205 Posts

dev_cw Reply #4, 18 years, 1 month ago

You can change the class name to be used with the wayfinder assigned classes. Go to the link above and scroll down to almost the end th the section named "Class names to be assigned". With these parameters you can change the nameing of the classes that WF outputs.

So to change "active" to "here" for example, we would add the &hereClass=`here` parameter to the wayfinder call.

One of the coolest class options if the &levelClass:

&levelClass
default: NULL
values: name of class
description: The levelClass will be applied to each item denoting each items level, the level number will be added to the specified class (i.e. level1, level2, level3, etc...)

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

37 Posts

Darkelve78 Reply #5, 18 years, 1 month ago

Maybe a silly question, but how can I specify in Modx or WayFinder where to put a new submenu/nested unordered list?

241 Posts

bob1000 Reply #6, 18 years, 1 month ago

I’m not sure what you mean by this, a simple Wayfinder call should recreate the structure you see in the tree view in the manager. All the sub-pages of a page will be displayed as a sub-menu in the Wayfinder output. You can then use various parameters to show/hide submenus, containers individual documents or limit the number of levels. In your example, did you create the ’Our mission’ and ’History’ pages as child docs of the ’About us’ page?

Try the basic Wayfinder call to start with and play around with the parameters until you get what you want.

[[Wayfinder? &startId=`0`]]

BTW to style links in the submenu, you don’t necessarily have to apply a class to them. You can use the document hierarchy to target the links. So your CSS would be:

ul li ul li.active a {
background: #000; border: 1px solid #fff;
}

The class is moved from the <a> to the <li> (the Wayfinder default). But as with most things in MODx, the flexibility is built in to allow many different methods.

☆ A M B ☆
24,524 Posts

sottwell Reply #7, 18 years, 1 month ago

Wayfinder does it automatically; it’s a mirror of the Document Tree in the manager. Just organize your documents appropriately in the Tree (parent/child relationships).

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

4,205 Posts

dev_cw Reply #8, 18 years, 1 month ago

Quote from: Darkelve78 at Aug 04, 2008, 08:18 AM

Maybe a silly question, but how can I specify in Modx or WayFinder where to put a new submenu/nested unordered list?

Add the wayfinder call to your HTML template in the location you want it to be rendered.

Check out the Beginer’s Guide in the wiki, and also check out the documentation for more information on adding MODx tags to your template.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

37 Posts

Darkelve78 Reply #9, 18 years, 1 month ago

Quote from: sottwell at Aug 04, 2008, 08:57 AM

Wayfinder does it automatically; it’s a mirror of the Document Tree in the manager. Just organize your documents appropriately in the Tree (parent/child relationships).

Yeah thanks, I was wondering if that was what it did.

I did read some documentation, but I’m more of a learn-by-doing guy... this article helped me a LOT:
http://wiki.modxcms.com/index.php/Beginner’s_Guide_to_MODx#Creating_the_Template

Thanks for all the replies so far.

37 Posts

Darkelve78 Reply #10, 18 years, 1 month ago

Hiya,

just a quick update: I used the ’default’ Wayfander call, plus the &hereClass and &hideSubMenus ’parameters’:

[[Wayfinder? &startId=`0` &hereClass=`activepage &hideSubMenus=`true` &levelClass=`level`]]

This meant re-writing my CSS code, but I came to the conclusion that it was probably a good thing, since the CSS for the submenu was a MESS.

I used { display: block; border: 1px solid #000; } on the links inside of the UL’s so I could make them into little ’tabs’. It’s working really well, only I am wondering now: what would be the best way (see code below) to manage the vertical space between the ’link buttons’ ?

<ul>
   <li class="level1">
   <a href="#" title="Tutorial Homepage" >Homepage</a></li>
   <li class="level1 activepage"><a href="index.php?id=2" title="Pagina 2" >Page2</a>
          <ul><li class="level2 activepage"><a href="index.php?id=4" title="Subpage 1" >Subpage 1</a></li>
          </ul>
</li>

<li class="last level1"><a href="index.php?id=3" title="Page 4" >Pagina 4</a></li>
</ul>