Two Menus on page

[Simcfc73]

Hi People (especially the nice and helpful ruth)

I've been doing this menu for around a month now and redone it loads of times as I have no artistic talent whatsover.

http://www.fulneckschool.co.uk/test.htm

Anyway I have got a menu in a table which i am relatively happy with and want a floating menu underneath that is positioned at the bottom with the
screenposition="bottom"; switch.
I have 3 problems with it which I hope someone will help with.

1) The image is faded but uses the same background.jpg file as the background of the table of the top menu. Is this because it uses the same .js file. Should I dump this menu into a seperate file altogether rather than use the same as the main menu.

2) I would like the floating menu to position itself at the right hand side but when I tried screenposition="bottom;right"; which I thought was correct it didn't work.

3) The bottom menu jumps when you rollover with a mouse. I would prefer it to stick with the bottom of the screen with a slight fade but quickly find its position. I've messed around with the followscroll command but I can't get it right.

Thanks in advance for any advice.

[Ruth]

Hi people (especially the nice and helpful ruth)

"Why, thank you kind sir", she said.

... want a floating menu underneath that is positioned at the bottom with the
screenposition="bottom"; switch.
I have 3 problems with it which I hope someone will help with.

1) The image is faded but uses the same background.jpg file as the background of the table of the top menu. Is this because it uses the same .js file. Should I dump this menu into a seperate file altogether rather than use the same as the main menu.

What image? You are coding the items with the Border.jpg file so it should look just like the top menu which uses transparent.gif as an image which means what shows through is the border.jpg background of the table cell. So, what exactly do you want to do with that bottom one with regard the background image?

2) I would like the floating menu to position itself at the right hand side but when I tried screenposition="bottom;right"; which I thought was correct it didn't work.

Actually, it's a comma not a semi colon between the words. The whole thing is screenposition so if you use a semi-colon it only takes the one before it since the ; closes it.

3) The bottom menu jumps when you rollover with a mouse.

That's the settings in the menuStyle. Use this, remember to rename the style= in that bottom menu to bottomStyle.

Code: Select all

with(bottomStyle=new mm_style()){
onbgcolor="transparent"; 
offbgcolor="transparent"; 
fontfamily="arial, verdana, tahoma";
fontsize="75%";
fontweight="bold";
align='center';
onbold=1;
imagepadding=0;
subimagepadding=5;
oncolor="#ffff40";
offcolor="#ffffff";
outfilter="fade(duration=0.5)"; 
overfilter="Fade(duration=0.5);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
rawcss="padding-top:8px;padding-bottom:2px";
}

Just paste that below the menuStyle you have now and rename the style in that bottom menu.

Also, you have two offbgcolor="transparent"; in the menuStyle, and I"m not sure why you have a drawMenus() after one of the submenus. You only need the one at the end of the file.

Hope this helps.

Ruth

[Simcfc73]

Once again thanks.

The reason I had a couple of duplicate entries is because this is version 2812.b as I have been tinkering so much.

All the changes have been done and it looks good. I am sure I saw a semi colon somehwere regarding the positioning but they all blend into one after a while.

The menu works how I want it but the top scroll is kinda sluggish and not smooth but I need to try it live rather than offline. Not sure if the preload is working either but thats another thing.

Is it alright for me to take these two lines out of the bottom style.?

outfilter="fade(duration=0.5)";
overfilter="Fade(duration=0.5);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";

I don't need a fade as its just a rollover really.

Thanks again.

PS. Its not live yet, I've done this at home.

[Ruth]

Hi,

Yes, you can remove all of that, the things like fade are transitions, the alpha will make the menu look sort of transparent, like the one on Milonic, and the shadow will put a kind of drop shadow at the right and bottom of the menu like a shadowed border. They only applies in IE, those are the IE filters and transitions.

If you want to take a look at what you can do with them..again they only show in IE on a PC.. there's an Interactive IE Filters Demo. There are some really neat transitions. For example there's one called blinds, the lowest it goes in the demo is number of blinds 2, but you can hand change that to 1 in whichever style you put the code, and it will make the submenus look like they open sliding down.

IE FILTERS and TRANSITIONS Demo

Ruth

[Simcfc73]

So I am 60% happy with it now which is quite high for me.

The onyl thing I would like is to try and get the text in the drop down menus to be in the middle of the image and the drop down to not overlap the top menu.

http://www.fulneckschool.co.uk/new.htm

Thanks for the help

[Ruth]

Hi,

The bottom padding for the menuStyle is 0 so the text will be immediately at the bottom and I think that's why it looks like the drop menu is over the horizontal main menu.

Also to check and see if it is really opening over the horizontal menu, put colored border you can see like aqua around the table in which you have the menu and also one around the main menu just so you can check and see if it's the menu the submenus are going over or the table cell which has the same background and it just looks like the menu because the text is right at the bottom.


Ruth