Multi-column menu - items listing horizontally

Poster: ScottN
Dated: Friday June 24 2005 - 21:32:02 BST

I'm trying to set up a menu that makes use of the multi column feature. I was expecting the menu items to be inserted as columns, but they're inserted from left to right. Here's an example, using a 3 column menu. Forgive the code tags, but i want it to line up.


Is there a way to force them into the order I want? I know that I could carefully order them, but the actual menus will be large and complex, and altering them will become very confusing. I'm hoping there's a way to get what I want out of the box.

Thanks,
Scott

Poster: Ruth
Dated: Saturday June 25 2005 - 14:56:11 BST

Hi Scott,

As far as I know there's no way to do what you want other than to order them. The divides= which makes the menu do the columns only works on horizontal menus as far as I know and the logical order of columns is 1, 2, 3, etc., across just like tables.

What you seem to be laying out is ordering the menus by rows not columns. Do you by chance have a test page or something where we can see what you are trying to accomplish? Sometimes it's a matter of seeing the layout to figure a solution.

Ruth

Poster: ScottN
Dated: Monday June 27 2005 - 14:29:59 BST

Hey Ruth,
Here's an example of what I'm looking for. It's just static html (If I knew how to get it to work as a pop-up menu I wouldn't be posting here ) but you should be able to get the idea.

The lighter main menu box represents a box that's been mouse-overed, the large box with the gray background represents the fly out menu.

http://www.complexprocess.com/milonic/example.htm

As you can probably see by the example page, it seems like the solution might be to combine the html list-based menu example with the multi column functionality, but I don't know where to begin with implementing that.

Thanks for any insight.
Scott

Poster: Ruth
Dated: Monday June 27 2005 - 15:19:58 BST

I think my brain must have gone on vacation OK, I'm looking at the top picture. The darker gray box, is that the submenu opening from the Main Menu 1? So all those items are from that menu, and the other two 'main' menus haven't been opened yet?

Ruth

Poster: ScottN
Dated: Monday June 27 2005 - 15:27:50 BST

That's correct. The gray box, with all 3 columns, is supposed to represent one submenu. All of it should open up when I mouse over the first "Main Menu" item. There would be similar submenus (also with multiple columns) under the other two main menu items.

I know that I could do this using the standard multi-column display method by carefully ordering the list items in the javascript menu, but It would be a real pain to add items later on, if the need arose.

Poster: Ruth
Dated: Monday June 27 2005 - 17:18:23 BST

OK, you can do it, but not using the divides. You can make yourself a table with the necessary link items in it as you would normally have them in a table, then put the table into the menu item. For example, let's say you had this table on a webpage: You can put that into the Main Menu 1 submenu like this

You can also set the table width, and use things such as center tags, b, color. So you could put the First Header as

Since I did have to test it, this is the setup as you posted it.
I didn't do any style or anything, and I only did the one submenu for the Main Menu 1. I was using the download version of the menu so you'd have to change the position colors etc.

This will work, but to me it seems pretty involved, though actually, I guess if you think about it, it would be pretty easy since you could keep a 'page' with your table on it and just edit that and then copy and paste it.

Without seeing your page layout and knowing just what you are trying to do, this is all I can figure out. If you do get a page up so we can see it, we may be able to give you a better solution.

Ruth

Poster: ScottN
Dated: Monday June 27 2005 - 19:15:25 BST

Thanks Ruth. I'll add that technique to the list of things to consider.

Edit:
I have another question. Is there a way to create an invisible menu item, effectively a blank space? I've tried creating spaces with the following:



however this creates a blank, but clickable menu item. I know that headers are unclickable, and I had consider just using blank headers styled to look like the background to create space. Unfortunately, I'm using actual headers within the menu as well, so this may not work out. Are there any other unclickable elements I can add? Otherwise, is there a way I can use two differently styled headers within the same submenu?

Thanks, and sorry for all the wierd questions.

Edit #2-
As it turns out, the space was causing the problem.
It inserts a blank space like I want if I change it to this:

Poster: Ruth
Dated: Tuesday June 28 2005 - 1:25:40 BST

Hi Scott,

Well, I have found you a solution. Or rather there is a function that was written by a menu user before the inclusion of the divides parameter. This function would allow you to set up columns the way you want. The original page which showed this is no longer there, so I've created a menu_data.js file for you so you can put it onto a blank page and see how it looks. There are a couple of things to note.

1. you cannot use onborder with this function in the newer versions because it will not allow itself to be 'turned off' and so it would show in all the empty items. I tried leaving it out of the style and putting it into the items, but once it is set in any item it seems to attach itself to all items. That is why it has been changed in this data file to onborder="0px

2. In order to make sure the columns are the same length and match even if one has less items than another, I use two coded aI strings, one for the headers and one for the empty items, which you will see in the data file. As you see each has the colors set to match the 'offbgcolor' of the menu style, and the non header items have the pointer=default; in them, that means the pointer will stay an arrow instead of turning to a hand as it does for a link.

The reason I did these is that unlike using a table where both columns shift to match the longest column, this uses a function which opens different submenus side by side as if they were columns.

This actually looks like your posted page, [more or less]

The function was written by cpriest

I've posted a test page for you and a link to the data file so you can see what how it is set up. It was designed to actually do the side by side columns as the divides does, but because it actually opens different submenus side by side you can, for example, put all the items you want to appear in column one into one submenu and all the items you want in column two into a submenu. So in this example, using your posted list, the main1_column1 submenu contains items 1 thru 7 and 15 thru 17 with two headers, one at the top for the 1-7 and one below item 7 for the items 15-17.

Ruth

Poster: ScottN
Dated: Tuesday June 28 2005 - 13:36:05 BST

Thanks a bunch! I think I saw the post for this code, but because the original page was gone (as you said) I didn't get what was going on. Anyway, I'll play around with it. Thanks so much.

Edit-
I have a question about the separatorsize=0; going in every item. Is there a reason for that, other than to style them slightly differently from the main menu? If it's only for style I'll probably take it out and just make a different style for sub menus. If it's required by the code, I'll leave it in though.

Poster: Ruth
Dated: Tuesday June 28 2005 - 14:52:15 BST

Hi Scott,

Yep, because the idiot [me] who did it, was so focused on the submenu layout, she didn't think how much easier it would be to change the separatorsize=0 in the style and then put in separatorsize=1 in the 3 main menu items as opposed the gazzillion submenu items, instead of the other way around.

It also didn't occur to me to just do a copyOf and create a second style for the submenus with separatorsize=0. Actually, I was afraid to try it with that function in there, until I was sure I had the menus working like your layout.

So, you can do it like this, remove all the separatorsize=0 from all the submenu items, and then add this to the top section of the file just below the closing bracket for the menuStyle and just before the beginning - var lastOpenMenus = new Array(4);

Then do a search and replace for the submenus replacing style=menuStyle; with style=subStyle; Don't take it out of the main menu!

The advantage of doing it that way is that if you decide you want to change the colors, put in images or anything like that for the submenus it's easy to do it since they would have their own style.

Ruth

Poster: ScottN
Dated: Tuesday June 28 2005 - 19:53:56 BST

Wow, I didn't know about the copyOf function, that's cool. I was just going to copy/paste and make a few changes. Thanks!

Poster: Ruth
Dated: Tuesday June 28 2005 - 20:34:06 BST

Hi Scott,

That is neat, isn't it? The advantage is if you're only changing a few things you can do it. Now, if you were changing everything, like padding, margin, subimages, colors, fonts etc, then I'd suggest the copy and paste method.

You can take a look at the links below my name, there are quick reference guides, there's also a beginner's guide forum which has some examples. It does show the copyOf method and explain it.

Ruth

Poster: hlagoy
Dated: Tuesday October 17 2006 - 19:13:33 BST

This is an old thread!!

I like this multiple column sub-menu display. My question: is is possible to make this work with a click, instead of a mouseover?

Instead of:

Use:


-- except that that doesn't work...

Is there something that needs to change in the function that makes the multiple columns work?


Thanks

Poster: Ruth
Dated: Tuesday October 17 2006 - 19:39:35 BST

Hi,

It won't open the submenus by click unless the function itself gets modified to take that property of the menu into account. What the function is doing is using the built in abilities of the menu to actually open more than one submenu at a time and position them so they look like columns side by side.

Unfortunately, I don't know how to write functions besides which I don't know the internal workings of the program, and I'd have no idea how to include that or change the existing function to include that and this function is not written or supported by Milonic. It was done by a user a long time ago. I can ask around and see if there's anyone who can help, but I don't guarantee that.

Ruth

Ruth

Re: Multi-column menu - items listing horizontally

Poster: simonknibbs
Dated: Tuesday December 8 2009 - 17:07:43 GMT

Hi, have just been reading through this post and think that it might help with the issues I am having. Can anyone help with this?

I have applied the function discussed here but 2 of my pulldown menus are failing to dissapear on mouse out. Please see COURSES and EXAMINATIONS in nav bar.

http://www.wimbledon-school.ac.uk/newsite/index.php

Below is the menu_data.js code if anyone has any suggestions? I fear I am missing something?

Thanks.

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=250;
_menuOpenDelay=250;
_subOffsetTop=0 // Sub menu top offset
_subOffsetLeft=-0 // Sub menu left offset

horizontalMenuDelay="1";

with(vertStyle=new mm_style()){
styleid=1;
borderwidth=0;
fontfamily="Arial, Helvetica, sans-serif";
fontsize="11px";
fontstyle="bold";
fontweight="normal";
headerbgcolor="#4E3F81";
headercolor="#FFFFFF";
offbgcolor="#dddbe8";
offcolor="#4E3F81";
oncolor="#FFFFFF";
overfilter="Fade(duration=0.2);Alpha(opacity=95);Shadow(color='#777777', Direction=135, Strength=2)";
outfilter="Fade(duration=0.3)";
padding=5;
separatoralign="right";
separatorcolor="#999999";
separatorpadding=1;
separatorwidth="85%";
valign="middle";
}

with(horizStyle=new mm_style()){
headerbgcolor="#ffffff";
oncolor="#ADC42B";
offcolor="#4E3F81";
fontfamily="Arial, Helvetica, sans-serif";
fontsize="11px";
fontstyle="bold";
fontweight="bold";
itemheight=36;
menubgimage="http://www.wimbledon-school.ac.uk/newsite/images/master_navgradient.jpg";
overfilter="Fade(duration=0.2);Alpha(opacity=95);Shadow(color='#777777', Direction=135, Strength=2)";
outfilter="Fade(duration=0.3)";
oncolor="#ADC42B";
subimagepadding=3;
rawcss="padding-left:5px;padding-right:5px";
}

var lastOpenMenus = new Array(7);
function myShowMenu(subMenu1, subMenu2, subMenu3, subMenu4, subMenu5, subMenu6, subMenu7){
// Close the last menus that were opened. Neither popdown() or closeAllMenus() function properly
for(j=0;j<7;j++){
if(typeof lastOpenMenus[j] != "undefined"){
menuDisplay(getMenuByName(lastOpenMenus[j]), 0);
}
lastOpenMenus[j] = undefined;
}
// Create and initialize name array
var menuNames = new Array(7);
menuNames[0] = subMenu1; menuNames[1] = subMenu2; menuNames[2] = subMenu3; menuNames[3] = subMenu4; menuNames[4] = subMenu5; menuNames[5] = subMenu6; menuNames[6] = subMenu7;

// Get main menu item position, init position system
aLastMenuPos = gpos(gmobj("el"+_itemRef));
aLastMenuPos[0] += aLastMenuPos[2]; // Set Top To Bottom of Menu Item
aLastMenuPos[3] = 0; // Set Width to Zero

// Go through and show the menus
for(j=0;j<7;j++){
if(typeof menuNames[j] != "undefined"){
objSubMenu = gmobj("menu" + getMenuByName(menuNames[j]));
if(typeof objSubMenu == "object"){
BDMenu(getMenuByName(menuNames[j]));
menuDisplay(getMenuByName(menuNames[j]), 1);
spos(objSubMenu,aLastMenuPos[0],aLastMenuPos[1]+aLastMenuPos[3]-2);
// Adjust the position of the last menu opened
aLastMenuPos = gpos(objSubMenu);
lastOpenMenus[j] = menuNames[j];
}
}
}
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
margin=1;
orientation="horizontal";
style=horizStyle;
divides=1;
position="relative";

aI("text=HOME;title=Back to Home Page;url=/;");
aI("showmenu=the school;text=THE SCHOOL;");
aI("text=COURSES;onfunction=myShowMenu('main1_column1','main1_column2','main1_column3','main1_column4','main1_column5','main1_column6');align=center;");
aI("showmenu=accommodation;text=ACCOMMODATION;");
aI("showmenu=social programme;text=SOCIAL PROGRAMME;");
aI("text=EXAMINATIONS;onfunction=myShowMenu('main2_column1','main2_column2','main2_column3');align=center;");
aI("showmenu=services;text=SERVICES;");
aI("text=FEES & DATES;");
aI("text=CONTACT US;");
}


with(milonic=new menuname("the school")){
margin=1;
style=vertStyle;
top="offset=0";
divides=1;
aI("text=Why Study at WSE;url=http://www.wimbledon-school.ac.uk/newsite/whystudyatwse.php;");
aI("text=History;url=http://www.wimbledon-school.ac.uk/newsite/history.php;");
aI("text=Accreditations;url=http://www.wimbledon-school.ac.uk/newsite/accreditations.php;");
aI("text=Facilities;url=http://www.wimbledon-school.ac.uk/newsite/facilities.php;");
aI("text=Students;url=http://www.wimbledon-school.ac.uk/newsite/students.php;");
aI("text=Meet our Staff;url=http://www.wimbledon-school.ac.uk/newsite/meetourstaff.php;");
aI("text=Wimbledon;url=http://www.wimbledon-school.ac.uk/newsite/wimbledon.php;");
aI("text=London;url=http://www.wimbledon-school.ac.uk/newsite/london.php;");
aI("text=Maps;url=http://www.wimbledon-school.ac.uk/newsite/maps.php;");
aI("text=Terms & Conditions;url=http://www.wimbledon-school.ac.uk/newsite/termsandconditions.php;");
}

with(milonic=new menuname("main1_column1")){
style=vertStyle;
margin=style.margin;
aI("text=General English;type=header;separatorsize=0;")
aI("text=Beginners;url=http://www.wimbledon-school.ac.uk/newsite/ge_beginners.php;")
aI("text=Other Levels;url=http://www.wimbledon-school.ac.uk/newsite/ge_otherlevels.php;")
aI("text=Summer Vacations;url=http://www.wimbledon-school.ac.uk/newsite/ge_summervacations.php;")
aI("text=Academic Year Programme;url=http://www.wimbledon-school.ac.uk/newsite/ge_academicyrprogramme.php;")
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
aI("text=&nbsp;;offbgcolor=#dddbe8;onbgcolor=#dddbe8;separatorsize=0;pointer=default;")
}

<!--begin Main Menu 2 submenus-->
with(milonic=new menuname("main1_column2")){
style=vertStyle;
margin=style.margin;
aI("text=Business English;type=header;separatorsize=0;")
aI("text=Young Business Professionals;url=http://www.wimbledon-school.ac.uk/newsite/be_youngbusiness.php;")
aI("text=International Legal English;url=http://www.wimbledon-school.ac.uk/newsite/be_internationallegaleng.php;")
aI("text=International Financial English;url=http://www.wimbledon-school.ac.uk/newsite/be_internationalfinancialeng.php;")
aI("text=BULATS;url=http://www.wimbledon-school.ac.uk/newsite/be_bulats.php;")
aI("text=BEC Vantage and Higher;url=http://www.wimbledon-school.ac.uk/newsite/be_becvangageandhigher.php;")
aI("text=Academic Year Progamme;url=http://www.wimbledon-school.ac.uk/newsite/be_academicyearprogramme.php;")
}
with(milonic=new menuname("main1_column3")){
style=vertStyle;
margin=style.margin;
aI("text=Examination Courses;type=header;separatorsize=0;")
aI("text=Cambridge Examination;url=http://www.wimbledon-school.ac.uk/newsite/ec_cambridgeexams.php;")
aI("text=IELTS with Academic English;url=http://www.wimbledon-school.ac.uk/newsite/ec_ielts.php;")
aI("text=BULATS;url=http://www.wimbledon-school.ac.uk/newsite/ec_bulats.php;")
aI("text=BEC Vantage & Higher;url=http://www.wimbledon-school.ac.uk/newsite/ec_becvantageandhigher.php;")
aI("text=Academic Year Progamme;url=http://www.wimbledon-school.ac.uk/newsite/ec_academicyearprogramme.php;")
aI("text=&nbsp;;offbgcolor=#dddbe8;onbgcolor=#dddbe8;separatorsize=0;pointer=default;")
}

with(milonic=new menuname("main1_column4")){
style=vertStyle;
margin=style.margin;
aI("text=Teachers Training;type=header;separatorsize=0;")
aI("text=Teaching Knowledge Test;url=http://www.wimbledon-school.ac.uk/newsite/tt_knowledgetest.php;")
aI("text=Teachers; Refresher;url=http://www.wimbledon-school.ac.uk/newsite/tt_refresher.php;")
aI("text=Cert IBET;url=http://www.wimbledon-school.ac.uk/newsite/tt_ibet.php;")
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
aI("text=&nbsp;;offbgcolor=#dddbe8;onbgcolor=#dddbe8;separatorsize=0;pointer=default;")
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
}

with(milonic=new menuname("main1_column5")){
style=vertStyle;
margin=style.margin;
aI("text=Guided Self-Study Examinations;type=header;separatorsize=0;")
aI("text=TOEFEL;url=http://www.wimbledon-school.ac.uk/newsite/gsse_toefel.php;")
aI("text=TOEIC;url=http://www.wimbledon-school.ac.uk/newsite/gsse_toeic.php;")
aI("text=GMAT;url=http://www.wimbledon-school.ac.uk/newsite/gsse_gmat.php;")
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
aI("text=&nbsp;;offbgcolor=#dddbe8;onbgcolor=#dddbe8;separatorsize=0;pointer=default;")
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
}

with(milonic=new menuname("main1_column6")){
style=vertStyle;
margin=style.margin;
aI("text=Other Courses;type=header;separatorsize=0;")
aI("text=Older Students;url=http://www.wimbledon-school.ac.uk/newsite/oc_olderstudents.php;")
aI("text=English for Film Making;url=http://www.wimbledon-school.ac.uk/newsite/oc_englishforfilmmaking.php;")
aI("text=Work Experience;url=http://www.wimbledon-school.ac.uk/newsite/oc_workexperience.php;")
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
aI("text=&nbsp;;offbgcolor=#dddbe8;onbgcolor=#dddbe8;separatorsize=0;pointer=default;")
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
}

with(milonic=new menuname("accommodation")){
margin=1;
style=vertStyle;
aI("text=Host Family;url=http://www.wimbledon-school.ac.uk/newsite/hostfamily.php;");
aI("text=Wimbledon Student Houses;url=http://www.wimbledon-school.ac.uk/newsite/studenthouses.php;");
aI("text=Catholic Hostel;url=http://www.wimbledon-school.ac.uk/newsite/catholichostel.php;");
aI("text=Hotels;url=http://www.wimbledon-school.ac.uk/newsite/hotels.php;");
aI("text=Flats;url=http://www.wimbledon-school.ac.uk/newsite/flats.php;");
}

with(milonic=new menuname("social programme")){
margin=1;
style=vertStyle;
aI("text=This Weeks Social Programme;url=http://www.wimbledon-school.ac.uk/newsite/socialprogramme.php;");
aI("text=London Attractions;url=http://www.wimbledon-school.ac.uk/newsite/londonattractions.php;");
aI("text=Weekend Trips;url=http://www.wimbledon-school.ac.uk/newsite/weekendtrips.php;");
aI("text=Travel to City Centre;url=http://www.wimbledon-school.ac.uk/newsite/traveltocity.php;");
}

with(milonic=new menuname("main2_column1")){
style=vertStyle;
margin=style.margin;
aI("text=KET;url=http://www.wimbledon-school.ac.uk/newsite/ket.php;");
aI("text=PET;url=http://www.wimbledon-school.ac.uk/newsite/pet.php;");
aI("text=FCE;url=http://www.wimbledon-school.ac.uk/newsite/fce.php;");
aI("text=CAE;url=http://www.wimbledon-school.ac.uk/newsite/cae.php;");
aI("text=CPE;url=http://www.wimbledon-school.ac.uk/newsite/cpe.php;");
}

<!--begin Main Menu 2 submenus-->
with(milonic=new menuname("main2_column2")){
style=vertStyle;
margin=style.margin;
aI("text=BEC Vantage;url=http://www.wimbledon-school.ac.uk/newsite/becvantage.php;");
aI("text=BEC Higher;url=http://www.wimbledon-school.ac.uk/newsite/bechigher.php;");
aI("text=BULATS;url=http://www.wimbledon-school.ac.uk/newsite/bulats.php;");
aI("text=ILEC;url=http://www.wimbledon-school.ac.uk/newsite/ilec.php;");
aI("text=ICFE;url=http://www.wimbledon-school.ac.uk/newsite/icfe.php;");
}
with(milonic=new menuname("main2_column3")){
style=vertStyle;
margin=style.margin;
aI("text=IELTS;url=http://www.wimbledon-school.ac.uk/newsite/ielts.php;");
aI("text=TKT;url=http://www.wimbledon-school.ac.uk/newsite/tkt.php;");
aI("text=London Wimbledon Examination Centre;url=http://www.wimbledon-school.ac.uk/newsite/lw_examcentre.php;");
aI("text=&nbsp;;type=header;headerbgcolor=#dddbe8;#dddbe8;separatorsize=0;")
aI("text=&nbsp;;offbgcolor=#dddbe8;onbgcolor=#dddbe8;separatorsize=0;pointer=default;")
}

with(milonic=new menuname("services")){
style=vertStyle;
aI("text=Airport meeting;url=http://www.wimbledon-school.ac.uk/newsite/airportmeeting.php;");
aI("text=Insurance;url=http://www.wimbledon-school.ac.uk/newsite/insurance.php;");
aI("text=Tennis;url=http://www.wimbledon-school.ac.uk/newsite/tennis.php;");
aI("text=Horse riding;url=http://www.wimbledon-school.ac.uk/newsite/horseriding.php;");
aI("text=Other services;url=http://www.wimbledon-school.ac.uk/newsite/otherservices.php;");
}

drawMenus();

Re: Multi-column menu - items listing horizontally

Poster: Ruth
Dated: Tuesday December 8 2009 - 23:17:46 GMT

Hi,

I posted a response at the other post, but to answer your question, since this is a user created function, and since there is no one any more on the forum who can do functions, nor understands the menu programming so they can change this function to include the capability to open on click, I don't think you're going to get a response for help. You see, what needs to happen is that someone needs to know the menu programming for the funciton openonclick, then they would need to know how to write into the existing user function that particular part of the menu programming, at least I think that is what needs to be done. Anyway, at the other post I created for you a page and a new menu data file which uses the divides to create those submenus so that you don't need to use the function. Maybe you can use that and avoid this issue, since divides is part of the menu itself, the submenus close as they are supposed to close and if you want you can set these up to openonclick using the menu itself.

Also, I think the problem is going to be that you are in effect opening more than one menu. As you can see from your data file, you are opening 6 different submenus which are set up to look as one. I tried using a function to close a menu onclick, this was a function that people wanted to be able to put in a little X at the bottom of a menu and be able to close it when you click the X. Unfortunately, what happens is that only the 'column' in which that close menu is placed closes when it is clicked. So, I will give you the function, and maybe you would be able to figure out how to somehow get it to be a 'multiple' close for all the menus you opened. That's all I can do since I don't do functions

The function would be placed at the top of the data file, above the fixMozillaZIndex line



Now, add a last aI string into each of those submenus, i.e. main1_column1, main1_column2 etc.



Now, when you open those 'columns' as what seems one submenu, you will see the bottom line of each is CLOSE MENU. But, when you click the item it will only close the one column. Somehow that function has to become something that will close all the columns. I hope that made sense to you

Ruth