Tree/collapse menu isn't working-pops down empty menu items

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:24

Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Monday January 14 2008 - 21:59:40 GMT

I'm sure it is a simple issue but it is driving me crazy

http://clients2.serverside.net/serverside/

The middle navigation first item, Capabilities, pops the space for the sub menu but no items are there. Can anyone help me?

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Tuesday January 15 2008 - 3:50:20 GMT

Hi,

OK, depending on the response to these questions, I can most likely fix the problem/

1. Is this going to be the only menu that opens as a treemenu? If not I'll need to see all of them to figure out if I can fix it.

2. Will it be a treemenu on all pages?

You should be aware that the collapse menu & treemenu are NOT in release, though many people use the collapse one [the one you are using] with no problem. In most instances it works without issues, but because there are some issues, i.e. you cannot have a url in the item that also opens the tree/collapsed menu.

Anyway, I need that information in 1 and 2 to be able to explain how / if you can fix this.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Tuesday January 15 2008 - 16:10:43 GMT

Ruth wrote:

Hi,

OK, depending on the response to these questions, I can most likely fix the problem/

1. Is this going to be the only menu that opens as a treemenu? If not I'll need to see all of them to figure out if I can fix it.

no.. any of the menu items could potentially have this treemenu setup for submenus...

Ruth wrote:

2. Will it be a treemenu on all pages?

no.. only for the homepage

Ruth wrote:

You should be aware that the collapse menu & treemenu are NOT in release, though many people use the collapse one [the one you are using] with no problem. In most instances it works without issues, but because there are some issues, i.e. you cannot have a url in the item that also opens the tree/collapsed menu.

The only reason I went with it is becuase it does what I need it to do. If the product isn't ready then I probably shouldn't use it I guess

Ruth wrote:

Anyway, I need that information in 1 and 2 to be able to explain how / if you can fix this.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Tuesday January 15 2008 - 16:18:32 GMT

Hi,

Well, if it is only on that page, then you probably won't have a problem.

nwilcox wrote:

The only reason I went with it is becuase it does what I need it to do. If the product isn't ready then I probably shouldn't use it I guess

That depends. There seem to be a lot of people who use it with no problems. The only time I get help questions on it has to do with someone trying to do some weird layout / design / functioning. Those who use it for just basic menu functions seem to have no problem. Given you are going to use it only on that one page, it probably won't be a problem, however, if you could explain what it is you're trying to do, there might be another solution.

I'll post back in about an hour with how to set it up so you see the submenu.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Tuesday January 15 2008 - 16:59:11 GMT

Hi Ruth

No weird stuff going on in this test below. The only thing on this test page is the menu and it clearly isn't working right. Now I don't know if I'm screwing up the data file somehow or what. Does my src page have to be named "collapse_data.js"? Maybe that is the issue?

EDIT.. that didn't do anything, just changed it and nothing happened.

http://clients2.serverside.net/serverside/menu.html

Here is the menu put out by itself. For example, Capabilites should pop down the treemenu items. It pops down the space needed but none of the links show up

Thanks!

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Tuesday January 15 2008 - 17:41:35 GMT

Hi,

The problem is that with a tree/collapse menu all the menus which have to do with the tree menu, i.e. main tree and its subs, must be in the same file. So, in this case you would need 3 files since you said any and all would have to be able to have trees in them. THis is what I did to give you a start. I'll explain below and you can figure the best way for you since you know the menus and what you are doing better than I.

1. this will be your menu div on the page now.

Code:

<DIV id=homeMenu style="CLEAR: both; MARGIN-BOTTOM: 10px; HEIGHT: 240px"><!-- Begin Milonic Menu Scripts -->
<SCRIPT language=JavaScript src="milonic_src.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript type=text/javascript>
    // Milonic DHTML Website Navigation Menu Version 5.0
   // Copyright 2006 (c) Milonic Solutions Limited (UK). All Rights Reserved.
   // Please visit http://www.milonic.com/ for more information.    
   if(ns4)_d.write("<scr"+"ipt language=JavaScript src='mmenuns4.js'></scr"+"ipt>");
   else _d.write("<scr"+"ipt language=JavaScript src='mmenudom.js'></scr"+"ipt>");
</SCRIPT>

<SCRIPT language=JavaScript src="menu_data.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript src="treemenu.js" 
type=text/javascript></SCRIPT>
<!-- End Milonic Menu Scripts -->
<DIV 
style="FLOAT: left; WIDTH: 236px; HEIGHT: 210px; BACKGROUND-COLOR: #4e4433">
<SCRIPT language=JavaScript src="managedHosting_data.js" type=text/javascript></SCRIPT>
</DIV>
<DIV 
style="FLOAT: left; WIDTH: 237px; HEIGHT: 210px; BACKGROUND-COLOR: #688340">
<SCRIPT language=JavaScript src="menuDevelopment_data.js" type=text/javascript></SCRIPT>
</DIV>
<DIV 
style="FLOAT: left; WIDTH: 237px; POSITION: relative; HEIGHT: 210px; BACKGROUND-COLOR: #475b52"><!--[if gte IE 5.5]><![if lt IE 7]>
<STYLE type=text/css>#lblLoginMessage IMG {
   FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
#lblLoginMessage {
   DISPLAY: inline-block
}
#lblLoginMessage {
   FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/lbl_loginmessage.png')
}
</STYLE>
<![endif]><![endif]-->
<DIV id=lblLoginMessage 
style="Z-INDEX: 1000; LEFT: 5px; POSITION: absolute; TOP: 40px"><IMG height=18 
src="lbl_loginmessage.png" width=188></DIV>
<SCRIPT language=javascript type=text/javascript src="clientPortal_data.js">
<!--   
                           
function toggleLogin(showHide) {               
if (showHide) {
document.getElementById("lblLoginMessage").style.display = 'block';
} else {
document.getElementById("lblLoginMessage").style.display = 'none';
}
}

function checkobject(obj) {
if (document.getElementById(obj)) { 
return true; 
} else { 
return false; 
}
}

//-->
</SCRIPT>
</DIV>
<DIV style="CLEAR: both">
<SCRIPT language=javascript type=text/javascript>
<!--   
with(milonic=new menuname("MenuWhy")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("title=Why host with us?;status=Why host with us?;image=btn_whyhost_off.gif;overimage=btn_whyhost_over.gif;showmenu=MenuWhyHostHome;");
aI("title=Why develop with us?;status=Why develop with us?;image=btn_whydevelop_off.gif;overimage=btn_whydevelop_over.gif;showmenu=MenuWhyDevelopHome;");
aI("title=Why be a happy client?;status=Why be a happy client?;image=btn_whybeclient_off.gif;overimage=btn_whybeclient_over.gif;showmenu=MenuWhyBeClientHome;");
}
drawMenus();
//-->
</SCRIPT>
</DIV>

2. these are the new 3 menu files, actually there are 4 which I'll explain below. Note that any of these files which have treemenus in them will have to have both the main tree and any submenus that open from the main tree menu kept together in their file.

a. Manage hosting data file

Code:

with(milonic=new menuname("MenuManagedHosting")){
style=menuStyleManagedHosting;
alwaysvisible=1;
menuwidth="236px";
orientation="vertical";
position="relative";
aI("itemwidth=236px;title=MANAGED HOSTING;status=MANAGED HOSTING;image=btn_hosting_over.gif;url=mangedhosting.aspx;");                                          
aI("type=disabled;image=spacer.gif;imageheight=5;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Ektron Hosting;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Managed Services;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Dedicated Solutions;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Case Studies/Testimonials;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Facilities;url=");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Requests For Quotation (Hosting);url=");            
}
drawMenus();

b. menuDevelopment data file [this has the tree with its sub in it.]

Code:

with(milonic=new menuname("MenuDevelopment")){
style=menuStyleDevelopment;
alwaysvisible=1;
menuwidth="237px";
orientation="vertical";
position="relative";
aI("itemwidth=237px;title=DEVELOPMENT;status=DEVELOPMENT;image=btn_development_over.gif;url=development.aspx;");
aI("type=disabled;image=spacer.gif;imageheight=5;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Capabilities;showmenu=MenuCapabilitiesHome;type=tree;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Our Process;url=http://www.milonic.com/mylicenses.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Partnerships;url=http://www.milonic.com/myinvoices.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Portfolio;url=http://www.milonic.com/reqsupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=How We Work;url=http://www.milonic.com/mysupport.php;");
aI("rawcss=padding:0 12px 0 12px;itemheight=17px;text=Requests For Quotation (Development);url=http://www.milonic.com/mydetails.php;");      
}               

with(milonic=new menuname("MenuCapabilitiesHome")){
style=menuStyleDevelopmentSub;
margin=AllMargin;
aI("image=arrow_sub.gif;rawcss=padding:0 12px 0 24px;itemheight=17px;text=Content Management System;url=http://www.milonic.com/login.php;");
aI("image=arrow_sub.gif;rawcss=padding:0 12px 0 24px;itemheight=17px;text=E-Commerce Systems Integration;url=http://www.milonic.com/login.php;");
aI("image=arrow_sub.gif;rawcss=padding:0 12px 0 24px;itemheight=17px;text=.net, ASP, SQL, Flash;url=http://www.milonic.com/login.php;");
}
drawMenus();

c. clientPortal menu data

Code:

with(milonic=new menuname("MenuClientPortal")){
style=menuStyleClientPortalInactive;
alwaysvisible=1;
menuwidth="237px";
orientation="vertical";
position="relative";
aI("itemwidth=237px;title=CLIENT PORTAL;status=CLIENT PORTAL;image=btn_clientportal_ia_over.gif;url=clients.aspx;");
aI("type=disabled;image=spacer.gif;imageheight=5;");
aI("pointer=default;rawcss=padding:0 12px 0 12px;itemheight=17px;text=Check Your Email;");
aI("pointer=default;rawcss=padding:0 12px 0 12px;itemheight=17px;text=View Your Site Statistics;");
aI("pointer=default;rawcss=padding:0 12px 0 12px;itemheight=17px;text=Update Your Account;");
aI("pointer=default;rawcss=padding:0 12px 0 12px;itemheight=17px;text=Send a Support Request;");
aI("pointer=default;rawcss=padding:0 12px 0 12px;itemheight=17px;text=FAQâ€™s;");
aI("pointer=default;rawcss=padding:0 12px 0 12px;itemheight=17px;text=Knowledge-Base;");
aI("pointer=default;rawcss=padding:0 12px 0 12px;itemheight=17px;text=Site Development Project Page;");                           
}                     
drawMenus();

3. The 4th new file is actually the menu_data file without the menuCapabilitiesHome menu in it. That is now in the file with its parent menu.

So, this 4th menu file is the file with all the styles and submenus that are not treemenus which have submenus.

I tested this in IE6, FF1.5, NN7, 9, and Safari3 for pc and it works fine.

There is one thing I need to mention for you to keep in mind. It seems you have the placed those bottom items as a separate menu below the other three. It looks nice, but you will have a problem for anyone who comes to the site using any browser or an IE browser with accessibility set for a larger font size. If the person increases font size, then the 3 menus will increase in size shifting down and they will go behind that menu you have at the bottom. It was why I had set those items up in each menu at the start, so if a user changes font size that item will shift with the rest.

Hope this helps.

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Tuesday January 15 2008 - 18:05:59 GMT

fantastic! Loooks great Ruth thanks a bunch...

last thing and I'm outta here. If you reload the link and see it working, now I want to use images for the sub items but the iamge is slammed over to the left. I want to space it out horizontal but not vertically so imagepadding setting won't work. Can I use rawcss with the image padding as well or should I just make the image a certain width to get it over where I need it?

The arrows need to be right up next to each sub menu item.

Thanks

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Tuesday January 15 2008 - 18:26:54 GMT

Hi,

The quick fix would be to set that submenu as margin=5; which will shift it 5 pixels in. Make sure you change the rawcss left from 24 to 20 to compensate. Actually, I think it kind of looks nice like that, puts that 5 px top and bottom between that submenu and the above and below item.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Tuesday January 15 2008 - 18:30:05 GMT

okay I'll give that a try and play around with it some more.

again thank you so much for your help. The placement of the menu and menu items into the single file was something I wouldn't have ever tried. :oops:

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Tuesday January 15 2008 - 18:39:57 GMT

Hi,

I also found a solution for the accessibility and font size issue with regard that bottom menu. Set a zindex into the 'main' menus of the top 3. I set it as zindex=1; in that menuDevelopment main menu to test it. This way if the font size increases, or if there are more items added to the submenus of the tree style one, when you click for the collapse submenu it will shift that whole bottom menu down. The only problem is the two divs on the right and left side don't get larger when you expand the tree one in the center. Of course they do get the same size when font size is changed. It is only when you click the treemenu to expand the sub that they don't and in those instances the bg colors of those 'menus' don't go down to be as long as the center one.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Wednesday January 16 2008 - 15:33:38 GMT

Hi Ruth... okay I've got the home page looking fantastic... thanks for your help with that.

One last question and I think the know the answer. Is it possible to put a tree menu submenu within a pop-down menu?

http://clients2.serverside.net/serversi ... on=content

Capabilities again under development. I've set it to type=tree but nothign happens. If I turn the type back to normal it pops out to the side like normal.

I'm guessing you probably can't mix and match menu types like this but I wanted to give it a try.

Thansk again!

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Wednesday January 16 2008 - 17:54:34 GMT

Hi,

No, not in that order. You can open a sub onmouseover from a tree but not the other way around. I'm not a programmer, most of what I figure out or 'assume' is based on testing and experimenting and seeing how things work. So, I believe 'assume' that the reason is that the treemenu does something to the menu container which has the tree items in order to make it increase in height to contain the submenus instead of creating another outside container.

So if you need to have that treemenu, then what you need to do is go to a setup like before with 3 divs side by side and each div containing its own 'main' menu. I can set something up for you if you would like...

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Wednesday January 16 2008 - 20:00:22 GMT

okay so it'd be very similar to what we did before? If you coudl show me an example that would be great. That is the last thing I need to do.

EDIT: okay I've split them out in separate menus... but again nothing changed. Is this not possible?

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Wednesday January 16 2008 - 23:09:29 GMT

Hi,

DUH :oops:

Ignore my previous post. I worked and worked on this, and finally found that if I had paid attention to the files the first time out, I could have answered you in 5 minutes.

You can set up a treemenu in a submenu, the reason yours didn't work is you didn't call the treemenu.js file.

But...., as always there is a but. If you do that, the capabilities menu once opened will stay opened. If the person happens to move the mouse off the MenuDevelopment main item that opened the submenu which has the link to the treemenu in it you will only see the treemenu, and if they move the mouse down to go to another item in the original submenu that will disappear unless they get to some item quick enough to keep it open all all you'll see is the menuCapabilities submenu sitting there pretty as a picture... So, if you absolutely have to have a tree, you'll need to make the whole thing a tree, starting with the main menu. This would mean either you'd have that one that opened on click and the other mains on mouseover, or you'd have to change the other menus to tree also so they opened the same way.

Sorry.

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Thursday January 17 2008 - 14:18:06 GMT

yeah that was my mistake...

wow that is very disappointing that the menu falls apart like that. I guess I will have to revert to a standard flyout type menu.

Thanks for your help anyways

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Thursday January 17 2008 - 16:49:05 GMT

Hi,

It's that you're mixing them together. If you made the main item a collapse, i.e. type=tree, like on the homepage we tried, they would work fine.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Thursday January 17 2008 - 18:40:57 GMT

Ruth wrote:

Hi,

It's that you're mixing them together. If you made the main item a collapse, i.e. type=tree, like on the homepage we tried, they would work fine.

Ruth

yeah but I don't think my boss will want them that way. No biggie. The home page looks good and this interior page can look a little different since it is flyout style.

Thanks again! If you need any customer testimonials for your assistance I'd be happy to write one. You've been very patient and helpful as I break into and try new things with the menu.

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Thursday January 17 2008 - 19:53:38 GMT

nwilcox wrote:

If you need any customer testimonials for your assistance I'd be happy to write one.

The thanks are enough. I volunteer because I really like this menu and I like experimenting with things. I'm actually a retired professor of Spanish so this keeps me occupied

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Wednesday February 13 2008 - 19:39:47 GMT

Hi Ruth,

I thought all was great but now the tree menu has seemed to let me down.

http://clients2.serverside.net/serverside/default2.aspx
When you view the page, I've got the submenu of the first tree popping open. However, ifyou resize your browser width, the open tree menu stays in place and doesn't move with the rest of the layou.

What can I do to allievate this?

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Thursday February 14 2008 - 6:58:52 GMT

Hi,

You're going to have to tell me what submenu. I'm not seeing any submenus when I mouse over any items in that center area that has the housing development client portal stuff. I do see submenus in the Development, one is open when I get to the page, and when I resize the page everything stays just fine in relation to the parent Capabilites item. Can you screenshot what is happening to you and what browser?

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Thursday February 14 2008 - 14:46:11 GMT

Hi Ruth,

This happens in all of the browsers I have on my PC - IE 6, 7, Safari, Firefox, and Opera

If you resize the browser or just resize the width, the menu stays in place and doesn't "flow"

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Thursday February 14 2008 - 18:12:44 GMT

Hi,

Well, I'm not getting that problem in IE, however there is a problem in FF, Safari, NN, the tree submenu seems to be 'moving' when you use the scroll bar or resize the window as you said. I did find a fix. Paste this at the top of your menuDevelopmentHome.js file.

Code:

fixMozillaZIndex=false; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps

You'll note it's changed to false here because it seems that when the menu is set to relative, when you have the zindex fix to true, it causes the tree submenu to be positioned incorrectly when you scroll the browser window or change its size. Turning it off seems to fix that.

Try that and see. Hope it works.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Thursday February 14 2008 - 20:59:15 GMT

I gave that a try and replaced it everywhere that property was set but no change. I did apply the newest version of the menu to the site

http://clients2.serverside.net/serverside/default2.aspx

Are you not getting this issue on your machine?

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: Ruth
Dated: Friday February 15 2008 - 0:20:00 GMT

Hi,

I am no longer having the issue in any browser I tested. IE6, FF1.5, NN 7, 9, Safari 3 for pc

Have you tried clearing all your cache. And you only need that fixMozilla thing to false in the actual file that is the treemenu.

Ruth

Re: Tree/collapse menu isn't working-pops down empty menu items

Poster: nwilcox
Dated: Friday February 22 2008 - 21:49:30 GMT

Hi Ruth,

Using the example from Milonic's download, as soon as I put the menu into in a table that is aligned center, the listmenu/treemenu combo does the same thing as I've experienced with my code with just Milonic and the tree menu.

The "sub-menu" is placed absolutely instead of relative and therefore doesn't move and flow when the browser is resized.

http://clients2.serverside.net/serverside/javascript/milonic/menu_sample1_ver5_790/extras/listbased_menu/index_tree.html

This happens on every single browser on the MAC or the PC I can get my hands on today for testing:

PC: IE6, IE7, Safari, Firefox, Opera
MAC: Safari, Firefox, Opera

All browsers behave the same, no differences. The treemenu is opened and when the brwoser resizes, the submenu does not move. I've tried the Firefox toggle like you said and it doesn't work in either setting.

I can document this for Milonic but do you think it is something they will fix for a "un-supported menu"?

This seems to be a huge issue with using it you can't use it on anything but a left centered design. I'd just hate to have to throw away what I've spent all the time on getting to work 95%

Thank you again for your help!
Nick