[B00MER]

Using: http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
(slighty modified of course )

x-cart version: 3.4.9

edit skin1/customer/categories.tpl:

{literal}
<style type="text/css">
.menutitle{
	font-weight:bold;
	background-color:#EEEEEE;
	color:#000000;
	border:1px solid #000000;
	width:160px;
	cursor:pointer;
	margin-bottom: 0px;
	padding:3px;
	margin-left: 5px;
	border-bottom:0px;
}

.bottom{
	margin-left: 5px;
	border-top:1px solid #000000;
	height:1px;
	width:168px;
	padding:0px;
	margin-bottom: 0px;
}

.sub{
	margin-bottom: 0px;
	margin-left: 5px;
	border:1px solid #000000;
	background-color:#FFFFFF;
	color:#000000;
	width:160px;
	padding:3px;
	border-bottom:0px;	
}

.menutitle:hover {
	background-color: #FFFFFF;
	color:#009F67;
	display: block;
	width: 150px;
	padding: 4px 0px;
	margin: 1px;
	TEXT-DECORATION: none;
}
</style>

<script type="text/javascript">


if (document.getElementById){ 
document.write('<style type="text/css">\n')
document.write('.sub{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); 
		if(el.style.display != "block"){ 
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="sub")
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

</script>
{/literal}

{* Keep all menus within masterdiv *}
<div id="masterdiv">

{* loop over root category, nested loop of entire category data to match all root cats *}
{section name=cat_num loop=$categories}
<div class="menutitle" onclick="SwitchMenu('{$categories[cat_num].categoryid}')">{$categories[cat_num].category_name}</div>
<span class="sub" id="{$categories[cat_num].categoryid}">
{section name=subcat_num loop=$categories_data}
{if $categories_data[subcat_num].root_category_name == $categories[cat_num].category && $categories_data[subcat_num].category_name != $categories[cat_num].category_name}	
<li type="square">{$categories_data[subcat_num].category_name}

{/if}
{/section}
</span>
{/section}

{* bottom line *}
<div class="bottom"></div>

</div>

edit include/categories.php:

Comment out the line (just add a # in front of it):

$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));

and add the following underneath it:

$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', 1) as root_category_name from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));

Then go down to the bottom of the file where the "Assign Smarty variables" comment is, underneath it add:

$smarty->assign("categories_data",$categories_data);

Should do the trick, Just keep in mind if you your using a root cat to list products in its not going to be shown or clickable in this menu, all your roots cats MUST have sub cats for it to work properly.

The style sheet and javascript code could be moved elsewhere to the proper places like skin1/skin.css and skin1/customer/home.tpl But I'm leaving it in categories.tpl for ease of implementing.

Also for usuability this should really be keeping up with the root cat id, and somehow triggering it once a link is clicked. So when your under a certain sub category the root category is already expanded upon page refresh. So suggestions welcome.