double row horizontal floating menu - example

[TimBert]

Thanks to help from maz and Kevin3442, I have this novel menu in place for anyone interested. Comments welcome about the menu (including ways to improve it).

Re my site in general: I already know that my site is kinda dated (style-wise and code-wise). But hey, it is supposed to be a nostalgic site (for us expats); however, you can comment on it if you so desire (I can take it).

http://www.leicesterandleicestershire.com/

[Maz]

Maybe just a tad more space at the top so the menu doesn't cover the top of the title. Otherwise all good.

Thank you, I never thought of splitting menu items to position them separately on the page, amazing what can be done with the menu.

Its quiet here on the weekends.

maz

[Ruth]

Looks real good, and gives many of us some ideas. If you were serious about ideas, I have one. I notice you mixed colors on your site, a gold and yellow, so I played around with your menu to see if I could get them into it also. I made the top menu bgcolor the gold instead of yellow, then I put a 3d gold color around the bottom of the bottom menu. In order to do that you need to copy the style you have again and name it say menuStyle1. Here's the code I used if you want to try it out. Maybe it will give you some other ideas.

Code: Select all

with(menuStyle=new mm_style()){
itemwidth="105";			  // Sets width of each main menu item	
onbgcolor="#003300";          // On background colour (with mouseover)
oncolor="#FFFF99";            // On text colour (with mouseover)
offbgcolor="#ffcc00";         // Off background colour
offcolor="#000000";           // Off text colour
bordercolor="#780000";
borderstyle="solid";
borderwidth=2;
separatorcolor="#780000";
separatorsize="2";
padding=5;
fontsize="10px";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
// pagecolor="black";
// pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
overfilter="Fade(duration=0.3);Alpha(opacity=100)";  // Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.4)";
}

with(menuStyle1=new mm_style()){
itemwidth="105";			  // Sets width of each main menu item	
onbgcolor="#003300";          // On background colour (with mouseover)
oncolor="#FFFF99";            // On text colour (with mouseover)
offbgcolor="#FFFF99";         // Off background colour
offcolor="#000000";           // Off text colour
bordercolor="#780000";
borderstyle="solid";
borderwidth=2;
separatorcolor="#780000";
separatorsize="2";
padding=5;
fontsize="10px";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
// pagecolor="black";
// pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="arrow.gif";
subimagepadding="2";
high3dcolor="#ffcc00";
low3dcolor="transparent";
overfilter="Fade(duration=0.3);Alpha(opacity=100)";  // Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.4)";
}

Then I just named the style for the bottom menu style=menuStyle1; The 2 other changes because of the 3d in that second menu I had to make the offset 27 instead of 25 and same with followscoll. That was so your pretty bar showed between them. Then on the page I had to put a linebreak above your first line to move it down one line so the menu wouldn't cover the title words. I don't know why but the high and low colors seem to be reversed, that's why it seems to be saying the gold is the top color when it's not, it is the bottom in the 4 browsers I checked, IE5, netscape 6, 7, and Firebird .07. Also, you'll see I made the fontsize 10px. That's up to you how you want to do it, but when you set it for percentages then for anyone who say has their browser set for the font to be smaller, they can't even read what's on it and have to go change their font setting. I tried 12, but that made the bottom menu smaller than the top for some reason, probably the difference in word length. Anyway, just thought I'd give you some ideas, though it looks real good the way it is. [I'm just a color junkie.. ]

Ruth

[Maz]

Good idea Ruth, when I first saw the site, I thought it would look good to put the graduation color strips into the menu background. But it would be difficult to chose a font color.

Trying to get silver on my menu has been driving me nuts, one of these days I'll have it all figured out, its getting close

maz

[Ruth]

Silver is a miserable color to work with but looks so good when you can get it right. Where are you trying to put it? Oh, is that 3d color thing a bug? reading it backwards like that?

Ruth

[Maz]

What 3d color thing? are you looking at -www- below?

I'm trying to place the Rating system, but there is no way to set it away from the right margin the way I want.

Regards,
maz

[Ruth]

Sorry, not on your site. The 3d color is the high/low 3d in the menu. It seems to be reversed. High gives you the right and bottom, and low gives you the left and top. Weird. I was looking at the site to see where you wanted the silver because it looks silver to me .

Ruth

[Maz]

swap3d=1 switches high and low, sometimes it helps making a light line above the separator, and with xp menu style the left side is darker.

Thanks,
maz

[Ruth]

Well, I really have no idea how it works. I just thought you put a color in the high and then another in the low. And, I thought high referred to the left and top and low was for the right and bottom, but when I did it, it seemed to reverse them, and I didn't put in any swap3d. if I wanted a particular color at the right and bottom I had to put it in as high. So, guess I will have to read the docs again...

Ruth

[TimBert]

Thanks for your suggestion Ruth; I will play around with your idea in the next few days.

Tim

[kevin3442]

Hi Ruth,

...I just thought you put a color in the high and then another in the low. And, I thought high referred to the left and top and low was for the right and bottom, but when I did it, it seemed to reverse them...

Just in case you're interested.... The high3dcolor and low3dcolor were implemented in v5 in RC14 (see here if interested). They initially followed the same logic as they had in v3. Then, around RC20, some changes were introduced that reversed the effects of high3dcolor and low3dcolor. When that reversal was pointed out, Andy implemented swap3d (see here) So, when swap3d=1, the colors follow the logic you describe, with high=left+top and low=right+bottom.

Cheers,

Kevin

[TimBert]

I have now used the 3D effect in a couple of different ways:

http://www.leicesterandleicestershire.com

TBA

[Ruth]

ooh, that is really neat. I like that!

Ruth

[Thomas.Walker]

I was wondering if you could help me understand how to create double row with the scrolling menu.

In addition, how do you control the height of the menu bar itself. I'm trying to implement the menu in to my website and I have run into these blocks.

Thanks,
Thomas

[Thomas.Walker]

Never Mind. I found the answer to both my questions.

I guess I should read the entire thread and the previuos before asking questions.

Thanks,
Tom

[Ruth]

Hi Thomas,

I'm glad you found the answer. I just wanted to say I wasn't ignoring you. I haven't been available for the last couple of weeks. If you need any help on anything else, just post and we'll do what we can.

Ruth