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

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:08

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

Poster: Armin
Dated: Tuesday September 28 2004 - 23:29:35 BST

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://www.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://www.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>

Poster: Ruth
Dated: Wednesday September 29 2004 - 3:07:08 BST

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:

<body><script type="text/javascript" src="milonic_src.js"></script>   
<param copyright="JavaScript Menu by Milonic - http://www.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://www.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://www.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://www.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

Thanks a lot ... but??

Poster: Armin
Dated: Wednesday September 29 2004 - 5:35:43 BST

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

Poster: Ruth
Dated: Wednesday September 29 2004 - 17:43:36 BST

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

Poster: Armin
Dated: Wednesday September 29 2004 - 20:57:51 BST

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

Poster: Ruth
Dated: Friday October 1 2004 - 7:10:22 BST

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

Poster: Armin
Dated: Friday October 1 2004 - 9:25:55 BST

Hi Ruthh,

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

Armin

Poster: Ruth
Dated: Friday October 1 2004 - 12:36:11 BST

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

Poster: Armin
Dated: Saturday October 2 2004 - 19:49:28 BST

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

Poster: Armin
Dated: Saturday October 2 2004 - 21:54:52 BST

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.

:cry:

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

Poster: Ruth
Dated: Sunday October 3 2004 - 2:46:17 BST

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

CAI MENU

Poster: Armin
Dated: Sunday October 3 2004 - 11:10:37 BST

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

Poster: Ruth
Dated: Sunday October 3 2004 - 23:53:32 BST

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

CAI Menu

Poster: Armin
Dated: Monday October 4 2004 - 19:21:22 BST

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

Poster: Ruth
Dated: Monday October 4 2004 - 20:25:44 BST

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

Problem with Netscape and Opera

Poster: Armin
Dated: Sunday October 17 2004 - 18:54:12 BST

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

Poster: Ruth
Dated: Monday October 18 2004 - 6:23:00 BST

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:

<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://www.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

Thanks

Poster: Armin
Dated: Monday October 18 2004 - 12:08:48 BST

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

Poster: Ruth
Dated: Monday October 18 2004 - 14:40:01 BST

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

color / iframes

Poster: Armin
Dated: Monday October 18 2004 - 21:34:55 BST

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

?? iframes

Poster: Armin
Dated: Wednesday October 20 2004 - 13:47:38 BST

Hi Ruth, hope you are fine and hope we get a solution on the problem with Netscape/irefox e.g. else I have to built the site in more single sites instead of useing iframes. Hope not to. I thought this poem would be somthing for your collection.

Thanks - Armin

God

As children bring their broken toys,
with tears for us to mend,
I brought my broken dreams to God,
because He is my friend.
But then instead of leaving Him
in peace to work alone,
I hung around and tried to help
with ways that were my own.
At last I snatched them back again
and cried "How can You be so slow?"
"My child" He said, "What could I do?
You never did let go."

Lean Mean Iframes

Poster: mfurf
Dated: Saturday October 30 2004 - 5:10:20 BST

Ruth and Armin, here's my two cents after looking at Armin's site. When I first started with Milonic menus I had a frameset, then I had tables.

But I found that staying away from tables and substituting lean, mean iframes seems to solve browser compatibility problems [except for the antiques which don't support iframes].

Iframes don't all have to be updated. Like a table cell an iframe can be used to simply situate a logo, graphic etc.

An updatable iframe can contain a scrolling menu.

My lean mean homepage http://www.OhSaratoga.com is two iframes, one for the logo and one for the main menu target. Plus a quick scrolling menu inside the iframe. /mfurf

Iframes

Poster: Armin
Dated: Tuesday November 9 2004 - 22:36:41 GMT

Thanks for taking the time.

Sorry for answering first now. Had a great time in Scotland :-)

)

I had I frames and everything worked fine in IE but not under the other
browsers. Changed everything to - "no-frames" and it works fine.

Thanks a lot - Armin