Hi there!
I tying to create an CSS Based Menu and I want to know how to make reference to the CSS file (wich contains the onclass and offclass) from de menu_data.js , or there is another way to link my CSS file to the menu_data.js?
thanks in advance.
JP
Problems with DHTML Milonic Menu
-
jpsabadini
- Beginner
- Posts: 5
- Joined: Wed May 04, 2005 8:19 pm
I already red http://milonic.com/cssbasedmenus.php! But it have very poor information. The only thing that I don't figured out is how to apply my yyyyy.css to the menu_data.js
I have in my menu_data.js :
and on my html page I have:
the yyyyy.css:
But the Milonic Menu it doesn't seeing the CSS
JP
I have in my menu_data.js :
Code: Select all
...
with(menuStyle=new mm_style()){
onclass="on";
offclass="off";
}
...Code: Select all
<html>
<head>
//here I include the yyyyy.css
</head>
<body>
...Code: Select all
.on{
oncolor="#FFFFFF";
onbgcolor="#666666";
offcolor="#FFFFFF";
offbgcolor="transparent";
borderstyle="solid";
bordercolor="#666666";
borderwidth=2;
separatorcolor="#000000";
separatorsize="1";
padding=5;
fontsize="9pt";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana,Arial,sans-serif";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
}
.off{
alignment="left";
oncolor="#FFFFFF";
onbgcolor="#93A9AE";
offcolor="#000000";
offbgcolor="#93A9AE";
bordercolor="#666666";
borderstyle="solid";
borderwidth=2;
separatorheight=20;
separatorcolor="#FFFFFF";
separatorsize="1";
separatorpadding="2";
padding=3;
itemwidth=250;
itemheight=24;
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana,Arial,sans-serif";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#FFFFFF";
subimage="imgs/menu/arrow.gif";
subimagepadding=2;
subimageposition="middle";
}JP
If you could post a test page it would be helpful. We could then look at your stylesheet and the menu_data.js file.
The only way I know to apply class is to create an on class and and off class in the stylesheet. i.e. .mymenu_on{the style stuff} and an off class i.e .mymenu_off{the style stuff} Then in the menu data file, in whichever menus I want the classes I made to apply I put offclass="mymenu_off"; and onclass="mymenu_on" You can name the classes whatever you want in your stylesheet, of course.
Ruth
The only way I know to apply class is to create an on class and and off class in the stylesheet. i.e. .mymenu_on{the style stuff} and an off class i.e .mymenu_off{the style stuff} Then in the menu data file, in whichever menus I want the classes I made to apply I put offclass="mymenu_off"; and onclass="mymenu_on" You can name the classes whatever you want in your stylesheet, of course.
Ruth
Hi again,
I just took a good look at your style sheet [
which I hadn't done before my last post.
You have to use css styles in the style sheet, not the menu coding for styles. So, in the off class you would define only the off mouse style and in the on class you would define the on. For example:
and so on for all the things that take css. And, then you would create the on class in the same manner using the on styles you have but in css form.
Then you would do as I noted originally and as you have done now, in the menu style section offclass="off"; and onclass="on";
Ruth
I just took a good look at your style sheet [
which I hadn't done before my last post.You have to use css styles in the style sheet, not the menu coding for styles. So, in the off class you would define only the off mouse style and in the on class you would define the on. For example:
Code: Select all
off{
background-color: #93A9AE; border: 2px solid #666666; padding:3px; font: font: normal bold 8pt Verdana,Arial,sans-serif;}Then you would do as I noted originally and as you have done now, in the menu style section offclass="off"; and onclass="on";
Ruth
-
jpsabadini
- Beginner
- Posts: 5
- Joined: Wed May 04, 2005 8:19 pm
thnks Ruth!!!! But I am still stuck...
here are the complete code:
tmp.html:
menu_data.js:
thanks
here are the complete code:
tmp.html:
Code: Select all
<html>
<head>
<style type="text/css">
menuStyle.on{
oncolor="#FFFFFF";
onbgcolor="#666666";
offcolor="#FFFFFF";
offbgcolor="transparent";
borderstyle="solid";
bordercolor="#666666";
borderwidth=2;
separatorcolor="#000000";
separatorsize="1";
padding=5;
fontsize="9pt";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana,Arial,sans-serif";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
}
menuStyle.off{
alignment="left";
oncolor="#FFFFFF";
onbgcolor="#93A9AE";
offcolor="#000000";
offbgcolor="#93A9AE";
bordercolor="#666666";
borderstyle="solid";
borderwidth=2;
separatorheight=20;
separatorcolor="#FFFFFF";
separatorsize="1";
separatorpadding="2";
padding=3;
itemwidth=250;
itemheight=24;
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana,Arial,sans-serif";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#FFFFFF";
subimage="imgs/menu/arrow.gif";
subimagepadding=2;
subimageposition="middle";
}
</style>
</head>
<body>
<script type="text/javascript" src="milonic_src.js"></script>
<a class=milonic href="https://milonic.com/">JavaScript DHTML Popup Menus From Milonic.com</a>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>
</body>
</html>
Code: Select all
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
with(menuStyle=new mm_style()){
onclass="on";
offclass="off";
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
aI("status=Back To Home Page;text=Home;url=http://milonic.com/;");
aI("showmenu=Samples;text=Menu Samples;");
aI("showmenu=Milonic;text=Milonic;");
aI("showmenu=Partners;text=Partners;");
aI("showmenu=Links;text=Links;");
aI("showmenu=MyMilonic;text=My Milonic;");
}
with(milonic=new menuname("Samples")){
overflow="scroll";
style=menuStyle;
aI("text=Plain Text Horizontal Style DHTML Menu Bar;url=http://milonic.com/menusample1.php;")
aI("text=Vertical Plain Text Menu;url=http://milonic.com/menusample2.php;onfunction=showtip('Another common sample This time, the sub<br>menus are opened from a vertical main menu') ;")
aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;onfunction=showtip('If space is limited, this menu sample shows how<br>to open sub-menus in a horizontal orientation') ;")
aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;onfunction=showtip('The popup function can also open menus<br>based on mouse action but also positioned<br>relative to an image') ;")
aI("text=Classic XP Style Menu;url=http://milonic.com/menusample82.php;")
aI("text=XP Style;url=http://milonic.com/menusample86.php;")
aI("text=XP Taskbar Style Menu;url=http://milonic.com/menusample83.php;")
aI("text=Office XP Style Menu;url=http://milonic.com/menusample47.php;")
aI("text=Office 2003 Style Menu;url=http://milonic.com/menusample46.php;")
aI("text=Apple Mac Style Menu;url=http://milonic.com/menusample72.php;")
aI("text=Amazon Style Tab Menu;url=http://milonic.com/menusample74.php;")
aI("text=Milonic Home Menu;url=http://milonic.com/menusample78.php;")
aI("text=Windows 98 Style Menu;url=http://milonic.com/menusample13.php;onfunction=showtip('The Microfost Windows 98 3D look & feel can be<br>acheived by adding high and low 3D colors to<br>your menu styles') ;")
aI("text=Multiple Styles Menu;url=http://milonic.com/menusample5.php;onfunction=showtip('Demonstrating how to declare properties using different<br>menu styles. Separate styles can be declared for each<br>menu ora style can be used globally for every menu') ;")
aI("text=Multi Colored Menu Items;url=http://milonic.com/menusample80.php;")
aI("text=Multi Colored Menus Using Styles;url=http://milonic.com/menusample7.php;onfunction=showtip('') ;")
aI("text=Multi Tab;url=http://milonic.com/menusample50.php;")
aI("text=Tab Top;url=http://milonic.com/menusample52.php;")
aI("text=Multi Columns;url=http://milonic.com/menusample73.php;")
aI("text=100% Width Span Menu;url=http://milonic.com/menusample26.php;onfunction=showtip('Spanning the menu to 100% of the browser width<br>will allow for the menu to become a page separator') ;")
aI("text=Follow Scrolling Style Menu;url=http://milonic.com/menusample10.php;onfunction=showtip('Keeping the menu available at all times no matter<br>where your user has scrolled to, can be acheived by<br>setting the followscroll property for your main menu') ;")
aI("text=Menu Positioning With Offsets;url=http://milonic.com/menusample23.php;onfunction=showtip('Setting the position of menus using screenposition<br>is a handy way of ensuring that your menus will<br>always be centered or positioned exactly how<br>you need') ;")
aI("text=Table Based (Relative) Menus;url=http://milonic.com/menusample9.php;onfunction=showtip('Positioning menus relative to your web pages<br>flow can be acheived by setting the menu style<br>property position to relative') ;")
aI("text=Opening Windows and Frames with the Menu;url=http://milonic.com/menusample11.php;onfunction=showtip('Opening links in other windows or other frames<br>is easy by using the target menu item property.') ;")
aI("text=Menus Over Form Selects, Flash and Java Applets;url=http://milonic.com/menusample14.php;onfunction=showtip('Older browsers have a problem with form objects<br>and other HTML objects that naturally sit higher in<br>the browser layer hiding the menu.<br>The workaround fr this is to use DIV hiding') ;")
aI("text=Activating Functions on Mouseover;url=http://milonic.com/menusample15.php;onfunction=showtip('onfunction, offfunction and clickfunction are<br>built in features that allow you to add<br>custom JavaScript to several menu events') ;")
aI("text=Drag Drop Menus;url=http://milonic.com/menusample22.php;onfunction=showtip('By setting your menus type to be <b>draggable</b><br>this will allow for your users to move<br>main menus by drag and drop') ;")
aI("text=Menus with Header Type Items;url=http://milonic.com/menusample8.php;onfunction=showtip('If you need to separate blocks of menu items within<br>a single menu, Headers are a handy way of<br>segragating your menu items') ;")
aI("text=Right To Left Openstyle;url=http://milonic.com/menusample65.php;")
aI("text=Up Openstyle Featuring Headers;url=http://milonic.com/menusample33.php;")
aI("text=DHTML Menus and Tooltips;url=http://milonic.com/menusample6.php;onfunction=showtip('Tooltips are a handy way of adding more information<br>informing the user how to navigate your website or<br>use your application incorporating the menu') ;")
aI("text=Unlimited Level Menus Example;url=http://milonic.com/menusample67.php;")
aI("text=Context Right Click Menu;url=http://milonic.com/menusample27.php;onfunction=showtip('Context menus are easily configured with the<br>Milonic DHTML Menu. No special requirements are needed<br>Except for a small custom JavaScript module') ;")
aI("text=Menus built entirely from images;url=http://milonic.com/menusample18.php;onfunction=showtip('If you prefer to build your menus completely<br>from images this is easily possible, let<br>the menu take care of your images.') ;")
aI("text=Static Images Sample;url=http://milonic.com/menusample16.php;onfunction=showtip('Inserting images inside menus is made easy<br>with the use of the image property for menu items') ;")
aI("text=Rollover Swap Images Sample;url=http://milonic.com/menusample17.php;onfunction=showtip('Swaping images on mouse over can be acheived<br>by setting the image and onimage properties<br>for your menu items') ;")
aI("text=Background Item Images;url=http://milonic.com/menusample20.php;onfunction=showtip('Each menu item can have its own background image.<br>Text can be overlaid meaning you only need to build<br>and download one image') ;")
aI("text=Background Image Buttons;url=http://milonic.com/menusample89.php;")
aI("text=Menu Background Images;url=http://milonic.com/menusample76.php;")
aI("text=Creating Texture with Menu Background Images;url=http://milonic.com/menusample19.php;onfunction=showtip('Adding a background image to your menus can<br> vastly improve the apperance of otherwise dull<br>backgrounds.') ;")
aI("text=Static Background Item Images;url=http://milonic.com/menusample71.php;")
aI("text=Vertical Static Background Item Images;url=http://milonic.com/menusample87.php;")
aI("text=World Map Sample;url=http://milonic.com/menusample92.php;")
aI("text=US Map Sample;url=http://milonic.com/menusample91.php;")
aI("text=Image Map Sample;url=http://milonic.com/menusample4.php;onfunction=showtip('Image maps can be used to open menus using the popup<br>function based on the HTML object AREA') ;")
aI("text=Rounded Edges Imperial Style;url=http://milonic.com/menusample21.php;onfunction=showtip('Including rounded edges to menus') ;")
aI("text=Corporation;url=http://milonic.com/menusample40.php;")
aI("text=International;url=http://milonic.com/menusample70.php;")
aI("text=Clean;url=http://milonic.com/menusample32.php;")
aI("text=3D Gradient Block;url=http://milonic.com/menusample57.php;")
aI("text=Descreet;url=http://milonic.com/menusample42.php;")
aI("text=Agriculture;url=http://milonic.com/menusample41.php;")
aI("text=Breeze;url=http://milonic.com/menusample29.php;")
aI("text=Chart;url=http://milonic.com/menusample66.php;")
aI("text=Cartoon;url=http://milonic.com/menusample77.php;")
aI("text=Start Button Menu;url=http://milonic.com/menusample69.php;")
aI("text=Tramline;url=http://milonic.com/menusample54.php;")
}
with(milonic=new menuname("Milonic")){
style=menuStyle;
aI("text=Product Purchasing Page;url=http://milonic.com/cbuy.php;");
aI("text=Contact Us;url=http://milonic.com/contact.php;");
aI("text=Newsletter Subscription;url=http://milonic.com/newsletter.php;");
aI("text=FAQ;url=http://milonic.com/menufaq.php;");
aI("text=Discussion Forum;url=http://milonic.com/forum/;");
aI("text=Software License Agreement;url=http://milonic.com/license.php;");
aI("text=Privacy Policy;url=http://milonic.com/privacy.php;");
}
with(milonic=new menuname("Partners")){
style=menuStyle;
aI("status=(aq) Web Server Hosting & Services;text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("text=WebSmith;url=websmith;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
}
with(milonic=new menuname("Links")){
style=menuStyle;
aI("status=Apache Web Server, the basis of Milonic's Web Site;text=Apache Web Server;url=http://www.apache.org/;");
aI("status=MySQL, Milonic's Prefered Choice of Database Server;text=MySQL Database Server;url=http://ww.mysql.com/;");
aI("status=PHP - Web Server Scripting as used by Milonic;text=PHP - Development;url=http://www.php.net/;");
aI("status=PHP Based Web Forum, Milonic's Recommended Forum Software;text=phpBB Web Forum System;url=http://www.phpbb.net/;");
aI("showmenu=Anti Spam;status=Anti Spam Solutions, as used by Milonic;text=Anti Spam Tools;");
}
with(milonic=new menuname("Anti Spam")){
style=menuStyle;
aI("text=Spam Cop;url=http://www.spamcop.net/;");
aI("text=Mime Defang;url=http://www.mimedefang.org/;");
aI("text=Spam Assassin;url=http://www.spamassassin.org/;");
with(milonic=new menuname("MyMilonic")){
style=menuStyle;
aI("text=Login;url=http://milonic.com/login.php;");
aI("text=Licenses;url=http://milonic.com/mylicenses.php;");
aI("text=Invoices;url=http://milonic.com/myinvoices.php;");
aI("text=Make Support Request;url=http://milonic.com/reqsupport.php;");
aI("text=View Support Requests;url=http://milonic.com/mysupport.php;");
aI("text=Your Details;url=http://milonic.com/mydetails.php;");
}
drawMenus();
thanks
Hi jp,
I think you are misunderstanding when they talk about a 'css' menu. They don't mean you just copy the style codes into your css file, you have to change them to the css way of expressing them.
For example, in the menu_data.js file you code the color of the background when the mouse is not on it as offbgcolor= and the color of the background when the mouse is on as onbgcolor= There is no such css coding as onbgcolor and offbgcolor. To get those two properties from a css file for the menu you need to create two clases as you have. You name them off and on. In the off class you would put in offbgcolor as background-color: #93A9AE; That is the css code for background-color. In the on class you would put in the same code but your onbgcolor, background-color: #93A9AE; even though they are the same color you have to put it in each class if you want it to apply to each mouse state on/off.
To do the coding for the rest of the menu properties you have to know the equivalent css code to use. I don't think all the menu properties have equivlent codes in css. For example, I don't think there is a separator code in css. Any code that you can't do an equivalent in css you would put into the actual menuStyle in the menu_data.js file. You can have codes in the style and still call the offclass and onclass. i.e.
So if you want to design a css menu style you have to use the css codes not the menu codes. I hope that makes it clearer.
Ruth
I think you are misunderstanding when they talk about a 'css' menu. They don't mean you just copy the style codes into your css file, you have to change them to the css way of expressing them.
For example, in the menu_data.js file you code the color of the background when the mouse is not on it as offbgcolor= and the color of the background when the mouse is on as onbgcolor= There is no such css coding as onbgcolor and offbgcolor. To get those two properties from a css file for the menu you need to create two clases as you have. You name them off and on. In the off class you would put in offbgcolor as background-color: #93A9AE; That is the css code for background-color. In the on class you would put in the same code but your onbgcolor, background-color: #93A9AE; even though they are the same color you have to put it in each class if you want it to apply to each mouse state on/off.
To do the coding for the rest of the menu properties you have to know the equivalent css code to use. I don't think all the menu properties have equivlent codes in css. For example, I don't think there is a separator code in css. Any code that you can't do an equivalent in css you would put into the actual menuStyle in the menu_data.js file. You can have codes in the style and still call the offclass and onclass. i.e.
Code: Select all
with(menuStyle=new mm_style()){
offclass="yourOffClassName";
onclass="yourOnClassName";
separatorheight=20;
separatorcolor="#FFFFFF";
separatorsize="1";
separatorpadding="2";
} Ruth
-
jpsabadini
- Beginner
- Posts: 5
- Joined: Wed May 04, 2005 8:19 pm
-
jpsabadini
- Beginner
- Posts: 5
- Joined: Wed May 04, 2005 8:19 pm
Ruth!!! Me again!
I wrote my menu data like this:
And my html page is simple like this:
What I'm doing wrong?
JP
I wrote my menu data like this:
Code: Select all
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;
with(menuStyle=new mm_style()){
offclass="off";
onclass="on";
.on{
oncolor="#FFFFFF";
onbgcolor="#666666";
offcolor="#FFFFFF";
offbgcolor="transparent";
borderstyle="solid";
bordercolor="#666666";
borderwidth=2;
separatorcolor="#000000";
separatorsize="1";
padding=5;
fontsize="9pt";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana,Arial,sans-serif";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
}
.off{
alignment="left";
oncolor="#FFFFFF";
onbgcolor="#93A9AE";
offcolor="#000000";
offbgcolor="#93A9AE";
bordercolor="#666666";
borderstyle="solid";
borderwidth=2;
separatorheight=20;
separatorcolor="#FFFFFF";
separatorsize="1";
separatorpadding="2";
padding=3;
itemwidth=250;
itemheight=24;
fontsize="8pt";
fontstyle="normal";
fontweight="bold";
fontfamily="Verdana,Arial,sans-serif";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#FFFFFF";
subimage="imgs/menu/arrow.gif";
subimagepadding=2;
subimageposition="middle";
}
}
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
aI("status=Back To Home Page;text=Home;url=http://milonic.com/;");
aI("showmenu=Samples;text=Menu Samples;");
aI("showmenu=Milonic;text=Milonic;");
aI("showmenu=Partners;text=Partners;");
aI("showmenu=Links;text=Links;");
aI("showmenu=MyMilonic;text=My Milonic;");
}
with(milonic=new menuname("Samples")){
overflow="scroll";
style=menuStyle;
aI("text=Plain Text Horizontal Style DHTML Menu Bar;url=http://milonic.com/menusample1.php;")
aI("text=Vertical Plain Text Menu;url=http://milonic.com/menusample2.php;onfunction=showtip('Another common sample This time, the sub<br>menus are opened from a vertical main menu') ;")
aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;onfunction=showtip('If space is limited, this menu sample shows how<br>to open sub-menus in a horizontal orientation') ;")
aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;onfunction=showtip('The popup function can also open menus<br>based on mouse action but also positioned<br>relative to an image') ;")
aI("text=Classic XP Style Menu;url=http://milonic.com/menusample82.php;")
aI("text=XP Style;url=http://milonic.com/menusample86.php;")
aI("text=XP Taskbar Style Menu;url=http://milonic.com/menusample83.php;")
aI("text=Office XP Style Menu;url=http://milonic.com/menusample47.php;")
aI("text=Office 2003 Style Menu;url=http://milonic.com/menusample46.php;")
aI("text=Apple Mac Style Menu;url=http://milonic.com/menusample72.php;")
aI("text=Amazon Style Tab Menu;url=http://milonic.com/menusample74.php;")
aI("text=Milonic Home Menu;url=http://milonic.com/menusample78.php;")
aI("text=Windows 98 Style Menu;url=http://milonic.com/menusample13.php;onfunction=showtip('The Microfost Windows 98 3D look & feel can be<br>acheived by adding high and low 3D colors to<br>your menu styles') ;")
aI("text=Multiple Styles Menu;url=http://milonic.com/menusample5.php;onfunction=showtip('Demonstrating how to declare properties using different<br>menu styles. Separate styles can be declared for each<br>menu ora style can be used globally for every menu') ;")
aI("text=Multi Colored Menu Items;url=http://milonic.com/menusample80.php;")
aI("text=Multi Colored Menus Using Styles;url=http://milonic.com/menusample7.php;onfunction=showtip('') ;")
aI("text=Multi Tab;url=http://milonic.com/menusample50.php;")
aI("text=Tab Top;url=http://milonic.com/menusample52.php;")
aI("text=Multi Columns;url=http://milonic.com/menusample73.php;")
aI("text=100% Width Span Menu;url=http://milonic.com/menusample26.php;onfunction=showtip('Spanning the menu to 100% of the browser width<br>will allow for the menu to become a page separator') ;")
aI("text=Follow Scrolling Style Menu;url=http://milonic.com/menusample10.php;onfunction=showtip('Keeping the menu available at all times no matter<br>where your user has scrolled to, can be acheived by<br>setting the followscroll property for your main menu') ;")
aI("text=Menu Positioning With Offsets;url=http://milonic.com/menusample23.php;onfunction=showtip('Setting the position of menus using screenposition<br>is a handy way of ensuring that your menus will<br>always be centered or positioned exactly how<br>you need') ;")
aI("text=Table Based (Relative) Menus;url=http://milonic.com/menusample9.php;onfunction=showtip('Positioning menus relative to your web pages<br>flow can be acheived by setting the menu style<br>property position to relative') ;")
aI("text=Opening Windows and Frames with the Menu;url=http://milonic.com/menusample11.php;onfunction=showtip('Opening links in other windows or other frames<br>is easy by using the target menu item property.') ;")
aI("text=Menus Over Form Selects, Flash and Java Applets;url=http://milonic.com/menusample14.php;onfunction=showtip('Older browsers have a problem with form objects<br>and other HTML objects that naturally sit higher in<br>the browser layer hiding the menu.<br>The workaround fr this is to use DIV hiding') ;")
aI("text=Activating Functions on Mouseover;url=http://milonic.com/menusample15.php;onfunction=showtip('onfunction, offfunction and clickfunction are<br>built in features that allow you to add<br>custom JavaScript to several menu events') ;")
aI("text=Drag Drop Menus;url=http://milonic.com/menusample22.php;onfunction=showtip('By setting your menus type to be <b>draggable</b><br>this will allow for your users to move<br>main menus by drag and drop') ;")
aI("text=Menus with Header Type Items;url=http://milonic.com/menusample8.php;onfunction=showtip('If you need to separate blocks of menu items within<br>a single menu, Headers are a handy way of<br>segragating your menu items') ;")
aI("text=Right To Left Openstyle;url=http://milonic.com/menusample65.php;")
aI("text=Up Openstyle Featuring Headers;url=http://milonic.com/menusample33.php;")
aI("text=DHTML Menus and Tooltips;url=http://milonic.com/menusample6.php;onfunction=showtip('Tooltips are a handy way of adding more information<br>informing the user how to navigate your website or<br>use your application incorporating the menu') ;")
aI("text=Unlimited Level Menus Example;url=http://milonic.com/menusample67.php;")
aI("text=Context Right Click Menu;url=http://milonic.com/menusample27.php;onfunction=showtip('Context menus are easily configured with the<br>Milonic DHTML Menu. No special requirements are needed<br>Except for a small custom JavaScript module') ;")
aI("text=Menus built entirely from images;url=http://milonic.com/menusample18.php;onfunction=showtip('If you prefer to build your menus completely<br>from images this is easily possible, let<br>the menu take care of your images.') ;")
aI("text=Static Images Sample;url=http://milonic.com/menusample16.php;onfunction=showtip('Inserting images inside menus is made easy<br>with the use of the image property for menu items') ;")
aI("text=Rollover Swap Images Sample;url=http://milonic.com/menusample17.php;onfunction=showtip('Swaping images on mouse over can be acheived<br>by setting the image and onimage properties<br>for your menu items') ;")
aI("text=Background Item Images;url=http://milonic.com/menusample20.php;onfunction=showtip('Each menu item can have its own background image.<br>Text can be overlaid meaning you only need to build<br>and download one image') ;")
aI("text=Background Image Buttons;url=http://milonic.com/menusample89.php;")
aI("text=Menu Background Images;url=http://milonic.com/menusample76.php;")
aI("text=Creating Texture with Menu Background Images;url=http://milonic.com/menusample19.php;onfunction=showtip('Adding a background image to your menus can<br> vastly improve the apperance of otherwise dull<br>backgrounds.') ;")
aI("text=Static Background Item Images;url=http://milonic.com/menusample71.php;")
aI("text=Vertical Static Background Item Images;url=http://milonic.com/menusample87.php;")
aI("text=World Map Sample;url=http://milonic.com/menusample92.php;")
aI("text=US Map Sample;url=http://milonic.com/menusample91.php;")
aI("text=Image Map Sample;url=http://milonic.com/menusample4.php;onfunction=showtip('Image maps can be used to open menus using the popup<br>function based on the HTML object AREA') ;")
aI("text=Rounded Edges Imperial Style;url=http://milonic.com/menusample21.php;onfunction=showtip('Including rounded edges to menus') ;")
aI("text=Corporation;url=http://milonic.com/menusample40.php;")
aI("text=International;url=http://milonic.com/menusample70.php;")
aI("text=Clean;url=http://milonic.com/menusample32.php;")
aI("text=3D Gradient Block;url=http://milonic.com/menusample57.php;")
aI("text=Descreet;url=http://milonic.com/menusample42.php;")
aI("text=Agriculture;url=http://milonic.com/menusample41.php;")
aI("text=Breeze;url=http://milonic.com/menusample29.php;")
aI("text=Chart;url=http://milonic.com/menusample66.php;")
aI("text=Cartoon;url=http://milonic.com/menusample77.php;")
aI("text=Start Button Menu;url=http://milonic.com/menusample69.php;")
aI("text=Tramline;url=http://milonic.com/menusample54.php;")
}
with(milonic=new menuname("Milonic")){
style=menuStyle;
aI("text=Product Purchasing Page;url=http://milonic.com/cbuy.php;");
aI("text=Contact Us;url=http://milonic.com/contact.php;");
aI("text=Newsletter Subscription;url=http://milonic.com/newsletter.php;");
aI("text=FAQ;url=http://milonic.com/menufaq.php;");
aI("text=Discussion Forum;url=http://milonic.com/forum/;");
aI("text=Software License Agreement;url=http://milonic.com/license.php;");
aI("text=Privacy Policy;url=http://milonic.com/privacy.php;");
}
with(milonic=new menuname("Partners")){
style=menuStyle;
aI("status=(aq) Web Server Hosting & Services;text=(aq) Web Hosting;url=http://www.a-q.co.uk/;");
aI("text=WebSmith;url=websmith;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
}
with(milonic=new menuname("Links")){
style=menuStyle;
aI("status=Apache Web Server, the basis of Milonic's Web Site;text=Apache Web Server;url=http://www.apache.org/;");
aI("status=MySQL, Milonic's Prefered Choice of Database Server;text=MySQL Database Server;url=http://ww.mysql.com/;");
aI("status=PHP - Web Server Scripting as used by Milonic;text=PHP - Development;url=http://www.php.net/;");
aI("status=PHP Based Web Forum, Milonic's Recommended Forum Software;text=phpBB Web Forum System;url=http://www.phpbb.net/;");
aI("showmenu=Anti Spam;status=Anti Spam Solutions, as used by Milonic;text=Anti Spam Tools;");
}
with(milonic=new menuname("Anti Spam")){
style=menuStyle;
aI("text=Spam Cop;url=http://www.spamcop.net/;");
aI("text=Mime Defang;url=http://www.mimedefang.org/;");
aI("text=Spam Assassin;url=http://www.spamassassin.org/;");
}
with(milonic=new menuname("MyMilonic")){
style=menuStyle;
aI("text=Login;url=http://milonic.com/login.php;");
aI("text=Licenses;url=http://milonic.com/mylicenses.php;");
aI("text=Invoices;url=http://milonic.com/myinvoices.php;");
aI("text=Make Support Request;url=http://milonic.com/reqsupport.php;");
aI("text=View Support Requests;url=http://milonic.com/mysupport.php;");
aI("text=Your Details;url=http://milonic.com/mydetails.php;");
}
drawMenus();
And my html page is simple like this:
Code: Select all
<html>
<head>
</head>
<body>
<script type="text/javascript" src="milonic_src.js"></script>
<a class=milonic href="https://milonic.com/">JavaScript DHTML Popup Menus From Milonic.com</a>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>
</body>
</html>
JP
It will make reference to an external css file. Try this
Put this into your css stylesheet file:
Put the following into the menu_data.js file
Now, change your main menu style from menuStyle to cssStyle and test your page, mouseover the main menu. You will see that the menu takes all it's onbgcolor, offbgcolor, oncolor, offcolor, font border etc from the css stylesheet since none of those items are listed in the cssStyle in the menu_data.js file.
You can see the use of css style on my website. Start here http://www.poems2u.com/writings/index506.html View the source of the page, up at the top. I could have put all that in a style sheet, and that would have been the colors and padding etc of my menu on all the pages. I wanted the menu to be a different color on each page, so instead of just one style sheet, I put the style code on each page to match the page. Click next a couple of times and you will see the menu change colors. That is all done with css, all the color coding that is on the page is not in the menu data file.
Ruth
Put this into your css stylesheet file:
Code: Select all
.onMenu {
background-color:#666666;
color:#FFFFFF;
border:2px solid #666666;
padding:3px;
font: normal bold 8pt Verdana,Arial,sans-serif;
text-align:left;
}
.offMenu {
background-color:#93A9AE;
color:#000000;
border:2px solid #666666;
padding:3px;
font: normal bold 8pt Verdana,Arial,sans-serif;
text-align:left;
}
Code: Select all
with(cssStyle=new mm_style()){
offclass="offMenu";
onclass="onMenu";
separatorheight=20;
separatorcolor="#FFFFFF";
separatorsize="1";
separatorpadding="2";
itemwidth=250;
itemheight=24;
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#FFFFFF";
subimage="imgs/menu/arrow.gif";
subimagepadding=2;
subimageposition="middle";
} You can see the use of css style on my website. Start here http://www.poems2u.com/writings/index506.html View the source of the page, up at the top. I could have put all that in a style sheet, and that would have been the colors and padding etc of my menu on all the pages. I wanted the menu to be a different color on each page, so instead of just one style sheet, I put the style code on each page to match the page. Click next a couple of times and you will see the menu change colors. That is all done with css, all the color coding that is on the page is not in the menu data file.
Ruth