Im trying here to make all the menu's category to shrink on mouse click, and re-expand on another click, but i have no idead how to do in since the menus are using <-System:menu-> sort of thing, so its basically integrated to the site root, but i would really like to make this happen, but How?

Oh here's a referal of wt im talking, http://apocalypse.dkpsystem.com

You'll want to look at the javascript code that he's using for that. It definitely requires a modification of the menufile.html file such that there is some onClick event that hides the div.

I'll try to thing of an easy-to-follow example.

BTW that acts quite buggy in Firefox. When I open and collapse a menu repeatedly it keeps doubling the size of the menu box.

Yeah, it's pretty finnicky in Firefox. I haven't tried it in IE though.

Noticed that too the other day. I know the issue... Firefox doesn't like making a TBody display = nothing.

This can be handled in a bunch of different ways... namely, don't use TBody, but instead hide a TR array, Or possibly use a Div or Span.

I'll have to fix it at some point soon.

As for IE, it works perfectly.

Try checking out the Stormreavers site, I wanted to do the same thing. There are two different ways you can go really, either edit menu code and create the menus on your own or work with Chops has already put in. Either way the javascript you need is going to be pretty similar.

This is how I changed the menu code that gets called:


<!-- Menu:StartItemList -->
<ul>
<!-- Menu:StartItem -->
<li><a href="<!-- Menu:Link -->"<!--Menu:Popup -->><!-- Menu:LinkName --></li>
<!-- Menu:EndItem -->
</ul>
<!-- Menu:EndItemList -->

<!-- Menu:StartStandAlone -->
<!-- Menu:StandAloneContent -->
<!-- Menu:EndStandAlone -->


Here's the menu code that I use on the site:


<div class="menuHead" onclick="toggleMenu('menuID')">Type Menu Name Here</div>
<div id="menuID" class="hideMenu">
<div class="menuBody">
<!-- Call Menu Here -->
</div>
</div>


And this is the javascript that switches it:

function toggleMenu(objID) {
var ob = document.getElementById(objID).style;
var status = "";

if (ob.display == 'none') {
ob.display = 'block';
} else {
ob.display = 'none';
}
}

There's one more piece that you need to have in order for this to work correctly, and that's in the CSS.


.hideMenu {
display: block;
}


Now here's what's happening. The menuHead item is the tile for each menu. When that gets clicked (called with onClick) it sends the menuID (each one has to be different) I've chosen to the javascript function toggleMenu. The next line down is the tag that actually holds the menuID I just referenced. The javascript function uses the menuID and turns it into a CSS style command using var ob = document.getElementById(objID).style;. Next it checks to see if the menu is open or closed using the 'If' statement. It's saying if the style for that particular menu is set to 'display: none', set it to 'display: block'. Otherwise (if it is already set to 'display: block'), set it to 'display: none'.

Pretty simple, they key thing is to make sure the order that you have in the javascript file is correct compared to the default menu state. If I had wanted everything to be closed from the beginning my .hideMenu class in the CSS would have started out 'display: none'. Then in the javascript file I would have had the if statement reversed, to look like this:

function toggleMenu(objID) {
var ob = document.getElementById(objID).style;
var status = "";

if (ob.display == 'block') {
ob.display = 'none';
} else {
ob.display = 'block';
}
}