MovableBlog: Sliding Menu powered by MT

Nuance 2.0

May 30, 2002

This requires PHP (or the ability to do SSI includes) on your server as well as Javascript enabled on the client's browser.

I have it set up as two blogs in MT, one for the links, and one for the blog content.

In the blog content's main index, between the <head> tags, insert this Javascript code:

<script type="text/javascript">
function toggleMenu(currMenu) {
if (document.getElementById) {
thisMenu = document.getElementById(currMenu).style
if (thisMenu.display == "block") { thisMenu.display = "none"
}
else { thisMenu.display = "block" }
return false
}
else { return true }
}
</script>

And the CSS, also between the <head> tags, for the menu looks like this:

<style>
.menu { border-left: 1px #FFFF00 solid;
padding-left: 2px;
display: none; margin-left: 15px; }
<style>

Modify the color in the menu as required.

Just to repeat, all that code was in the main index file of the main blog.

Then create another blog in MT, which will contain the links in your sidebar or wherever you want the menu. Delete all the templates and turn off archiving. Then create a new index template. For mine, I used the filename resources.html. You can choose what you want. (Note that I have the same blog directories as in the main blog.)

The resources.html template in the second blog looks like this:

<MTCategories>
<a href="" onMouseOver="(window.status='toggle
listing');
return true;" onMouseout="window.status=' '"
onClick="return toggleMenu('<$MTCategoryLabel dirify="1"$>')"><u><b><$MTCategoryLabel$></b></u></a>
<br />
<span class="menu" id="<$MTCategoryLabel dirify="1"$>">
<MTEntries sort_by="title" sort_order="descend">
<$MTEntryBody$><br />
</MTEntries>
</span>
</MTCategories>

Every time you want to add a link, the "Main Entry Text" is a simple HTML URL, e.g.:

<a href="http://www.cnn.com/">CNN</a>

Each heading in the menu is an MT category, so make sure you categorize the entry before publishing it.

Now go back to the main blog and insert the following code where you want the menu to appear:

<?php include("resources.html"); ?>

If you don't have PHP but can do SSI includes, then use the following code:

<!--#include virtual="resources.html"-->

(Javascript code taken from JavaScript for the World Wide Web by Tom Negrino and Dori Smith, pp. 290-1)

Posted by Richard at 2:05

Comments

I'm using Opera 6.02, and the sliding menus at http://www.richarderiksson.com/chinablog/ didn't work. Works find in IE 5.5. Is this truly an IE specific trick?

Posted by: amos | June 14, 2002 03:28 PM

It works in Mozilla 1.x, so it's not IE specific. Obviously the code in the book did not consider Opera compatibility.

Posted by: Richard | June 16, 2002 02:02 PM