A common question from Movable Type users and designers is, "how do I create nice navigation for my web site?" The Professional Website template set and even Mid-Century have navigation build in. But there are Movable Type themes out there that don't have this feature and users want to know how to add it. This brief tutorial will show you how.
The Objective
The goal of this tutorial is to demonstrate how to add category driven drop-down menus to your web site that approximates the look and feel below:
What does this mean? Well, there are lots of ways to build navigation for a site. The method you will choose depends largely upon your content and implementation strategy. This methods are:
- category driven navigation - using category and sub-category names as the menu and menu item names
- page driven navigation - using page names as the menu and menu item names
- folder driven navigation - using a hierarchy of folders (folders contain pages)
This article will focus on creating menus based upon your category hierarchy.
The HTML <head>
This example utilizes MooTools for the javascript that powers the fancy pull-down nature of the menus. You will need to download and install mootools.js into a js directory. Then you will need to link to the javascript in the html > head of your document like so:
<script src="/js/mootools.js" type="text/javascript"></script>
The CSS
#nav, #nav * {
margin:0;
padding:0;
list-style: none;
}
#nav {
height: 30px;
font-weight:bold;
font-size:14px;
line-height: 30px;
margin:0px 15px;
border:1px solid #ddd;
}
#nav li {
line-height: 30px;
float: left;
list-style:none;
}
#nav li a {
color: #666666;
display: block;
padding: 0 13px;
font-size: 11px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 30px;
border-right:1px solid #ddd;
}
#nav li a:hover {
text-decoration: none;
}
#nav li ul {
position:absolute;
left: -999em;
width:15em;
}
#nav li:hover ul, #nav2 li.sfhover ul {
left:auto;
z-index:10 !important;
}
#nav li ul li {
display:block !important;
width:15em;
border:1px solid #ddd !important;
border-top:none !important;
background:#fff;
}
The JavaScript
Once MooTools is "installed" you need to add the magic sauce that triggers the pull down menus. This should also be in the html > head of your document. Just cut and paste the following into your header:
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
The Template Code
Finally, you need the template code that produces the actual menu:
<ul id="nav">
<mt:TopLevelCategories>
<mt:SubCatIsFirst><mt:HasParentCategory><ul class="children"></mt:HasParentCategory></mt:SubCatIsFirst>
<li class="cat-item">
<mt:IfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"<MTIfNonEmpty tag="MTCategoryDescription"> title="<$MTCategoryDescription$>"</MTIfNonEmpty>>
<$MTCategoryLabel$> (<$MTCategoryCount$>)
</a>
<mt:Else>
<$MTCategoryLabel$>
</mt:IfNonZero>
<mt:SubCatsRecurse>
</li>
<mt:SubCatIsLast><mt:HasParentCategory></ul></mt:HasParentCategory></mt:SubCatIsLast>
</mt:TopLevelCategories>
</ul>
</div><!--/nav-->
Matt
August 16, 2008 11:35 AM | Reply
Nice one Byrne! Thanks
Matt
August 16, 2008 12:21 PM | Reply
Byrne,
Quick question since I've just seen an image in your post... a previous post mentioned that when uploading an image to a folder when making an entry, there is a default thumbnail option selection.
I don't see that option when I upload an image so was wondering if there is a specific plugin which I need to install and if so, which one?
Thanks Matt
Byrne Reese
August 16, 2008 1:20 PM | Reply
@Matt - You will need to have ImageMagick installed in order for MT to generate thumbnails.
Matt
August 17, 2008 12:02 AM | Reply
Thanks Byrne
http://openid.hinn.cn/jackie/
August 18, 2008 4:51 AM | Reply
Who will tell me how to install ImageMagick on Windows Server 2003? I have problem with installing it. I have installed ImageMagick, but the page "mt-check.cgi" said I havn't installed ImageMagick on my server.
MikeT
August 18, 2008 9:24 AM | Reply
You're going to have to research how to get the Perl module for ImageMagick to work on Windows Server. The issue isn't just ImageMagick, but the Perl module.
Richard Benson
August 19, 2008 8:39 AM | Reply
Why do you guys keep putting articles out just as I was thinking of doing one on the same subject? :P
Great tutorial, however I still think there is space for something on a non-JS based version, using folders instead of categories, and also publishing a template set with all this included.
A full CMS template set would be a dream!
Adrian
August 22, 2008 5:05 AM | Reply
I haven't tried this tool yet, but is it possible to have the top level category as a hyperlink? For example,(referring to the image above) click on Entertainment, rather than Gossip or Movies. Thanks!
Byrne Reese
August 22, 2008 9:49 AM | Reply
Absolutely! You are in luck, that is exactly what this example does.
Lola
August 26, 2008 7:16 AM | Reply
Got examples using Folder or Page? I'm setting up a site overview section using the Professional Website template and I want to have drop-down menus. Also, does MT4.21 allow me to have subfolders, for instance, Crafts > Sewing > gallery.html, Crafts > Sewing > current projects.html, etc?
mani
September 30, 2008 12:40 AM | Reply
Hi, First of all thanks to you providing such a nice stuff its really nice article I have learn many article its really simple and easy to implement keep continue posting more stuff
thanks mani
Karl Jacobs
October 21, 2008 5:15 PM | Reply
How can this adapted for use with the new Professional template set?
I'm familiar with the Suckerfish code that the javascript is sourced from, but I'm new to MT, so unsure if this code will apply to the new Professional template set @tag method of creating the top navigation.
Thanks for any help!