Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:41
double row horizontal floating menu - example
Poster: TimBert
Dated: Sunday February 22 2004 - 4:53:46 GMT
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/
Poster: Maz
Dated: Sunday February 22 2004 - 7:38:56 GMT
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
Poster: Ruth
Dated: Sunday February 22 2004 - 9:56:57 GMT
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:
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.. 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)";
}
]
Ruth
Poster: Maz
Dated: Sunday February 22 2004 - 10:13:03 GMT
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
Poster: Ruth
Dated: Sunday February 22 2004 - 10:16:01 GMT
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
Poster: Maz
Dated: Sunday February 22 2004 - 10:29:40 GMT
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
Poster: Ruth
Dated: Sunday February 22 2004 - 11:05:05 GMT
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
Poster: Maz
Dated: Sunday February 22 2004 - 11:13:47 GMT
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
Poster: Ruth
Dated: Sunday February 22 2004 - 14:59:05 GMT
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
Poster: TimBert
Dated: Monday February 23 2004 - 0:10:17 GMT
Thanks for your suggestion Ruth; I will play around with your idea in the next few days.
Tim
Poster: kevin3442
Dated: Monday February 23 2004 - 16:54:53 GMT
Hi Ruth,
innkeeper9 wrote:
...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
Incorporating 3D
Poster: TimBert
Dated: Monday February 23 2004 - 22:28:12 GMT
I have now used the 3D effect in a couple of different ways:
http://www.leicesterandleicestershire.com
TBA
Poster: Ruth
Dated: Monday February 23 2004 - 22:39:08 GMT
ooh, that is really neat. I like that!
Ruth
How do you make the menu go to double rows?
Poster: Thomas.Walker
Dated: Thursday October 20 2005 - 18:32:23 BST
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
Never Mind. :) I found the answer to both my questions.
Poster: Thomas.Walker
Dated: Thursday October 20 2005 - 19:33:48 BST
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