Menu styles: offbgcolor and menubgimage

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

Menu styles: offbgcolor and menubgimage

Poster: gothmog
Dated: Wednesday March 10 2004 - 18:55:42 GMT

If you use both offbgcolor and menubgimage in a menu style, the image is not visible, only the off background color. (tested in version 5.05 of the menu)

I find this "feature" unnatural.
When you create a web page, you can specify both a background color and a background image for any piece of your page (a table cell, a paragraph, etc...). In this case, you will see the image, and not the background color.
But while the page loads, you can see the background color (before the background image has finished downloading). Also, users browsing without images to speed up their navigation would see the background color and not the image.
In these two previous situations, the menu behavior is not good in my opinion because the menu background is transparent while the image loads, possibly making the menu text unreadable depending on the color/image behind the menu itself.

Would it be possible to change the menu behavior to make it more 'standard', or to add an option to choose which item one wants to see when both are specified: the background color or the background image.

Thanks,
Christophe

Poster: Ruth
Dated: Thursday March 11 2004 - 19:17:39 GMT

Do you by chance have a url so we can see the behavior? Which browser are you seeing this in, by the way? Does it do it in more than one? On Mac or PC or both?

Ruth

Poster: Maz
Dated: Thursday March 11 2004 - 20:39:54 GMT

Ruth,

this is true, because when you use background image you have to use transparent, so the color does not block the image.

maz

Poster: gothmog
Dated: Friday March 12 2004 - 7:56:06 GMT

I don't have a sample URL, but this behavior is described in the FAQ.
I use IE 6.0 on Windows XP.

Poster: Ruth
Dated: Saturday March 13 2004 - 2:44:00 GMT

There is a way to put both color and image there, at least it seems to work in the tests I did. You take the image out of the menu_data.js file and instead put a style code in the head of the page. ie...

Code:

.test {
     background-color: #CC0066;
     background-image: url(http://www.poems2u.com/1/a/new-11.jpg) }

would be placed in the head of the page, and in the menu_data.js file you would put this along with all your other coding for oncolor,offcolor, padding etc.

Code:

offclass="test";
onclass="test";

If for some reason the image didn't load, or while it is loading [at least in netsccape you see it] the bgcolor will show.

Be aware that there are some drawbacks, though it works in IE5.5, nn6, 7, opera 7, firebird .07, in opera below 7 the bg image loads but the place where the text is like Milonic, Products etc, the background to the text is the bgcolor even though the rest of the surrounding is the bgimage. Also, in nn4 because it's static and doesn't read class, the menu is transparent, neither bgcolor nor image show. If you decide to use this then I suggest you make sure the main menu is away from any other text so it doesn't load over text written on the page because of the transparency, and that all the submenus do use the image or bgcolor in their actual style created in the menu_data.js file. This means creating a separate style for the submenus.

Ruth

Poster: gothmog
Dated: Saturday March 13 2004 - 11:45:41 GMT

Many thanks for this nice workaround and the sample. I'll see if it works for me.

I still think this should be changed in the menu program so that it has the same behavior as with CSS.

Poster: Ruth
Dated: Saturday March 13 2004 - 18:41:04 GMT

Welcome. I did forget, the part with the .test that's actually in style codes, you know

Code:

<style type="text/css">.test and so on</style>  Sorry for the oversight.

Ruth

Poster: blaine
Dated: Sunday May 23 2004 - 22:07:23 BST

Ruth wrote:

Welcome. I did forget, the part with the .test that's actually in style codes, you know <style type="text/css">.test and so on</style> Sorry for the oversight.

Ruth, just trying this and I have my class definition set in my sites main style sheet. It does not appear to be picking it up. Does the CSS class need to be defined somewhere specifically?

I have this in my main site stylesheet

Code:

.glmenu_header {
    background-image: url(http://www.mysite/layout/images/top-bg.gif);
    background-color: #CCC;
}

And this in my menu config

Code:

with(menuStyle2=new mm_style()){
onbgcolor="transparent";
separatorcolor="#808080";
separatorsize="1";
padding="3 7 3 7";
fontsize=12;
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
onclass="glmenu_header";
onclass="glmenu_header";
}

Poster: Maz
Dated: Sunday May 23 2004 - 23:23:59 BST

Why do you have onclass twice, did you mean to have onclass/offclass?

maz

Poster: Ruth
Dated: Monday May 24 2004 - 1:25:10 BST

Ok, I just tested using your code and my image, since I don't have yours, it's the same page, I put it back up. http://www.poems2u.com/1/a/bg_test_blaine.htm and everything is working. Given that it is working [and maz is correct on the class, you need to make one offclass=] I would guess that since my code is in the head of the page, then it's 'read' by the menu, and if you are loading a style sheet then perhaps the menu is loading before the style sheet is fully loaded so it doesn't have the class to read? Try putting the menu code just after the body code, see if that fixes it. Since you don't have a site, and I don't know how to make a style sheet that you call from the link rel thing, I can't try it to see what's happening. If you want to post the style sheet [only the part about the menu class is all I need] then I can test it, and at the same time see how you make one that you call to the page

PS, forgot to mention. This actually does use css styles, that's what the on and off class is. I can't see how you can't put every single thing to do with css in the program. I believe it would end up being so huge as to be unmanageable. I think the on/ off class is a good option, gives many design capabilities without tying everyone to a particular way something is programmed. Just a personal opinion.

Ruth

Poster: blaine
Dated: Monday May 24 2004 - 5:12:30 BST

Thanks for your replies. It's one of those things because it's working now

Having said that - I would like you to have a look as it still needs some tweaking. There is too much jerkiness in the display as you mouseover the menu.

The site is a demosite for my new PHP based plugin for the Geeklog Portal/CMS. The plugin integrates the Milonic Menu and offers a very flexible integrated admin capability. The Menuitems and submenus are all generated dynamically from the database. It supports N-Level deep menus automatically generating the submenus.

The site is showing the Milonic Menu in both a block and in the header. You will need to login to see the menu as the default theme is not using this test menu style.

The site is: demo.portalparts.com
login as: milonic
password: demo

The menu in question is in the header - in the default theme for user "milonic". You can change the site theme and menu look under your user => preferences screen if you want to try that out.

Note: this user also has admin access to the glmenu features. Check it out - all is backed up. Let me know if you have any ideas to improve the header menu style and make it smoother.

Menustyle is:

Code:

with(menuStyle2=new mm_style()){
onclass="glmenu_header";
offclass="glmenu_header";
bordercolor="#BFBFBF";
borderstyle="raised";
borderwidth=2;
separatorsize="2";
padding=5;
fontsize="100%";
fontfamily="tahoma, verdana";
high3dcolor="#eeeeee";
low3dcolor="#7F7F7F";
}

Poster: Ruth
Dated: Monday May 24 2004 - 6:36:02 BST

I'm not seeing any funny behaviour in ie5.5 win98se, there is some shifting on the first couple of mouseovers in netscape 6 and 7, that has to do with padding someplace. I only know because I had the problem and in one place I had padding listed as one size and in another it was bigger, this was in using the on and off class, so when I moused over the item which had say it was padding 2 in the offclass, and I had 3 listed in the onclass it shifted the item. Also, nowhere can I find the 'raised' as a valid css border. I just checked even the proposals for css level 3 which is only in the working stage and it's not listed there either. Perhaps you mean outset? The valid ones listed css level 2 that I find are none, hidden, solid, dashed, dotted, double, grooved, ridge, inset, outset. I'll take a look at the page on my computer and see if I can see anything that might be causing the shifting in Netscape.

Ruth

Poster: Ruth
Dated: Monday May 24 2004 - 7:13:11 BST

One thing I did notice and it messes up some browsers, you have quote marks around areas which only have numbers, you need to remove those. i.e. itemwidth="180"; is incorrect, get rid of the " same thing in the style definitions. If it only contains a number don't use " marks.

Ruth

Poster: blaine
Dated: Monday May 24 2004 - 7:24:34 BST

Thanks for the note about the quotes.
I saw the "raised CSS attribute in another example - I'll remove that.

When you first hit the site I have the Win98 style being used but once you login as user "milonic" you should have a modified style using the image background. It's this one that I'm questioning as it really does flash too much and you will see a white bg for a sec with no image as your moving the mouse over it.

I'm using IE6 on XP. Were you logged in?

Update: The problem does not appear with NS

Poster: Ruth
Dated: Monday May 24 2004 - 16:05:00 BST

Yes, I was logged in. I'm using ie5.5 and win98se and I'm not seeing it. I'd remove the 'raised' and also in your table where you placed the menu you have menuStyle2 listed twice. You also have a top/left position. I'm not sure if that's necessary since in a table the menu is position="relative";

Ruth

Industrial Strength JavaScript and DHTML Menus

Menu styles: offbgcolor and menubgimage