After searching high and low for a mod that would work across browsers, expand to multiple lines, and go 4 levels deep, and keep the root categores sorted right, I decided to create my own. This is based on
http://solardreamstudios.com/learn/css/cssmenus.
This works on 4.0x. It may work on 4.1x with some tweaking.
This uses an unordered list formatted with CSS, so you'll have a link on your front page to all your subcategories, which should boost their pagerank up to whatever pagerank your root level categories are. Just don't expent it to work overnight.
This was tested in IE6(XP), IE7(XP), Firefox (XP&Linux), Konqueror(Linux), Opera (Linux) and Safari (OSX).
First, create the directory 'menu' in your skin1 directory.
Inside that directory create menu.tpl and put in the following:
Code:
<ul id="navmenu">
{section name=l1_cat_num loop=$categories}
{if $categories[l1_cat_num].parentid eq 0}
<li><a href="home.php?cat={$categories[l1_cat_num].categoryid}" alt="{$categories[l1_cat_num].category}">{$categories[l1_cat_num].category}{if $categories[l1_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $categories[l1_cat_num].subcategory_count gt 0}
<ul>
{section name=l2_cat_num loop=$allcategories}
{if $allcategories[l2_cat_num].parentid eq $categories[l1_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l2_cat_num].categoryid}" alt="{$allcategories[l2_cat_num].category}">{$allcategories[l2_cat_num].category}{if $allcategories[l2_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $allcategories[l2_cat_num].subcategory_count gt 0}
<ul>
{section name=l3_cat_num loop=$allcategories}
{if $allcategories[l3_cat_num].parentid eq $allcategories[l2_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l3_cat_num].categoryid}" alt="{$allcategories[l3_cat_num].category}">{$allcategories[l3_cat_num].category}{if $allcategories[l3_cat_num].subcategory_count gt 0}+</a>{else}</a></li>{/if}
{if $allcategories[l3_cat_num].subcategory_count gt 0}
<ul>
{section name=l4_cat_num loop=$allcategories}
{if $allcategories[l4_cat_num].parentid eq $allcategories[l3_cat_num].categoryid}
<li><a href="home.php?cat={$allcategories[l4_cat_num].categoryid}" alt="{$allcategories[l4_cat_num].category}">{$allcategories[l4_cat_num].category}</a></li>
{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul></li>
{/if}{/if}{/section}</ul>
Then create menu.css in the same directory with the following content:
Code:
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 148px; /*For KHTML*/
list-style: none;
}
ul#navmenu:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu li {
float: left; /*For IE 7 lack of compliance*/
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
position: relative;
}
/* Root Menu */
ul#navmenu a {
border: 2px solid #FFF;
border-right-color: #AD9D8A;
border-bottom-color: #AD9D8A;
padding: 0 6px;
display: block;
background: #D2C6B2;
color: #330000;
font: normal 18px/22px Times New Roman, serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #AD9D8A;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #D2C6B2;
color: #330000;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #AD9D8A;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #D2C6B2;
color: #330000;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #AD9D8A;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #D2C6B2;
color: #330000;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #AD9D8A;
color: #FFF;
}
ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 148px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
IE, being what it is, needs a little javascript help. So create menu.js in the same directory.
Code:
navHover = function() {
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
Now edit /skin1/customer/home.tpl to add the new menu.tpl, a link to the CSS and js file. Add the following right before </head>:
Code:
<LINK rel="stylesheet" href="{$SkinDir}/menu/menu.css">
<!--[if gte IE 5.5]>
<script language="JavaScript" src="{$SkinDir}/menu/menu.js" type="text/JavaScript"></script>
<![endif]-->
And replace
Code:
{ include file="customer/categories.tpl" }
with:
Code:
{ include file="menu/menu.tpl" }
Also, you need to add this to the top of your /skin1/customer/home.tpl:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
There, that wasn't so hard, was it?
I don't have a link to an example as I'm still awaiting approval, but you can get a basic idea from the link referenced at the beginning of this post.