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:26
Centured Menu with different styles
Poster: keenstreet
Dated: Sunday May 30 2004 - 22:27:55 BST
Hi all,
I'm trying to do centre alignged menu in a table with one button an image for the internal pages... it all works but...
I want the mouseover for the button with the image to display a different colour.
Can it be done, or do I need to make the entire image include the text and have 'no text' for the menu?
Thanks
Vicki
Poster: Andy
Dated: Sunday May 30 2004 - 22:46:50 BST
Not sure you can apply colors to a menu item that has an image inside it.
If we could see a URL, I'd be able to say for sure though, is this possible?
Cheers
Andy
Centured Menu with different styles
Poster: keenstreet
Dated: Sunday May 30 2004 - 22:53:06 BST
Hi Andy,
It's not visible at the moment but will be later, can I let you know when it's up for you to look at?
Thanks
Vicki
Centured Menu with different styles
Poster: keenstreet
Dated: Monday May 31 2004 - 1:05:09 BST
Hi Andy,
I've ftped the site to a 'client area' :
http://www.keenstreet.com.au/client_area/celluose/
On the 'web visible' server it's got another problem as well with the button I want to act differently:
On the inner pages the 'home' button I have an image that is a rollover, I don't want the background for the words to change for this button only the text colour (which I want to be different from the other buttons).
The mouseover image is now not showing but does on my development 'web server' (a linux webserver without external IPs).
I've put the code into a SSI (server side include) which works well on my server but not up on the one I've just ftped???
The code for each page is:
<div align="center">
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;
left=200;
alwaysvisible=1;
orientation="horizontal";
overfilter="";
position="relative";
aI("text=About Us :;url=/client_area/cellulose/about.shtml;showmenu=about;");
aI("text=Research :;url=/client_area/cellulose/research.shtml;showmenu=research;");
aI("text=News :;url=/client_area/cellulose/newsletter.shtml");
aI("text=Events :;url=http://www.cellulosevalley.com/cgi-bin/calendar/calendar.cgi");
aI("text=Contact :;url=/client_area/cellulose/contacts.shtml;showmenu=contacts;");
aI("text=Links :;url=/client_area/cellulose/links.shtml;showmenu=links;");
aI("text=Home ;image=/client_area/cellulose/images/btn_homeoff.gif;overimage=/client_area/cellulose/images/btn_homeon;url=/client_area/cellulose/index.html");
}
drawMenus();
</script>
</div>
Many thanks for your help, I'm on a deadline of a couple of hours to get this happening.
Thanks again, hope you can help.
Regards
Vicki
Poster: keenstreet
Dated: Monday May 31 2004 - 1:44:09 BST
Bugger... I did a typo with the URL (rushing to finish stuff), here it is:
http://www.keenstreet.com.au/client_area/cellulose/
Centred Menu with different styles
Poster: keenstreet
Dated: Monday May 31 2004 - 21:27:07 BST
Hi Andy,
I've now ftped the site to it's home server http://www.cellulosevalley.com.au it's still got the colour mouseover the same as the other buttons on the 'home' button which is the one I'd like to change.
Regards
Vicki
Poster: Ruth
Dated: Tuesday June 1 2004 - 1:22:47 BST
Hi Vicki,
Use your homeStyle for the pages on which you have that home link you have it set it so the onbgcolor is the same as the offbgcolor so the background won't change color on mouseover, and the oncolor is silver as you set it. Get rid of the separator in that menu, you've got it set to 3 but the same color as the background so it doesn't show anyway. I'd suggest putting in subimagepadding=3; and change your padding to 5 to overcome the shift in the menu in IE from the use of overfilter shadow. Here's what I did in the homeStyle, you can test and see if that works for you.
Code:
with(homeStyle=new mm_style()){
onbgcolor="#336699";
oncolor="#F8F8F8";
offbgcolor="#336699";
offcolor="#FFFFFF";
bordercolor="#336699";
borderstyle="solid";
borderwidth=1;
padding=5;
fontsize="12px";
fontstyle="normal";
fontfamily="Verdana, Arial, Helvetica, sans-serif";
subimage="arrow.gif";
subimagepadding="3";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
In the subStyle I only made one change making the padding=5; onbgcolor="#336699";
oncolor="#F8F8F8";
offbgcolor="#336699";
offcolor="#FFFFFF";
bordercolor="#336699";
borderstyle="solid";
borderwidth=1;
padding=5;
fontsize="12px";
fontstyle="normal";
fontfamily="Verdana, Arial, Helvetica, sans-serif";
subimage="arrow.gif";
subimagepadding="3";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
On the links page I removed the divs and put a one cell table there. The menu uses divs and in some browsers it behaves weirdly if you put it in a div, so instead I used a table. Beginning with where you originally had the div I did this
Code:
<TD noWrap colSpan=2><table border="0" align="center">
<tr>
<td> <SCRIPT>
with(milonic=new menuname("Main Menu")){
style=homeStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
itemwidth=100;
itemheight=32;
aI("text=About Us:;url=/about.shtml;showmenu=about;");
aI("text=Research:;url=/research.shtml;showmenu=research;");
aI("text=News:;url=/newsletter.shtml");
aI("text=Events:;url=http://www.cellulosevalley.com/cgi-bin/calendar/calendar.cgi");
aI("text=Contact:;url=/contacts.shtml;showmenu=contacts;");
aI("text=Links:;url=/links.shtml;showmenu=links;");
aI("text=Home;image=btn_homeoff.gif; overimage=btn_homeon.gif;url=/index.html");
}
drawMenus();
</SCRIPT></td>
</tr>
</table></TD></TR>
As you can see I put in itemwidth=100 so it wouldn't expand the menu beyond the main table which you have at 740. Setting it to 150px makes the menu over 1050px wide which is wider than the table. I also put in itemheight=32, that sets the text better so it is all pretty much on the same level across because of the home image which is 32px high. The table is centered so the menu will center. Since the menu is in a table and relatively positioned, I removed the top and left. Hope that helps.
<tr>
<td> <SCRIPT>
with(milonic=new menuname("Main Menu")){
style=homeStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
itemwidth=100;
itemheight=32;
aI("text=About Us:;url=/about.shtml;showmenu=about;");
aI("text=Research:;url=/research.shtml;showmenu=research;");
aI("text=News:;url=/newsletter.shtml");
aI("text=Events:;url=http://www.cellulosevalley.com/cgi-bin/calendar/calendar.cgi");
aI("text=Contact:;url=/contacts.shtml;showmenu=contacts;");
aI("text=Links:;url=/links.shtml;showmenu=links;");
aI("text=Home;image=btn_homeoff.gif; overimage=btn_homeon.gif;url=/index.html");
}
drawMenus();
</SCRIPT></td>
</tr>
</table></TD></TR>
Ruth