Success!
Hopefully someone will benefit from the following (and previous) code and explanation.
The following mods will provide a hierarchy (list) of navigation links where the current top level item will be highlighted in CSS and a listing of the sub-categories listed out. If a sub-item or sub-category is currently in view then that particular sub-category will also be highlighted in CSS. This works for 4.15 but I'm not sure how or if it will work with earlier versions.
1) First and foremost, you'll have to modify your categories.php file as per Chris2002's instructions.
POST #32
2) Now you'll have to edit your categories.tpl to output the list of links along with some methods to highlight the links. I found the post that was put up by Dalmuti
POST #28 really helpful. Then I had to do some research and mind numbing experimentation with the changes introduced by the categories.php mod until I got it figured out.
My categories.tpl now looks like this:
Code:
<div id="sidenavcontainer">
{capture name=menu}
{if $active_modules.Fancy_Categories ne ""}
{include file="modules/Fancy_Categories/categories.tpl"}
{assign var="fc_cellpadding" value="0"}
{else}
{if $config.General.root_categories eq "Y"}
<ul>
{foreach from=$categories item=c}
{if $cat eq $c.categoryid || $current_category.parentid eq $c.categoryid}
<li><h3><a class="current" href="home.php?cat={$c.categoryid}">{$c.category}</a></h3></li>
{else}
<li><h3><a href="home.php?cat={$c.categoryid}">{$c.category}</a></h3></li>
{/if}
{assign var=in value=$c.categoryid}
{* CONDITIONAL DROP DOWN ITEMS FROM TOP CATEGORY *}
{if $current_category.parentid eq $c.categoryid || $cat eq $c.categoryid}
{foreach from=$allsubcategories.$in item=c }
{if $cat eq $c.categoryid}
<li><h4><a class="current" href="home.php?cat={$c.categoryid}">{$c.category}</a></h4></li>
{else}
<li><h4><a href="home.php?cat={$c.categoryid}">{$c.category}</a></h4></li>
{/if}
{/foreach}
{/if}
{* /CONDITIONAL *}
{/foreach}
{else}
{foreach from=$subcategories item=c key=catid}
<li><h3><a href="home.php?cat={$catid}">{$c.category}</a></h3></li>
{/foreach}
{/if}
</ul>
{/if}
</div>
3) There is a CSS stylesheet that accompanies this mod and provides some indentation, fonts size and highlighting. I'm using heading tags <h3> & <h4> to provide some semantic sense to the categories and also it lets me indent them and adjust the text as much as I want through the stylesheet.
Categories & Sub-cats are black
Highlighted categories and sub-cats are bright green
Rollovers are red
It goes a little like this:
Code:
/**
* sidenavcontainer is 181px wide and a minimum of 400px high
* It has a little padding top and bottom as well
* Modify it to suit your layout
*/
html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
margin: 0;
padding: 0;
border: 0;
}
#sidenavcontainer {
padding:20px 0 10px 0;
width:181px;
min-height:400px;
float:left;
}
h3{ /* PRODUCT CATEGORIES */
padding:0;
margin:0;
font-size:12px;
font-style:normal;
font-weight:bold;
}
#sidenavcontainer h3 {
margin:0 0 0 30px;
padding:10px 0;
}
h4{ /* PRODUCT SUB-CATEGORIES */
padding:0;
margin:0;
font-size:11px;
font-style:normal;
font-weight:normal;
}
#sidenavcontainer h4 {
margin:0 0 0 40px;
padding:0;
padding-bottom:7px;
}
#sidenavcontainer a {
color:#000000;
text-decoration:none;
}
#sidenavcontainer a:hover {
color:#FF0000;
text-decoration:none;
}
#sidenavcontainer .current {
color:#00FF00;
}
I got a whole lot of help through searching and reading the previous posts about this and I hope this helps someone else too.
Cheers,
Andrew