September 10, 2004
Expandable List Menus
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.)
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:
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:
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:
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):
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:
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.)
Has this tutorial been helpful? Please consider linking to Learning Movable Type at http://learningmovabletype.com/ . Thanks!
If you would like to send a trackback
please use the following URL: http://learningmovabletype.com/cgi-bin/mt32/mt-tb.cgi/331
Following on from Elise's Expandable List Menus tutorial, this is a way to incorporate Sub Category relationships in your Table of Contents or other similar pages.......[read more]
Tracked: September 14, 2004 07:47 AM