Hi there,
I had a similar issue as you. After about 1 week and a half of trying, fiddling, attempting i have finally cracked it.
The way i did it was by using the housemenu from houseofnuke.com .
I configured the menu this way:
<Object>
<Token>[HOUSEMENU]</Token>
<Settings>
<Setting>
<Name>Scope</Name>
<Value>-1</Value>
</Setting>
<Setting>
<Name>ShowHome</Name>
<Value>False</Value>
</Setting>
<Setting>
<Name>ShowAdmin</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>IsRecursive</Name>
<Value>True</Value>
</Setting>
<Setting>
<Name>Orientation</Name>
<Value>V</Value>
</Setting>
<Setting>
<Name>Mode</Name>
<Value>D</Value>
</Setting>
<Setting>
<Name>CssElementId</Name>
<Value>HouseMenuNav</Value>
</Setting>
</Settings>
</Object>
To make sure it was set in vertical mode etc etc.
Now i set my stylesheet the way i wanted. THis is what i got:
/* Vertical Menu */
#HouseMenuNav,
#HouseMenuNav ul { /* all lists */
margin: 0;
padding: 0;
list-style-type: none;
list-style: none;
width: 202px;
background:#FFFFFF;
margin-bottom:5px;
}
/*It is important not to set this style as otherwise it will overwrite the currentItem style defined at the bottom#HouseMenuNav li { /* all list items */
/*border:1px solid #666666;*/
/*display:block;
list-style-type: none;
position: relative;
float:left;
width: 200px;
/* hack for MacIE5 to ignore, while other browsers use \*/
/*width: 100%;
_width: 100%; /* width recognized by IE only to handle box model issues */
/* end hack */
/*line-height : 18px; list-style-type:none
}*/
#HouseMenuNav li ul { /* second-level lists */
left: 0;
/*margin-left: 144px;
_margin-left: 142px;
margin-top: -21px;*/
background:#FFFFFF;
background-image:none;
background-repeat:no-repeat;
color:#333333;
/*z-index: 999;*/
display:none;
/*display:block;*/
}
#HouseMenuNav li a
{
border:1px solid #666666;
padding-left:15px;
padding-top:5px;
padding-bottom:2px;
display: block;
width: 200px;
/* hack for MacIE5 to ignore, while other browsers use \*/
_width: 100%; /* width recognized by IE only to handle box model issues */
/* end hack */
color:#990000;
background-image:url('images/bg_blue.gif');
background-repeat:repeat-x;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:small;
font-weight: bold;
opacity: .9;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
#HouseMenuNav li ul a
{
border:1px solid #666666;
display:inline-block;
font-size:small;
font-weight:normal;
background:#FFFFFF;
color:#333333;
width: 200px;
/* hack for MacIE5 to ignore, while other browsers use \*/
_width: 100%; /* width recognized by IE only to handle box model issues */
}
#HouseMenuNav li a:hover {
color: #990000;
background: #F2F2F2;
}
#houseMenuNav iframe
{
display:none;
}
/* Applied to the parent item, if displayed, in either vertical or horizontal
orientation. Must follow other styles. */
/*#houseMenuParentItem a
{ /* all links under the parent item (li) */
/*color:#333333;
background:#FFFFFF;
text-decoration: none;
}*/
/*a#houseMenuNavParentLink
{ /* parent link itself */
/*color:#990000;
background:#FFFFFF;
background-image:url('images/bg_blue.gif');
background-repeat:repeat-x;
text-decoration: none;
border:1px solid #666666;
}*/
#HouseMenuNavItemHome
{
display:none;
}
#HouseMenuNavCurrentItem a:link, #HouseMenuNavCurrentItem a:visited, #HouseMenuSubNavCurrentItem a:link, #HouseMenuSubNavCurrentItem a:visited
{ /* current link itself */
display:block;
color: #990000;
background: #F2F2F2;
}
Then finally the javascript to take care of the menu. Firstly i had to hook into the onload event. So at the bottom of my htm page i added a <script></script>
Then between them i added the script:
if (window.attachEvent) {
window.attachEvent("onload", myFunction);
}
else {
window.addEventListener("DOMContentLoaded", myFunction, false);
}
This allowed me to hook into the onload event. This same technique can be used to hook into any other events you want. So now all i had to do was set myFunction.
This is what i have:
var openLists = [], oIcount = 0;
function myFunction(){
compactMenu('HouseMenuNav',true,''); /*It is possible to add say a +- at the start of the link to show there is a submenu like this: compactMenu('HouseMenuNav', true,
'± ')*/
}
function compactMenu(oID,oAutoCol,oPlMn,oMinimalLink) {
if( !document.getElementsByTagName || !document.childNodes || !document.createElement ) { return; }
var baseElement = document.getElementById( oID ); if( !baseElement ) { return; }
compactChildren( baseElement, 0, oID, oAutoCol, oPlMn, baseElement.tagName.toUpperCase(), oMinimalLink && oPlMn );
}
function compactChildren( oOb, oLev, oBsID, oCol, oPM, oT, oML ) {
if( !oLev ) { oBsID = escape(oBsID); if( oCol ) { openLists[oBsID] = []; } }
for( var x = 0, y = oOb.childNodes; x < y.length; x++ ) { if( y[x].tagName ) {
//for each immediate LI child
var theNextUL = y[x].getElementsByTagName( oT )[0];
if( theNextUL ) {
//collapse the first UL/OL child
theNextUL.style.display = 'none';
//create a link for expanding/collapsing
var newLink = y[x].childNodes[0];
var id = y[x].getAttribute("id");
// var newLink = document.createElement('A');
newLink.setAttribute( 'href', '#' );
// newLink.onclick = new Function( 'clickSmack(this,' + oLev + ',\'' + oBsID + '\',' + oCol + ',\'' + escape(oT) + '\');return false;' );
newLink.onclick = new Function("switchit('" + id + "')");
//wrap everything upto the child U/OL in the link
if( oML ) { var theHTML = ''; } else {
var theT = y[x].innerHTML.toUpperCase().indexOf('<'+oT);
var theA = y[x].innerHTML.toUpperCase().indexOf('<A');
var theHTML = y[x].childNodes[0].innerHTML;
// var theHTML = y[x].innerHTML.substr(0, ( theA + 1 && theA < theT ) ? theA : theT );
// while( !y[x].childNodes[0].tagName || ( y[x].childNodes[0].tagName.toUpperCase() != oT && y[x].childNodes[0].tagName.toUpperCase() != 'A' ) ) {
// y[x].removeChild( y[x].childNodes[0] ); }
}
// y[x].childNodes[0].removeChild('A');
y[x].insertBefore(newLink,y[x].childNodes[0]);
y[x].childNodes[0].innerHTML = oPM + theHTML.replace(/^\s*|\s*$/g,'');
theNextUL.MWJuniqueID = oIcount++;
compactChildren( theNextUL, oLev + 1, oBsID, oCol, oPM, oT, oML );
} } } }
This allows me to go through the document, looking for the sublists, and for each sublist i am adding an href to "#" and also setting the .onclick to switchit(id).
Then all that is left to do is to add the switchit(id) function. THis is simply:
function switchit(list){
var ul = document.getElementById(list);
var listElement=ul.childNodes[2];
if (listElement.style.display=="none"){
listElement.style.display="block";
}
else {
listElement.style.display="none";
}
}
All this does is change the current style for the submenu from display="none" to display="block" to show the submenu
And Voila. Now another Issue i came up with was keeping the submenu open one i have click a submenu item and the new page has loaded. I attempted this through the use of cookies. Which kinda worked but was quite erratic an unreliable. So decided to use the faithfull dnn CurrentItem to determine which menu was current and as such which parent menu had to be opened.
So i added a link to my first main function 'myFunction' keepOpent().
And the keepOpen function is simply:
function keepOpen()
{
if(document.getElementById("HouseMenuNavCurrentItem"))
{
var li = document.getElementById("HouseMenuNavCurrentItem");
var ul = li.parentNode;
ul.style.display="block";
}
}
I determine the parent item from the CurrentItem, and change its display to block. So there you have it!!! Hope this helps someone else the headaches it has caused me ...
Enjoy!