easy to understand images -- please help

[Snipboy]

This is how my website currently looks:


This is milonic's website:


I want the mouseover as seen on milonic's website to be on my site as shown here:


How can i do this? I am using this dropdown menu http://milonic.com/menusample66.php
I simply want to incorporate the rectangular mouseover look onto both my mainmenu titles and submenu links.

Please respond. Thanks

[Snipboy]

This rectangular mouseover look can also be viewed here:
http://www.hearthview.com/
the sublinks are highlighted by a rectangle that does not cover the entire space.

[Ruth]

Hi,

I'm sorry but I don't know what the problem is. On the last link you provided when I click on About Us/Company History on that page the Complete About us is highlighted and the Company History including the arrow is highlighted. Where are you getting the one that doesn't highlight the arrow?

Ruth

[Snipboy]

The last link i provided (http://www.hearthview.com/) was meant to be an example of what i want my sublink to look like. I'm trying to incorporate the same highlighting properties seen on http://www.hearthview.com/ 's dropdown menu into my site which in its current state looks like the very first image i posted.

[Ruth]

Hi,

Well, we are not going to be able to figure it out from pictures since as you see it works on this site and the site you posted for us to check, so something is wrong either on your site or in your coding so we'd need to see it. It could be something in css, menu version, something coded in your data file, something in html .... without the site or all the site info we can't test to find out what it is.

Ruth

[Snipboy]

My menu data code:



fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;




with(mainmenuStyle=new mm_style()){
//styleid=1;
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
imagepadding=3;
//offbgcolor="#E5E8E7";
//offcolor="#515151";
//onbgcolor="#ffffff";
//oncolor="#000000";
onsubimage="bob_arrow.gif";
padding=5;
subimage="bob_arrow1.gif";
subimagepadding=6;
}

with(redmenuStyle=new mm_style()){
styleid=1;
bordercolor="#6D6E72";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#e93030";
oncolor="#ebebeb";
outfilter="fade(duration=0.3)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=180, Strength=3)";
onsubimage="bob_left.gif";
padding=5;
subimage="bob_left1.gif";
subimagepadding=6;
}

with(orangemenuStyle=new mm_style()){
bordercolor="#6D6E72";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#e99430";
oncolor="#ebebeb";
outfilter="fade(duration=0.3)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=180, Strength=3)";
onsubimage="bob_left.gif";
padding=5;
subimage="bob_left1.gif";
subimagepadding=6;
}

with(yellowmenuStyle=new mm_style()){
bordercolor="#6D6E72";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#e9e230";
oncolor="#ebebeb";
outfilter="fade(duration=0.3)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=180, Strength=3)";
onsubimage="bob_left.gif";
padding=5;
subimage="bob_left1.gif";
subimagepadding=6;
}

with(greenmenuStyle=new mm_style()){
bordercolor="#6D6E72";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#69d34d";
oncolor="#ebebeb";
outfilter="fade(duration=0.3)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=180, Strength=3)";
onsubimage="bob_left.gif";
padding=5;
subimage="bob_left1.gif";
subimagepadding=6;
}

with(bluemenuStyle=new mm_style()){
bordercolor="#6D6E72";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#30c0e9";
oncolor="#ebebeb";
outfilter="fade(duration=0.3)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=180, Strength=3)";
onsubimage="bob_left.gif";
padding=5;
subimage="bob_left1.gif";
subimagepadding=6;
}

with(purplemenuStyle=new mm_style()){
bordercolor="#6D6E72";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#e2e2e2";
oncolor="#d5d5d5";
outfilter="fade(duration=0.3)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=180, Strength=3)";
onsubimage="bob_left.gif";
padding=5;
subimage="bob_left1.gif";
subimagepadding=6;
}

with(milonic=new menuname("Milonic")){
itemheight=24;
itemwidth=126;
style=redmenuStyle;
aI("bgimage=mint_top.gif;text=Product Purchasing Page;url=http://milonic.com/cbuy.php;");
aI("bgimage=mint_mid.gif;text=Contact Us;url=http://milonic.com/contact.php;");
aI("bgimage=mint_mid.gif;text=Newsletter Subscription;url=http://milonic.com/newsletter.php;");
aI("bgimage=mint_mid.gif;text=FAQ;url=http://milonic.com/menufaq.php;");
aI("bgimage=mint_mid.gif;text=Discussion Forum;url=http://forum.milonic.com/;");
aI("bgimage=mint_mid.gif;text=Software License Agreement;url=http://milonic.com/license.php;");
aI("bgimage=mint_bot.gif;text=Privacy Policy;url=http://milonic.com/privacy.php;");
}

with(milonic=new menuname("Partners")){
itemheight=24;
itemwidth=126;
style=orangemenuStyle;
aI("bgimage=mint_top.gif;text=Our Web Hosting;url=http://www.a-q.co.uk/;");
aI("bgimage=mint_mid.gif;text=SMS 2 Email;url=http://www.sms2email.com/;");
aI("bgimage=mint_bot.gif;text=WebSmith;url=http://www.softidiom.com/?milonicmenu;");
}

with(milonic=new menuname("Links")){
itemheight=24;
itemwidth=126;
style=yellowmenuStyle;
aI("bgimage=mint_top.gif;text=Apache Web ;url=http://www.apache.org/;");
aI("bgimage=mint_mid.gif;text=MySQL Database;url=http://ww.mysql.com/;");
aI("bgimage=mint_mid.gif;text=PHP - Develot;url=http://www.php.net/;");
aI("bgimage=mint_mid.gif;text=phpBB Web Foruem;url=http://www.phpbb.net/;");
aI("bgimage=mint_bot.gif;showmenu=Anti Spam;text=Anti Spam;");
}

with(milonic=new menuname("Anti Spam")){
itemheight=24;
itemwidth=126;
style=greenmenuStyle;
aI("bgimage=mint_top.gif;text=Spam Cop;url=http://www.spamcop.net/;");
aI("bgimage=mint_mid.gif;text=Mime Defang;url=http://www.mimedefang.org/;");
aI("bgimage=mint_mid.gif;text=Spam Assassin;url=http://www.spamassassin.org/;");
aI("bgimage=mint_bot.gif;text=link link xxxxxlink;url=http://www.spamassassin.org/;");
}

with(milonic=new menuname("MyMilonic")){
itemheight=24;
itemwidth=126;
style=bluemenuStyle;
aI("bgimage=mint_top.gif;text=Login;url=http://milonic.com/login.php;");
aI("bgimage=mint_mid.gif;text=Licenses;url=http://milonic.com/mylicenses.php;");
aI("bgimage=mint_mid.gif;text=Invoices;url=http://milonic.com/myinvoices.php;");
aI("bgimage=mint_mid.gif;text=Make Support Request;url=http://milonic.com/reqsupport.php;");
aI("bgimage=mint_mid.gif;text=View Support Request;url=http://milonic.com/mysupport.php;");
aI("bgimage=mint_bot.gif;text=Your Details;url=http://milonic.com/mydetails.php;");
}

drawMenus();

[Ruth]

Hi,

I'm sorry, but without all the stuff I can't test this.

1. You don't seem to have a main menu in the data file so that must be on the page itself.

2. I have none of those images to even try to cobble something together and test it. Since you're problem seems to be the highlighting to include the subimages I'd need them also.

3. I have no idea what version of the menu you have.

I just tested your data file, changing the images to an arrow I had and setting up a main menu on a page in a table and the highlight works just fine, as you want it to work, so without the html page, any css, menu version, and images we have no idea what is wrong and no way to test with just the data file.

Ruth

[kevin3442]

I think I get it...

The space between the item highlight and the edge of the menu is caused by the use of the margin property in the menu definition. E.g.:

Code: Select all

with(milonic=new menuname("Milonic")){ 
itemheight=24; 
itemwidth=126; 
style=redmenuStyle; 
margin=3;
aI("bgimage=mint_top.gif;text=Product Purchasing Page;url=http://milonic.com/cbuy.php;"); 
aI("bgimage=mint_mid.gif;text=Contact Us;url=http://milonic.com/contact.php;"); 
aI("bgimage=mint_mid.gif;text=Newsletter Subscription;url=http://milonic.com/newsletter.php;"); 
aI("bgimage=mint_mid.gif;text=FAQ;url=http://milonic.com/menufaq.php;"); 
aI("bgimage=mint_mid.gif;text=Discussion Forum;url=http://milonic.com/forum/;"); 
aI("bgimage=mint_mid.gif;text=Software License Agreement;url=http://milonic.com/license.php;"); 
aI("bgimage=mint_bot.gif;text=Privacy Policy;url=http://milonic.com/privacy.php;"); 
}

Look to see where the Milonic sample uses the margin property; I think you'll understand its effect.

Hope that helps,

Kevin

[Ruth]

Hi,

After looking some more, I realized you're not going to get any kind of 'highlight' since you don't have the page color codes set, i.e. pagebgcolor, pagebgimage, pagecolor etc.

However, the sites you gave as examples use off and onbgcolor so they can use pagebgcolor and that is where they get that highlight color you see that goes all the way across. Your site uses bgimages and doing pagebgcolor will not show up since the bgimage is what you see. In order to do any kind of highlighting you have to either

1. only use pagecolor, which will change the color of the font

or

2. create different colored bgimages for the items.

Since you are using different images for top, mid, bottom you'd have to make different pagebgimages for each of the items based on top, mid, bottom. You'd need to create a page_top.gif, page_mid.gif, page_bot.gif in whatever color you want and you'd add the call for it to the aI strings.

As an example in the ones that use the mint_top.gif you'd code it

Code: Select all

pagebgimage=page_top.gif;pagecolor="#ffffff";

Of course the pagecolor can be whatever would go with the images you create for this.

Hope this helps.

Ruth