Credit for this mod goes to Alltribes, as he posted the original code in this thread:
X-Cart 4.0.x flyout menus
The code is cleaned up a bit, with an additional change to make it show all levels under 4.1.x (the original code, due to how 4.1.x operates, only displayed the categories at your current viewing level)
-----------------
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.
The following code has had it's logic changed slightly from the original, to remove any redundant code & logic statements
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 and $categories[l1_cat_num].categoryid}
<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}+{/if}</a>
{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}+{/if}</a>
{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}+{/if}</a>
{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>
{/if}
</li>
{/if}
{/section}
</ul>
{/if}
</li>
{/if}
{/section}
</ul>
{/if}
</li>
{/if}
{/section}
</ul>
Please note, the css styling below is styled specifically for alltribes.com, the creator of this mod. You'll need to change the styling to match your site
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 make sure this exists at 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">
For 4.1.x compatibility, open /home.php.
Find:
Code:
define('OFFERS_DONT_SHOW_NEW',1);
require "./auth.php";
After, add:
Code:
/* Makes fly-out menus show all levels properly */
define("GET_ALL_CATEGORIES", true);
Cheers