trying to hide individual menu items in a menu...

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
mwallace81
Beginner
Beginner
Posts: 5
Joined: Mon Nov 07, 2005 10:43 pm

trying to hide individual menu items in a menu...

Post by mwallace81 »

Is there any way to hide (not delete) some menu items in a menu? For example collapsing a menu down to the item that is being hovered over if it has a sub menu. See what I'm saying? I imagine it is potentially possible with a javascript function or by setting the onclass property for that menu item, but I don't know how to actually hide the other menu items. I can see using one of the milonic functions like gmobj() or getMenuByName() to actually get the different menu items ...and then is that where I could use CSS to set the menu item's visibility property to false?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,

I'm not sure what you want. Could you be a little more detailed? Are you saying that when you open a submenu, if you put your mouse on one item you want all the rest to hide?

Ruth
mwallace81
Beginner
Beginner
Posts: 5
Joined: Mon Nov 07, 2005 10:43 pm

me elaborating what I'm trying to do/want to do

Post by mwallace81 »

Hi Ruth =) I must say I've enjoyed your help so much!

Here's what I have so far...

http://beta.plangen.com/cjaweb/credenti ... ments.html

and here's what I want to do... (this is where I elaborate)...

Lets say that someone hovers over the menu that says "412i" (the middle menu) and then they hover over the "Brochure" menu item... (this is where I want to do what I tried to describe earlier). So when the "Brochure" menu is hovered over is there any way to collapse all of the other menu items that are in the same menu as it? Thats what I am trying to do. I hope the webpage and me elaborating helps you make sense of everything ... thank you again for all of your help!!!
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,

Well, I'm sure there is probably some way to do it with functions. But, I don't know how to do functions. I did play around with it and you could try the following. I only made changes in the titanMain and titanBrochure menus to try it, but if they are what you want you can just use them as an example for all the menus you want like that. This will open the menu called titanBrochure when you click on Brochure, it also closes the titanMain. I think that's what you want, to have the titanMain disappear when one of the submenus from it is open.

You need to make a close image. I just cut the x from a screen capture of the browser window :)

1st, put the following function at the top of your menu_data.js file. It is necessary because you are opening a menu with keepalive and there's no way to close it, even if you have it coded as close on click unless you have the function.

Code: Select all

function mm_closeClickedMenu() 
{ 
  menuDisplay(_mi[_itemRef][0], 0); 
} 
Then substitute these for the menus you have now.

Code: Select all

with(milonic=new menuname("titanMain")){
style=titaniumStyle;
top="offset=53";
left="offset=-149";
aI("showmenu=titanBrochure;text=Brochure;openonclick=1;closeonclick=1;");
aI("showmenu=titanSample;text=Sample Case;url=http://beta.plangen.com/cjaweb/credentials_documents.html;");
aI("showmenu=titanLegDocs;text=Legal Documents;url=http://beta.plangen.com/cjaweb/credentials_documents.html;");
aI("showmenu=titanComQues;text=Common Questions;url=http://beta.plangen.com/cjaweb/credentials_documents.html;");
aI("showmenu=titanArticles_Materials;text=Articles & Support Materials;url=http://beta.plangen.com/cjaweb/credentials_documents.html;");
aI("showmenu=titanForms;text=Forms;");
aI("showmenu=titanRFP;text=Request for Proposal;");
}

with(milonic=new menuname("titanBrochure")){
style=titaniumStyle;
closeonclick=1;
keepalive=1;
aI("text=Click here for PDF format;url=http://beta.plangen.com/cjaweb/credentials_documents.html;");
aI("text=Download DOC/Word format;url=http://beta.plangen.com/cjaweb/credentials_documents.html;onfunction=showtip('Click here to download the <br>brochure in Microsoft Word format.') ;");
aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;onfunction=showtip('If space is limited, this menu sample shows how<br>to open sub-menus in a horizontal orientation') ;");
aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;onfunction=showtip('The popup function can also open menus<br>based on mouse action but also positioned<br>relative to an image') ;");
aI("text=Classic XP Style Menu;url=http://milonic.com/menusample82.php;");
aI("text=XP Style;url=http://milonic.com/menusample86.php;");
aI("image=close.gif;imagealign=right;closeonclick=1;separatorsize=0;onbgcolor=#73767E;clickfunction=mm_closeClickedMenu()");
}
See how that works for you, and I have a couple of suggestions.


1. You really need to get the menu out of the div. Given the layout you should just be able to put the menu table between divs. Having the menu in a div causes position problems especially with submenus and with offsets. It has something to do with not all browsers treating div position in the same way, i.e. relative, absolute, etc.

2. I have another layout for you with regard to the above code. It is really the same code but I've added offsets to the titanBrochure menu so it will open just below the word Brochure in the titanMain.

Second example, the titanMain would be the same as above and the titanBrochure would be:

Code: Select all

with(milonic=new menuname("titanBrochure")){
style=titaniumStyle;
top="offset=28";
left="offset=-150";
closeonclick=1;
keepalive=1;
aI("text=Click here for PDF format;url=http://beta.plangen.com/cjaweb/credentials_documents.html;");
aI("text=Download DOC/Word format;url=http://beta.plangen.com/cjaweb/credentials_documents.html;onfunction=showtip('Click here to download the <br>brochure in Microsoft Word format.') ;");
aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;onfunction=showtip('If space is limited, this menu sample shows how<br>to open sub-menus in a horizontal orientation') ;");
aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;onfunction=showtip('The popup function can also open menus<br>based on mouse action but also positioned<br>relative to an image') ;");
aI("text=Classic XP Style Menu;url=http://milonic.com/menusample82.php;");
aI("text=XP Style;url=http://milonic.com/menusample86.php;");
aI("image=close.gif;imagealign=right;closeonclick=1;separatorsize=0;onbgcolor=#73767E;clickfunction=mm_closeClickedMenu()");
}
Have fun! You'll need to play around with the offsets and if you leave the menu in the div, you'll notice that the offsets are really out of whack in Mozilla. You also need to test the fixMozillaZindex, setting it to true and false to see if that changes anything.

Oh, you do need the open and close on click, that's the only way that menu will disappear. Hope this will work for you.

Ruth
Post Reply