MODx Web Development: Creating Lists

Menu details in document properties

Every resource that can be shown in a menu must have the Shown in Menu option enabled in the resource's setting page. The Resource setting page also has two other options related to menus:

modx-web-development-creating-lists-img-0

Menu title—what to show in the menu. The resource title is used, if this value is left blank.

Menu index—when a list of the resources that are to be listed in the menu is created, the menu index can be used to sort the resources in the required order. Menu index is a number, and when creating lists we can specify how we want to use the index.

Authentication and authorization

When creating the list of resources, WayFinder lists only those resources that are accessible by the user depending on the access permissions set for each resource, and the web user group to which the user belongs.

Getting to know WayFinder

WayFinder is a snippet that outputs the structure of the resources as reflected in the resource tree. It creates the lists of all the resources that can be accessed by the current user, from those that been marked as Shown in Menu in the resource properties. Let's try out an exercise to discover WayFinder.

Create a new resource.

Set the name as testing wayfinder.

Choose the template as (blank).

Place the following as the content:
```
[[Wayfinder?startId=`0` ]]
```

Save the document, and then preview it.

You will see a screen like the one shown in the following screenshot:

modx-web-development-creating-lists-img-1

Notice that WayFinder has created a list of all of the resources, even the ones from the sample site. Each item is a link, so clicking on it leads you to the corresponding document. The generated HTML will look like the following example:

<ul><li><a href="http://localhost/learningMODx/" title="Home" >Home</
a></li>
<li><a href="/learningMODx/index.php?id=2" title="Blog" >Blog</a></li>
<li><a href="/learningMODx/index.php?id=15" title="MODx Features"
>Features</a><ul><li><a href="/learningMODx/index.php?id=16"
title="Ajax" >Ajax</a></li>
<li><a href="/learningMODx/index.php?id=22" title="Menus and Lists"
>Menus and Lists</a></li>
<li><a href="/learningMODx/index.php?id=14" title="Content Management"
>Manage Content</a></li>
<li class="last"><a href="/learningMODx/index.php?id=24"
title="Extendable by design" >Extendability</a></li>
</ul></li>
<li><a href="/learningMODx/index.php?id=33" title="Getting Help"
>Getting Help</a></li>
<li><a href="/learningMODx/index.php?id=32" title="Design" >Design</
a></li>
<li><a href="/learningMODx/index.php?id=53" title="Signup Form"
>Signup Form</a></li>
<li><a href="/learningMODx/index.php?id=6" title="Contact Us" >Contact
us</a></li>
<li><a href="/learningMODx/index.php?id=54" title="Getting to know
ditto" >Getting to know ditto</a><ul><li><a href="/learningMODx/index.
php?id=55" title="Sports RSS" >Sports RSS</a></li>
<li><a href="/learningMODx/index.php?id=56" title="Lifestyle RSS"
>Lifestyle RSS</a></li>
<li class="last"><a href="/learningMODx/index.php?id=57" title="IT
RSS" >IT RSS</a></li>
</ul></li>
<li class="last active"><a href="/learningMODx/index.php?id=58"
title="testing wayfinder" >testing wayfinder</a></li>
</ul>

As seen in the preceding output, the generated list is just a set of <ul> and <li> tags. Let's go step-by-step, in understanding how the preceding output can be customized and themed, starting with menus of one level.

Theming

To be able to theme the list generated by WayFinder to appear as menus, we need to understand how WayFinder works in more detail. In this section, we will show you step-by-step how to create a simple menu without any sub-items, and then proceed to creating menus with sub-items.

Creating a simple menu

Since, for now, we only want a menu without any submenu items, we have to show resources only from the top level of the resource tree. By default, WayFinder will reflect the complete structure of the resource tree, including the resources within containers, as seen in the preceding screenshot. WayFinder lets you choose the depth of the list via the &level parameter. The parameter &level takes a value indicating the number of levels that WayFinder should include in the menu. For our example, because we only want a simple menu with no submenu items, &level is set to 1.

Now, let us change the testing wayfinder resource, which we just created, to the following code:

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

Preview the resource now, and you will see that the source code of the generated page in place of Wayfinder is:

<ul><li><a href="http://localhost/learningMODx/" title="Home" >Home</
a></li>
<li><a href="/learningMODx/index.php?id=2" title="Blog" >Blog</a></li>
<li><a href="/learningMODx/index.php?id=15" title="MODx Features"
>Features</a></li>
<li><a href="/learningMODx/index.php?id=33" title="Getting Help"
>Getting Help</a></li>
<li><a href="/learningMODx/index.php?id=32" title="Design" >Design</
a></li>
<li><a href="/learningMODx/index.php?id=53" title="Signup Form"
>Signup Form</a></li>
<li><a href="/learningMODx/index.php?id=6" title="Contact Us" >Contact
us</a></li>
<li><a href="/learningMODx/index.php?id=54" title="Getting to know
ditto" >Getting to know ditto</a></li>
<li class="last active"><a href="/learningMODx/index.php?id=58"
title="testing wayfinder" >testing wayfinder</a></li>
</ul>

Now, if we can just give <ul> and <li> respective classes, we can style them to appear as a menu. We can do this by passing the class names to the parameter &rowClass.

Change the contents of the preceding testing wayfinder to:

<div id="menu">
[!Wayfinder?startId=`0` &level=`1` &rowClass=`menu`!]
</div>

Now, open style.css from the root folder, and change the CSS to the following code. What we are doing is styling the preceding generated list to appear like a menu, by using CSS:

* { padding:2; margin:0; border:1; }
body { margin:0 20px; background:#8CEC81; }
#banner { background: #2BB81B; border-top:5px solid #8CEC81; borderbottom:
5px solid #8CEC81; }
#banner h1 { padding:10px; }
#wrapper { background: #8CEC81; }
#container { width: 100%; background: #2BB81B; float: left; }
#content { background: #ffffff; height:600px; padding:0 10px 10px
10px; clear:both; }
#footer { background: #2BB81B; border-top:5px solid #8CEC81; borderbottom:
5px solid #8CEC81; }
.clearing { clear:both; height:0; }
#content #col-1 {float:left;width:500px; margin:0px;padding:0px;}
#content #col-2 {float:right; width:300px; margin:0px; padding:30px 0
10px 25px; border-left:3px solid #99cc66; height:500px;}
#content #col-2 div {padding-bottom:20px;}
#menu {
background:#ffffff;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 48em;
float: left;
}
#menu ul li {
display: inline;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: inline;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #2BB81B;
text-decoration: none;
}
#menu a:hover {
color: #2BB81B;
background: #fff;
}

Also remember to change the template of the resource to the learning MODx default template.

Now preview the page, and you will see something like the one shown in the following screenshot:

modx-web-development-creating-lists-img-2

The HTML code returned will be similar to the following:

<ul><li class="menu"><a href="http://localhost/learningMODx/"
title="Home" >Home</a></li>
<li class="menu"><a href="/learningMODx/index.php?id=2" title="Blog"
>Blog</a></li>
<li class="menu"><a href="/learningMODx/index.php?id=15" title="MODx
Features" >Features</a></li>
<li class="menu"><a href="/learningMODx/index.php?id=33"
title="Getting Help" >Getting Help</a></li>
<li class="menu"><a href="/learningMODx/index.php?id=32"
title="Design" >Design</a></li>
<li class="menu"><a href="/learningMODx/index.php?id=53" title="Signup
Form" >Signup Form</a></li>
<li class="menu"><a href="/learningMODx/index.php?id=6" title="Contact
Us" >Contact us</a></li>
<li class="menu"><a href="/learningMODx/index.php?id=54"
title="Getting to know ditto" >Getting to know ditto</a></li>
<li class="menu last active"><a href="/learningMODx/index.php?id=58"
title="testing wayfinder" >testing wayfinder</a></li>
</ul>

Notice that for each menu item, the class menu has been applied. Although we have not applied any custom style to the menu class, we have shown you that when you are building more fine-grained menu systems, you have the ability to have every item associated with a class.