help to improve menu - subimage postion and submenu position

Poster: blaine
Dated: Tuesday August 24 2004 - 21:55:52 BST

Can you please have a look at some work in process at this link
http://www.langfamily.ca/gltest/public_html/

Q1: I can't get the subimage to appear closer to the label. Its positioned right and if I set subimagepadding to a large right value -it will push the subimage to the left but that is still not consistent and in this case causes the itemwidth of the "Compensation" to now be longer then the other menuitems.

I'm playing with the site so the settings may be different.

I'd rather have it 5 or 10px to the right of the label -- is that possible

Q2: The dropdown submenu needs some work to make it look better but I'm not sure what to do. The first item appears to be crowding the Horizontal menuitem. Removing the border makes it look worse. I'd appreciate any tips or ideas the community may have.





with(menuStyle2=new mm_style()){
onbgcolor="#3e58af";
oncolor="#ffffff";
offbgcolor="#293a73";
offcolor="#ffffff";
bordercolor="#3e58af";
borderstyle="none";
borderwidth="1";
align="left";
separatorcolor="#293a73";
separatorsize="11";
padding="5";
fontsize="11px";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="FFFFFF";
pagebgcolor="#001156";
headercolor="#000000";
headerbgcolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
subimage="<?php echo $_CONF['layout_url']; ?>/glmenu/images/arrow.gif";
subimagepadding="2 10 2 2";
orientation = "horizontal";
itemwidth="120";
menuwidth="100%";

}

with(menuStyle3=new mm_style()){
onbgcolor="#3E58AF";
oncolor="#FFFFFF";
offbgcolor="#293A73";
offcolor="#EFEFEF";
bordercolor="#CCCCCC";
borderstyle="solid";
borderwidth="1";
separatorcolor="#CCCCCC";
separatorsize="1";
padding="5";
fontsize="11px";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
pagecolor="white";
pagebgcolor="#3E58AF";
headercolor="#FFFFFF";
headerbgcolor="#ffffff";
outfilter="randomdissolve(duration=0.2)";
orientation = "vertical";
itemwidth="120";
menuwidth="100%";

}

Poster: Ruth
Dated: Wednesday August 25 2004 - 6:07:53 BST

For the first problem try putting in instead of itemwidth=120; that you have now in the style2 you're using for the main menu. I tested that in IE5.5 and Netscape 7.1 and it works fine, puts the arrow next to the word. As for the second item, I can't figure out what's up with that unless it's because the menu is in a table so for some reason the dropdown is not reading the subOffsetTop position. I did find a workaround. If you have a really small 1px x 1px transparent gif you can put in an extra aI at the top of the submenus that drop down from the main menu. You also have to remove the border from that style or it looks kind of strange, you see a small space with nothing in it. putting that image in will give you a bit of a spacer. It works in IE5.5 and Netscape 7.1. I put the onborder in so you would have a border when the mouse is on the item if you want one, it's not necessary. Since the image item has no 'showmenu or url in it it won't get a border around it when you mouse down. Hope that helps.

Also, if you're going to post code, could you use the code button above. Sometimes if it's not inside the 'code' code it gets messed up.

Ruth

Poster: blaine
Dated: Wednesday August 25 2004 - 15:33:21 BST

Thanks Ruth,

Your first note about changing itemwidth to "21%" for menustyle2 (the horizontal menu) worked and right aligned the subimage now beside the text label.

Is that the desired behaviour if itemwidth is set using px that it would not right align the subimage to the right edge of the text I wonder. I would think it should still work like the % does.

Now .. Trying the same thing for the vertical sub-menu causes the items to be nearly as wide as the page. I had to use the itemwidth="136"; or some px fixed width. Using any percentage caused them to be very wide. I tried a fixed width and % for the menuwidth setting as well - no effect.

I've not tried your transparent image trick yet - will later today.

Poster: Ruth
Dated: Wednesday August 25 2004 - 19:50:48 BST

Well, using an analogy - [and I know nothing about programming, this is only how it seems to be acting to me] - Say the menu is a cork board. In the horizontal it's 100% long which you've divided into 5 sections, then the items become something pinned to the cork board. The actual item is the width of the text plus the subimage, and the 21% you assigned is just the space of the board to which the item [text and subimage] is pinned. If you look at it that way, when you get to the vertical, if you assign the 21% then the menu assumes that the actual menu [cork board] is 5 times that width. Anyway, that's how I visualize it, since I have no clue what's happening programmatically. On the extra transparent image for an aI, I didn't try putting in a header item with height specified, that is something else you might try.

Ruth

Poster: blaine
Dated: Thursday August 26 2004 - 3:00:58 BST

Ruth,

I was not getting the desired effect with the image - probally something I was doing but made some headway with adding a menuitem of type=header

I was not able to get the itemheight property to have any effect though so I used the separator and over-rode the style settings for this first item.

aI("text=;type=header;separatorcolor=#293A73;separatorsize=3;");

The menu on this test http://www.langfamily.ca/gltest/public_html/index.php is dymamically generated as its database driven from my menu builder plugin. So if I am going to use this method, I will need to not add it to additional chained menu's off the initial dropdown submenu.

Regarding the vertical submenu, is there a way that I can control the position of the subimage like adjustment you noted for the horizontal menu?[/url]

Poster: Ruth
Dated: Thursday August 26 2004 - 5:58:03 BST

The horizontal looks OK. On the vertical menu, if you resize the menu, by using itemwidth= and putting a fixed size that will shift the subimage closer to the text. I tried it with itemwidth=100; and that seemed to work. But, that also means that if someone has large text it may mess up the menu when the text gets real big. One other thing you could do is leave the width of the menu out and use a subimage which has an extra 10px at the right side of the arrow, that would make the arrow look like it's 10px closer to the text. Or you could design say a 'triple' arrow which would make it a wider image and when moused over it would look closer to the text.

Ruth

Poster: blaine
Dated: Thursday August 26 2004 - 6:19:12 BST

Thanks again Ruth,

Removing the itemwidth did in fact slide the subimage to the right by the label but it looks odd if the submenu items are two narrow and I prefer to have then at 136px which is the width of the horizontal menuitems.

This appears to be an area that can be improved

- Able to have more control over the itemwidth of the vertical menuitems
- Able to set the subimage location independant of the itemwidth or position it relative to the label - as in the right edge.
- I'd like to have a minitemwidth and maxitemwidth maybe.