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:55
can i create this menu using seperator images?
Poster: jab
Dated: Tuesday February 1 2005 - 10:40:10 GMT
I need to create the lead menu in a table to look like this
http://www.jennyedgeinteriors.co.uk/test/top_menu.jpg
can this be produced?
Also would i need to put the individual elements in seperate table cells?
cheers
Poster: Ruth
Dated: Wednesday February 2 2005 - 3:50:49 GMT
Are you saying you want the white showing as it does now?
Ruth
Poster: Ruth
Dated: Wednesday February 2 2005 - 4:24:54 GMT
Hi,
I made a menu like i think you want. I took your images, cut them apart so I had a different one for each item. Then I converted to and saved each as a gif with the white part transparent, but I guess you could make it non transparent. Then in the menu_data.js file I made the offbgcolor,onbgcolor and separatorcolor #ffffff. Then in the main menu I put aI("image=imagename.gif; and so on for whatever else you want in the string;"); and did that for each item.
You can then make the menu horizontal and put it in the table cell according to the directions for placing the menu in a table. If you wanted you could also make a second set of images which look the same but have a different color than the green and you could use it as an overimage, then your aI string would have aI("image=whatever;overimage=whatever and so on. If you can put up a test page, I could help a bit more.
Ruth
Poster: jab
Dated: Wednesday February 2 2005 - 8:01:14 GMT
Thanks Ruth for helping out
The white needs to be transparent, and i would be looking to have a rollover, ideally it would be text interior with button edge gifs to reduce image sizes or do you think that there would not be much difference as the images are basic?
This would be the mouse off menu:
http://www.jennyedgeinteriors.co.uk/test/mouse_off.gif
And the green with the mouse over...
http://www.jennyedgeinteriors.co.uk/test/mouse_on.gif
in the case of sub menus is it possible to repeat the shape of the original menu?, will the additional images become an issue with page download?
Thanks again
Julian
Poster: Ruth
Dated: Wednesday February 2 2005 - 18:32:36 GMT
jab wrote:
Thanks Ruth for helping out
The white needs to be transparent, and i would be looking to have a rollover, ideally it would be text interior with button edge gifs to reduce image sizes or do you think that there would not be much difference as the images are basic?
The white needs to be transparent, and i would be looking to have a rollover, ideally it would be text interior with button edge gifs to reduce image sizes or do you think that there would not be much difference as the images are basic?
To really know what you want i need to see your page layout, just putting the images doesn't show me how you are laying out the menu in relation to the other items and the colors of the pages etc.
Given what I know now, this is what I would say to do for the menu.
1. make a blank image, one green and one gray.
2. from that put the text you need saving each as it's respective image.
3. Using members as an example, save gray members as members_off.gif and green members as members_on.gif or whatever names you want.
4. In your menu you would code the main menu in the following way:
Code:
with(menuStyle=new mm_style()){
//onbgcolor="#ffffff";
//oncolor="#ffffff";
//offbgcolor="#ffffff";
//offcolor="#515151";
//bordercolor="#296488";
//borderstyle="solid";
//borderwidth=0;
separatorcolor="#ffffff";
separatorsize=1;
padding=2;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
//pagecolor="black";
//pagebgcolor="#82B6D7";
//headercolor="#000000";
//headerbgcolor="#ffffff";
//subimage="arrow.gif";
//subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=240;
left=10;
alwaysvisible=1;
orientation="horizontal";
aI("image=members_off.gif;overimage=members_on.gif;url=http://www.milonic.com/;status=Back To Home Page;");
aI("image=suppliers_off.gif;overimage=suppliers_on.gif;showmenu=Samples;");
aI("image=events_off.gif;overimage=events_on.gif;showmenu=Milonic;");
aI("image=news_off.gif;overimage=news_on.gif;showmenu=Partners;");
aI("image=contact_off.gif;overimage=contact_on.gif;showmenu=Links;");
aI("image=links_off.gif;overimage=links_on.gif;showmenu=MyMilonic;");
}
//onbgcolor="#ffffff";
//oncolor="#ffffff";
//offbgcolor="#ffffff";
//offcolor="#515151";
//bordercolor="#296488";
//borderstyle="solid";
//borderwidth=0;
separatorcolor="#ffffff";
separatorsize=1;
padding=2;
fontsize="75%";
fontstyle="normal";
fontfamily="Verdana, Tahoma, Arial";
//pagecolor="black";
//pagebgcolor="#82B6D7";
//headercolor="#000000";
//headerbgcolor="#ffffff";
//subimage="arrow.gif";
//subimagepadding="2";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
}
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=240;
left=10;
alwaysvisible=1;
orientation="horizontal";
aI("image=members_off.gif;overimage=members_on.gif;url=http://www.milonic.com/;status=Back To Home Page;");
aI("image=suppliers_off.gif;overimage=suppliers_on.gif;showmenu=Samples;");
aI("image=events_off.gif;overimage=events_on.gif;showmenu=Milonic;");
aI("image=news_off.gif;overimage=news_on.gif;showmenu=Partners;");
aI("image=contact_off.gif;overimage=contact_on.gif;showmenu=Links;");
aI("image=links_off.gif;overimage=links_on.gif;showmenu=MyMilonic;");
}
You would of course put in whatever names you had given your images. And, since you are putting it in a table you'll need to follow the directions for placing the menu in a table.
As to having the 'image' being a curve on the left and one on the right and text between, I doubt you can do that. If I can see your layout I might be able to figure how to use the image as a background rather than an image, but using a background image means that if the table expands the image repeats it does not stretch, so as I said I need to know your layout in order to give you the best advice.
Ruth
Poster: jab
Dated: Monday February 28 2005 - 15:48:08 GMT
Hi Ruth tahnks again for the info, i've got a dummy page including the menu on
www2.ntu.ac.uk/susdev/test/intro.htm
Can i put it on here with no problems?
Poster: Ruth
Dated: Monday February 28 2005 - 23:16:55 GMT
Hi,
I got the page and made images and put up two different menus. There are explanations, and a zip file with the menu_data.js file and the images if you want them. I wrote the explanation of how each menu was done, and you will be able to see it in the data file and view source.
One thing, I removed the div on your page when I tested it with your layout. You need to not put the menu in a div. You can use center tags for the table instead. When in a div some browsers have problems, sometimes the menu breaks, that's because it's already made up of divs, spans etc.
LINK REMOVED. I forgot to put the page into the zip file so you'll have to download it separate because it shows how to put the menu in a table. I used your items, but the milonic downloaded menu data so it shows those submenus onMouseOver. Let me know when your done with it so I can take the page down. -
Ruth
Poster: jab
Dated: Tuesday March 1 2005 - 10:05:29 GMT
Thats brilliant, i'll try it out with some of the test submenus for download time between the two types of menu, it looks great.
Thanks again your help has been invaluable.
Julian
Poster: jab
Dated: Tuesday March 22 2005 - 22:06:18 GMT
Hi Ruth
I dont suppose you have those example menus still at hand i missed some files during the copy, one of which 'function.js'
Cheers
Julian
Poster: Ruth
Dated: Tuesday March 22 2005 - 23:53:27 GMT
Hi Julian,
I'm sorry, I don't have any of it now. That functions.js file you mentioned would have been your file. It's not something I created. I would have gotten it when I downloaded the test page you put up so I could see the layout.
Ruth
Poster: jab
Dated: Wednesday March 23 2005 - 14:33:37 GMT
Hi Ruth
Being really thick here, i have found the files i downloaded from you but
don't seem to be able to display the menus as in your page, i have
attached all the files in the following zip file could you tell me
where or for what reason i cannot display the menus in the intro page.
menu.zip
Many thanks again
Julian
Poster: Ruth
Dated: Wednesday March 23 2005 - 15:43:21 GMT
Hi,
You sent me the milonic site menu_data.js file, not the one for your page, however, I think the problem is the paths to the files.
First thing to check is the call for the files. Are they in the EIForum home page_files/ folder?
Code:
<SCRIPT src="EIForum home page_files/milonic_src.js"
type=text/javascript></SCRIPT>
<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 src="EIForum home page_files/menu_data.js"
type=text/javascript></SCRIPT>
type=text/javascript></SCRIPT>
<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 src="EIForum home page_files/menu_data.js"
type=text/javascript></SCRIPT>
2. Is this a forum, it looks like it might be? Is it using something like phpbb or an equivalent? If it is, you can't just code pages, you have to put the codes in the necessary templates. For example, the phpbb has a number of templates, one is called overall_header.tpl, this is the top part of the pages, as on this page, the top part including the login search memberlist etc. It is in that template you would put the call for the menus, making sure the files are in the php level of the directory. So you'd have to open the template, whichever one includes the body tag for the overall_header, or overall_body, not sure what it would be with your forum, and put the menu calls right after the body tag. In this template it would look like this:
Code:
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"><SCRIPT language=JavaScript src="templates/milonic/milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=templates/milonic/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=templates/milonic/mmenudom.js><\/scr"+"ipt>");
</script>
<SCRIPT language=JavaScript src="templates/milonic/menu_data.js" type=text/javascript></SCRIPT><a name="top"></a><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center"> <tr>
<td class="bodyline"><br /><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr> <td><a href="{U_INDEX}"><img src="templates/h_subSilver/images/forum_logo.gif" border="0" alt="{L_INDEX}" vspace="1" /></a></td> AND SO ON
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=templates/milonic/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=templates/milonic/mmenudom.js><\/scr"+"ipt>");
</script>
<SCRIPT language=JavaScript src="templates/milonic/menu_data.js" type=text/javascript></SCRIPT><a name="top"></a><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center"> <tr>
<td class="bodyline"><br /><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr> <td><a href="{U_INDEX}"><img src="templates/h_subSilver/images/forum_logo.gif" border="0" alt="{L_INDEX}" vspace="1" /></a></td> AND SO ON
I don't know what your setup is for your templates, if you have them, but this one is the folder templates, under the php folder. phpbb has a knowledge base section which talks about editing the header and footertemplates.
Hope this helps. Even if I went to your site I couldn't tell where you need to put the files, because I couldn't get to the directory and see the structure for your phpbb or whichever you use. If you use a different one they will also probably have a forum and knowledge base with information on how to edit the templates.
Hope that helps.
Ruth
Poster: jab
Dated: Wednesday March 23 2005 - 21:31:18 GMT
Heres the page with the link that you put up obviously with the functioning menus.
http://www.jennyedgeinteriors.co.uk/test/
After downloading the zip file and saving the page code the only files that the code referenced that i didn't have were these:
mmenudom.js
mmenuns4.js
Soon as I added these two from the demo menu downloaded from the main site, the two menus that you created appeared but without any drop down functionality.
The menu_data.js file is from the zip file that you provided.
The menu will sit in both static and dynamic (asp) pages, no forums though.
Sorry to keep bothering you but i'm quite keen to get this functioning as i believe it will be the ideal menu system for the site.
Poster: Ruth
Dated: Wednesday March 23 2005 - 22:15:21 GMT
Hi Julian,
Thanks for telling me about the files. You can't use the milonic program files from my site, it is a licensed version for my domain. You need to use all three of your files that you have from your downloads. Also, you used version 5.69 files and the one I had was 5.718, you can't mixed versions either. When something is changed, fixed or added it is done to all three files because they work as a unit, so they need to be the same version.
You need to upgrade to the newest version 5.719. Keep your old files in some folder, just in case there is some conflict with something on your site and the new version. The reason you need to upgrade is that minor bugs get fixed in the upgrades and sometimes, but not very often, a major bug is fixed. I think there was a major fix done between the version you have and the new one.
Sorry for the misunderstanding.
Ruth