Control of the menu position

robinski · Post by **robinski** » Tue Mar 28, 2006 9:07 am

I have started an evaluation process today. So I am VERY new to this.

I have established a trial page here:

http://www.rotary9790.org.au/test/menuz.html

Now I need to control the position of the menu:

http://www.rotary9790.org.au/test/menuv.html

I have failed

What did I not understand?

Thanks,

Robin Chapple

Migru · Post by **Migru** » Tue Mar 28, 2006 9:10 am

Hi

please see

http://milonic.com/tablemenu.php

hope this helps

Michael

robinski · Post by **robinski** » Thu Mar 30, 2006 5:05 am

That is beyond me. Does that mean that I should give up or is more help a possibility?

Migru · Post by **Migru** » Thu Mar 30, 2006 7:50 am

Hi

I know, reading is difficult.
Hope you get this:

1. Split your menu_data file into two files:
one you name as it is "menu_data.js", it should contain allmost everything but not the main menu , I have prepared it:

Code: Select all

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(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#00019F";
offcolor="White";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}



with(milonic=new menuname("Committees")){
overflow="scroll";
style=menuStyle;
aI("text=Committee Index;url=../committees/welcome.htm;")
aI("text=Vertical Plain Text Menu;url=http://milonic.com/menusample2.php;")
aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;")
aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;")
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;")
aI("text=Multiple Styles Menu;url=http://milonic.com/menusample5.php;")
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;")
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;")
aI("text=Follow Scrolling Style Menu;url=http://milonic.com/menusample10.php;")
aI("text=Menu Positioning With Offsets;url=http://milonic.com/menusample23.php;")
aI("text=Table Based (Relative) Menus;url=http://milonic.com/menusample9.php;")
aI("text=Opening Windows and Frames with the Menu;url=http://milonic.com/menusample11.php;")
aI("text=Menus Over Form Selects, Flash and Java Applets;url=http://milonic.com/menusample14.php;")
aI("text=Activating Functions on Mouseover;url=http://milonic.com/menusample15.php;")
aI("text=Drag Drop Menus;url=http://milonic.com/menusample22.php;")
aI("text=Menus with Header Type Items;url=http://milonic.com/menusample8.php;")
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;")
aI("text=Unlimited Level Menus Example;url=http://milonic.com/menusample67.php;")
aI("text=Context Right Click Menu;url=http://milonic.com/menusample27.php;")
aI("text=Menus built entirely from images;url=http://milonic.com/menusample18.php;")
aI("text=Static Images Sample;url=http://milonic.com/menusample16.php;")
aI("text=Rollover Swap Images Sample;url=http://milonic.com/menusample17.php;")
aI("text=Background Item Images;url=http://milonic.com/menusample20.php;")
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;")
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;")
aI("text=Rounded Edges Imperial Style;url=http://milonic.com/menusample21.php;")
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("Clubs")){
style=menuStyle;
aI("text=Clubs Alpha;url=../clubs/index.htm;");
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("Biographies")){
style=menuStyle;
aI("text=District Governor;url=../bios/dge.htm;");
aI("text=WebSmith;url=http://www.softidiom.com/?milonicmenu;");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;");
}

with(milonic=new menuname("Admin")){
style=menuStyle;
aI("text=Secretariat;url=../committees/secretariat.htm;");
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("Region")){
style=menuStyle;
aI("text=Clubs in Victoria;url=../region/allclubs.htm;");
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();

2. The Main menu place into a separate file, please call it embedded_main_menu.js

The code is here:

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=10;
orientation="vertical";
style=menuStyle;
top=10;
aI("status=Back To Home Page;text=Home;url=../main/index.htm;");
aI("showmenu=Committees;text=Committees;");
aI("showmenu=Clubs;text=Our District Clubs;");
aI("showmenu=Biographies;text=Biographies;");
aI("showmenu=Admin;text=Administration;");
aI("showmenu=Region;text=Around Victoria;");
}

drawMenus();

3. Your HTML file has to be reorganized as follows:

- the Milonic references and the reference to your menu_data.js has to be placed please NOT into the td cell, but into the head section or just after the <body> tag.

- the reference to your embedded_main_menu has to be placed into the td-cell where you want the menu to be visualized.

After these two actions your html file will look like this:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Table Test</title>
<link href="../css/text.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="milonic_src.js"></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 type="text/javascript" src="menu_data.js"></script>

	<center>
	
<p class="hh">&nbsp; </p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>

    <td width="120" height="300" class="place">This is planned as a blank cell with the menu positioned below with the menu in the next left hand cell </td>
    <td><span class="hh">This is the planned header position</span></td>
  </tr>
  <tr>
    <td>	  
    
   <SCRIPT type="text/javascript" src="embedded_main_menu.js"></SCRIPT>  
    
    </td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="center"></td>
  </tr>
  <tr>

    <td colspan="2" align="center" class="h1">Below is the screen capture from my editor </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="center">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><img src="images/sample.jpg" width="1018" height="433" /></td>

  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="center"><a href="https://milonic.com/">JavaScript Menu, DHTML Menu Powered By Milonic</a></td>
  </tr>
</table>
<p class="hh">&nbsp;</p>
</body>
</html>

4. You have to test and continue...........

I did not any testing, hope it is correct, hope it helped.

Michael

I placed the Milonic link into the bottom <td> of the table

robinski · Post by **robinski** » Thu Mar 30, 2006 9:17 am

Thanks Michael,

It is late evening in Australia I will try tomorrow.

Robin

Migru · Post by **Migru** » Thu Mar 30, 2006 9:27 am

Hi Robin

found something very important to correct:

take out

Code: Select all

top=10; 
left=20;

You don´t need that, as the position is in a table, relative.

and insert into the code of the Main menu

Code: Select all

position="relative";

Michael

robinski · Post by **robinski** » Thu Mar 30, 2006 8:54 pm

Many thanks for all that effort. I could not find the:

top=10;
left=20;

I found each at "10" and removed those.

I added the position="relative" but I am not sure if I put it in the right place or even if it matters.

My effort is here:

http://www.rotary9790.org.au/test2/menutest.html

Migru · Post by **Migru** » Thu Mar 30, 2006 9:56 pm

Hi

you can have a look at your file, tested it here:

http://www.dhyg.de/test/Table%20Test.htm

and you can download the ZIPPED version

http://www.dhyg.de/test/testit.ZIP

It is not 100% perfect, but you just started the "beginner" level, do please study and go on.

The Milonic Files are not included

I will delete it as soon as you give me your ok

Michael

robinski · Post by **robinski** » Fri Mar 31, 2006 12:07 am

After a few false starts I have the menu working:

http://www.rotary9790.org.au/test2/menutest.html

and I have managed some cosmetics. I now plan to use the other features that I have read about.

I greatly appreciate your help.

Migru · Post by **Migru** » Fri Mar 31, 2006 12:12 am

Hi
You´re welcome

Michael

robinski · Post by **robinski** » Fri Mar 31, 2006 3:15 am

I am attempting to add height to each menu item. The Page:
http://milonic.com/beginner.php
suggests using:

separatorpadding=’2’; will add white space either side of the menu item separator in both horizontal and vertical menus.

I tried that with no success. BTW I appreciate that numbers are without quotesd and text is in double quotes but I do not understand single quotes. As a result I tried all three methods and none gave me the space between items.

I now have:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
margin=12;
separatorpadding='6';
style=menuStyle;
position="relative"
aI("status=Our Navigation Menu;text=Our Navigation Menu;;");
aI("status=Back To Home Page;text=Home;url=../main/index.htm;");
aI("showmenu=Committees;text=Committees;");
aI("showmenu=Clubs;text=Our District Clubs;");
aI("showmenu=Biographies;text=Biographies;");
aI("showmenu=Admin;text=Administration;");
aI("showmenu=Region;text=Around Victoria;");
}

drawMenus();

Thanks,

Robin

Post by **Ruth** » Fri Mar 31, 2006 4:53 am

Hi,

Let me give you a bit of help in applying different things.

Separators and their related properties like separatorpadding are not menu properties, that is they don't go in the area you placed them, with the style=menuStyle; top=1; and so on. They are either style properties and go in the style section, or item properties and go into an item.

When you use separatorpadding it does not add height to an item, separators go between items, so it adds space around items. In a vertical menu it will add space at the top and bottom of the separators, in a horizontal menu it will add space right and left of the separators.

If you want you can actually specify the itemheight either in the style section, the menu section or the item section. itemheight=25;

[edit by ruth: link removed]

Below my name are links to the different properties.

Hope this helps.

Ruth

robinski · Post by **robinski** » Fri Mar 31, 2006 6:24 am

Thanks Ruth,

The menu now looks very close to what I need. I appreciate your help.

Robin

robinski · Post by **robinski** » Fri Mar 31, 2006 6:49 am

Am I right that the "ItemHeight" will apply to both main and sub menus?