Learning Movable Type: Expandable List Menus


If you have a lot of content - entries, categories, sidebar information - sooner or later things may begin to look a little cluttered on your weblog. One way to address this is to make some of your lists expandable and collapsible, as I have done with LMT's Table of Contents. There are probably many different ways to do this. I have found one method, based on Javascript, that is simple to implement and appears to work fine, from Bleeding Ego.


1. Upload listmenu.js to your server.

Copy the following script into a new file with a texteditor. Save the script as "listmenu.js". Upload the script to a location within the public directory of your server using an FTP program. (You can also find a copy of this script at Bleeding Ego.)

/*
Expandable Listmenu Script
Author : Daniel Nolan
http://www.bleedingego.co.uk/webdev.php
*/

function initMenus() {
if (!document.getElementsByTagName) return;

var aMenus = document.getElementsByTagName("LI");
for (var i = 0; i < aMenus.length; i++) {
var mclass = aMenus[i].className;
if (mclass.indexOf("treenode") > -1) {
var submenu = aMenus[i].childNodes;
for (var j = 0; j < submenu.length; j++) {
if (submenu[j].tagName == "A") {

submenu[j].onclick = function() {
var node = this.nextSibling;

while (1) {
if (node != null) {
if (node.tagName == "UL") {
var d = (node.style.display == "none")
node.style.display = (d) ? "block" : "none";
this.className = (d) ? "treeopen" : "treeclosed";
return false;
}
node = node.nextSibling;
} else {
return false;
}
}
return false;
}

submenu[j].className = (mclass.indexOf("open") > -1) ? "treeopen" : "treeclosed";
}

if (submenu[j].tagName == "UL")
submenu[j].style.display = (mclass.indexOf("open") > -1) ? "block" : "none";
}
}
}
}

window.onload = initMenus;


2. Add a script reference line to the header of your index or archive template.

In the header section of the templates in which you want the expandable list menu to be used, add the following line:

<script src="http://www.your_web_site.com/path/to/listmenu.js" type="text/javascript"></script>

Replace the "http://www.your_web_site.com/path/to/" with the actual path on your server to the listmenu.js that you uploaded to your server in step one above.

3. Insert your list into your template or document using the following structure:

<ul class="treemenu">
<li class="treenode">
<a href="">Top Level Item</a>
<ul>
<li><a href="">List Item</a></li>
<li><a href="">List Item</a></li>
<li><a href="">List Item</a></li>
<li><a href="">List Item</a></li>
</ul>
</li>
</ul>


Note in particular the lack of a symbol between quotation marks in <a href="">

For example, here is a snippet of code that I use on my Table of Contents template:


<ul class="treemenu">
<li class="treenode">
<a href=""><h2>Beginner Tips</h2></a>
<ul>
<MTEntries category="Beginner Tips" sort_by="title" sort_order="ascend">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />

</MTEntries>
</ul>

<a href=""><h2>Categories</h2></a>
<ul>
<MTEntries category="Categories" sort_by="title" sort_order="ascend">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</ul>
</li>
</ul>

This code requires that you specify each category and give it a name. I've done this with my Table of Contents so that I could list out the contents in the specific order I wanted. If you want to simplify this process and list out your TOC in the ascending order of your categories, try the following code (suggested by Arvind from Movalog):

<ul class="treemenu">
<MTCategories>
<li class="treenode">
<a href=""><h2><MTCategoryLabel></h2></a>
<ul>

<MTEntries><li><a href="<MTEntryPermalink>"><MTEntryTitle>
</a></li></MTEntries>
</ul>

</MTCategories>
</li>

</ul>

4. Add ListMenu stylesheet elements to your stylesheet.

You can style your list by adding some style elements to your stylesheet. See listmenu.css for an example of some css elements to add to your stylesheet from Bleeding Ego. Here are the style elements I've added to the stylesheet for the Table of Contents in LMT:

.treemenu {
margin : 0px 20px;
padding : 10px;
list-style : none;
}

.treemenu h2
color: #004090;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
}

.treemenu UL {
list-style : none;
}

.treemenu LI {
display : inline;
}

.treemenu A {
text-decoration: underline;
}

The best place to add these style elements is at the very bottom of your stylesheet.

(Note the only real problem I encountered with this script was in Safari. The Table of Contents index template still had RSS header information in the header. For some weird reason these lines interfered with the Safari browser when the script was loading for the first time, with the result being a lot of odd text added to the page. Removing the RSS, Atom, and RSD link rel lines from the TOC template resolved the problem.)


Posted by Elise Bauer on September 10, 2004 11:56 AM to Learning Movable Type http://www.learningmovabletype.com/