How do I built such a menu 2 horizontal and 1 vertical

Armin · Post by **Armin** » Tue Sep 28, 2004 11:29 pm

Hi, Since some month I am looking for a new menu system for our homepage. http://www.cai.org/en/aboutus.htm

Now I found your menu scripts, and it looks really promising.

I wanted to add 2 horizontal menus in a table and then 1 vertical menu in another table.

I read through many pages in forum but nothing helped. I downloaded the table menu.

I can include 2 horizontal menus in a table but as soon as I am changing the the menu menu_data1.js it will change both menus.

?? As I understand - for 2 menus I need 2 menu_data... files with different names??

How should the script look like, I am really lost here.

I did not upload the menu on the testsite yet.

Below is just a testfile changed from the table menu!

Thanks huge for your help - Armin
--------------------------------------------------------------------------------

<html>
<head>
<title>Milonic DHTML/JavaScript Menu Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

</head>

<body>



<script type="text/javascript" src="milonic_src.js"></script><param copyright="JavaScript Menu by Milonic - http://milonic.com">
<script type="text/javascript">

</script>
<script type="text/javascript" src="menu_data.js"></script><script type="text/javascript" src="milonic_src.js"></script><param copyright="JavaScript Menu by Milonic - http://milonic.com">
<script type="text/javascript">

</script>

<script type="text/javascript" src="menu_data.js"></script>
<script type="text/javascript" src="menu_data1.js"></script>

<p>

<br><br>
<br>
</p>

<table width=100% cellSpacing=0 cellPadding=13 border=0 style="border:1px solid #aaaaaa">
<tr>
<td align="left" valign="top" class=form1>
<table width=100% border=1 align="left">
<tr>
<td align="left" valign="top"> Left Aligned Table Cell
<script src="/se/css-se/menu-h/menu-h1.js">
</script></td>
</tr>
<tr>
<td align=left valign="top" style="font-size:125%"> Center Aligned Table
containing the menu
<script src="/se/css-se/menu-h/menu-h2.js">
</script> </td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>

Post by **Ruth** » Wed Sep 29, 2004 3:07 am

You can use one data.js file for all three menus. The following is an example of 3 visible menus in a table on a page, 2 horizontal and one vertical. To do this I used the menu_data.js file that comes with the menu.

Code: Select all

<body><script type="text/javascript" src="milonic_src.js"></script>	
<param copyright="JavaScript Menu by Milonic - http://milonic.com"></param>
<script	type="text/javascript">
<!-- 
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");		
  else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); 
 -->
</script>
<script type="text/javascript" src="3table_data.js"></script>	


<table>
<tr>
       <td><script>with(milonic=new menuname("Main Menu")){
style=menuStyle;
position="relative";
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=MyMilonic;");
}
drawMenus();
</script></td>
</tr>
<tr>
       <td></td>
</tr>
<tr>
       <td><script>with(milonic=new menuname("Main Menu2")){
style=menuStyle;
position="relative";
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=MyMilonic;");
}
drawMenus();
</script></td>
</tr>
<tr>
       <td></td>
</tr>
<tr>
       <td><script>with(milonic=new menuname("Main Menu3")){
style=menuStyle;
position="relative";
alwaysvisible=1;
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=MyMilonic;");
}
drawMenus();
</script></td>
</tr>
</table>

</body>

You'll see that it is really the same main menu, I just renamed it for each place in the page. The main menu came from the menu_data.js file, it was cut from that file, then pasted into each table cell between script tags and with an ending drawMenus(); The 3rd menu has the orientation left out since the default is vertical. All three have position="relative"; which is required for a table menu. If the menus are different it might be better to use different data files for each one, that makes keeping the submenus easier to change. If you do that, make sure each main menu has a different name, and that each main menu does not use the same showmenu names. hope this helps. If you need more help, let us know. Giving us the layout and would help.

Ruth

Armin · Post by **Armin** » Wed Sep 29, 2004 5:35 am

Thanks a lot, the main question for me now is

- If I want to use 3 data files. (3 data file because of 3 different data in the menu)

HOW does the script know which data file belongs to which menu.

http://www.cai.org/en/aboutus/aboutus.htm

Thanks once more for the "super fast" help.

Armin

Post by **Ruth** » Wed Sep 29, 2004 5:43 pm

I have your page. Could you tell me just where you want each menu, and if each will have submenus? Then I can give you a more precise answer.

Ruth

Armin · Post by **Armin** » Wed Sep 29, 2004 8:57 pm

http://www.cai.org/en/aboutus/aboutus.htm

Hi Ruth,

Thanks in advance...

The Main Menu should look like the top menu. In two rows. The Buttons should be the same size. (I would have a background image for the logo and blue line)

All this is working in frames at the moment but we´ll remove the frames!

Then the left menus should be like under About Us" or "Health and Healing" or "Testimonies".

From the left menus I would work through the table on the right side.

As I don´t know to much about iframes yet we would have these menus on every main page. I think that the way it would work!?

Thanks a lot once more I am really stunned about the help you offer!

Armin

Post by **Ruth** » Fri Oct 01, 2004 7:10 am

I haven't forgotten this. It's just taken a bit of time. I'll have something up tomorrow for you as a model.

Ruth

Armin · Post by **Armin** » Fri Oct 01, 2004 9:25 am

Hi Ruthh,

Greetings from Sweden and thanks that you take the time in helping me/us.

Armin

Post by **Ruth** » Fri Oct 01, 2004 12:36 pm

Hi Armin,
OK, here is the link. This page has some explanation and then a link to a no frames example and also a link to a frames example. There are also zip files with the pages and files in them. Please let me know when you get the files because I will remove them from my site.

link deleted.. 10-02-04

Ruth

Armin · Post by **Armin** » Sat Oct 02, 2004 7:49 pm

Thanks Ruth,

I´ll work "on and with" that. I´ll send you a message as soon as I am done for you to have a look.

Thanks huge - Armin

Armin · Post by **Armin** » Sat Oct 02, 2004 9:54 pm

Hi Ruth,

I downloaded all the file which you were so busy working on. But somehow I miss some of the files and I can´t get the menu working.

Could you do me a major faviour and zip the files you made and put them on a page to download. Then I could for sure?? figure out the code you have written.

Thank once more and appology for bothering you.

Armin

Post by **Ruth** » Sun Oct 03, 2004 2:46 am

It's no bother. I've put up another page, with different links, a better explanation and zip files for

1. images. You need these because I had to redo the top header section. There was no way to use your different images and lines since you couldn't place the menu to look like it was between the lines and have it positioned correctly in different browsers. If I got it there for IE it was not in the right place in Netscape and firefox etc.

2. scripts-frames. This zip is all the script files that go with the frames example and frames zip file I put up.

3. no frames. This is the about us page in table instead of frames. It contains all the necessary script files bu tyou need to download the images zip to go with it. It will be a lot more work to remake the site with all the pages in tables. Just so you understand that.

4. frames zip. This is a functioning frames mini site. I used your pages from the top menu. It also will require the images zip file

5. remember to put your 3 Milonic program files with the scripts..milonic_src.js, mmenudom.js, mmenuns4.js

LINK REMOVED: 12/30/08

Let me know when you get the files so I can remove all of them from my site.

Ruth

Armin · Post by **Armin** » Sun Oct 03, 2004 11:10 am

Hi Ruth,

Thanks for your help. I can see that you used images for the top menu. I wanted to avoid this as we work with (at the moment) 7 languages and will add or remove some menu button easily. e.g. or if the background colour would change then I would need to redo all buttons.

Our old page is white and therefore I need an easy possibility to change the colours e.g.

As I was doing all the other menu buttons I know that it´s some work especially with Russian or Polish.

The top menu does not have to be exact the same as the original. Just it would come close.

I´ll have a closer look later on - thanks Armin

Post by **Ruth** » Sun Oct 03, 2004 11:53 pm

I wasn't aware you didn't want images. Here is a zip file with your menu without images. THe file is not full pages, just your header logo and the menu. LINK REMOVED: 12/30/08

Ruth

Armin · Post by **Armin** » Mon Oct 04, 2004 7:21 pm

Hi Ruth,

Thanks a lot for all your help ... very much appreciated. I´ll work through all your suggestions. They look really good. Like in a shopping center "which one will I take". Will send you a link when online.

Thanks - Armin

Post by **Ruth** » Mon Oct 04, 2004 8:25 pm

You're welcome. Good luck, and let us see it when it's done. If you have any difficulty put up a test page for us to check out and post a new topic

and we'll be glad to help out.

Ruth

Armin · Post by **Armin** » Sun Oct 17, 2004 6:54 pm

http://www2.cai.org.au/se/testimonies/t ... ies-se.htm

Hi Ruth,

on this link you see what "you and I" have archieved so far.

I got a problem with Netscape and Opera to get the thing working.

IE does not have any problem.

Can you give me some advice and help me with this.

Thanks a lot

Armin

Post by **Ruth** » Mon Oct 18, 2004 6:23 am

First, you've put the menu in a div. It is made up of divs and spans and it doesn't like being in a div. That seems to be ok in newer versions of netscape and ie but it will break up in many other browsers and in some cases it won't render at all.

Second, you are trying to call it in a table but if you do it the way you have it, just calling the files you will have problems in some browsers.

Third, I see the problem in the top top menu and I did fix it, but I also fixed how to put it in the table.

Here is what you need to do:

1. change the percentages in the top menu to 25% in each item. I do not know why, because the bottom one is fine as it is, but the top one needs to have those percentages.

2. where you now have that div in the table, remove the div and the calls for the menu, and where that div now is insert a table with 1 column and two rows with the top menu in the top row and the bottom menu in the bottom one like this:

Code: Select all

<table cellspacing="0" cellpadding="0" width="100%">
<tr>
       <td><SCRIPT TYPE="text/javascript">
	   with(milonic=new menuname("main top1")){
style=mainStyle1;
position="relative";
menuwidth="100%";
alwaysvisible=1;
orientation="horizontal";
align="center"; 
valign="center";
aI("text=Hem;url=../index-se.htm;itemwidth=15%;");
aI("text=Kontakta Oss;url=../contactus/contactus-se.htm;itemwidth=25%;");
aI("text=Om Oss;url=#;itemwidth=20%;");
aI("text=Vittnesbörd;url=../testimonies/testimonies-se.htm;itemwidth=25%;oncolor=white;offcolor=white;onbgcolor=#4242ff;offbgcolor=#4242ff;");
}
drawMenus();</script></td>
</tr>
<tr>
       <td><SCRIPT TYPE="text/javascript">
	   with(milonic=new menuname("main bottom1")){
style=mainStyle2;
position="relative";
menuwidth="100%";
alwaysvisible=1;
orientation="horizontal";
align="center"; 
valign="center";
aI("text=Söndagsskola;url=../sundayschool/sundayschool-se.htm;itemwidth=27%;");
aI("text=FAQ;;url=../faq/faqs-se.htm;itemwidth=15%;");
aI("text=Studiematerial;url=../studyresources/studyresources-se.htm;itemwidth=30%;");
aI("text=Hälsa&nbsp;&&nbsp;Helande;url=../healthhealing/healthhealing-se.htm;itemwidth=30%;");

}
drawMenus();</script></td>
</tr>
</table>

The directions for the table bound menus can be read here http://milonic.com/tablemenu.php

One last question. Why are you putting in a color in the last item of the top menu? You have the pagecolor and pagebgcolor set so that should work fine.

I hope this helps. I did check it in Netscape 7.1 and Opera 7.11 and it works fine.

Ruth

Armin · Post by **Armin** » Mon Oct 18, 2004 12:08 pm

Hi Ruth,

Will work on this when coming home tonight. A lot to learn

)

The colour on the menu is added that the page opened would be shown in the menu.

Thanks,

Armin

Post by **Ruth** » Mon Oct 18, 2004 2:40 pm

You shouldn't need that color in the item. In the style definition you have pagecolor="#ffffff"; pagebgcolor="#4242ff"; So, if you are on a page that is the link in the menu, then it should highlight automatically

Ruth

Armin · Post by **Armin** » Mon Oct 18, 2004 9:34 pm

Hi Ruth,

The problem with the top menu seems to be solved. But the left menu would not work with I frames in Netscape/Firefox or Opera. Look quiet ugly.
I checked on the site for help with Iframes but could not find anything that works. Strange eveything seems to work with the Iframe menu on the example site. Maybe you have an idea.

The color problem is still there even I have the page loaded the link would keep the same color as others. Therefore I added the color code.

Hope you can help. Thanks a lot - Armin

Milonic JavaScript Menu

How do I built such a menu 2 horizontal and 1 vertical

How do I built such a menu 2 horizontal and 1 vertical

Thanks a lot ... but??

CAI MENU

CAI Menu

Problem with Netscape and Opera

Thanks

color / iframes