Control of the menu position

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

Control of the menu position

Poster: robinski
Dated: Tuesday March 28 2006 - 9:07:05 BST

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

Poster: Migru
Dated: Tuesday March 28 2006 - 9:10:53 BST

Hi

please see

http://www.milonic.com/tablemenu.php

hope this helps

Michael

Poster: robinski
Dated: Thursday March 30 2006 - 5:05:23 BST

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

Poster: Migru
Dated: Thursday March 30 2006 - 7:50:10 BST

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:

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://www.milonic.com/menusample2.php;")
aI("text=All Horizontal Menus;url=http://www.milonic.com/menusample25.php;")
aI("text=Using The Popup Menu Function Positioned by Images;url=http://www.milonic.com/menusample24.php;")
aI("text=Classic XP Style Menu;url=http://www.milonic.com/menusample82.php;")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;")
aI("text=XP Taskbar Style Menu;url=http://www.milonic.com/menusample83.php;")
aI("text=Office XP Style Menu;url=http://www.milonic.com/menusample47.php;")
aI("text=Office 2003 Style Menu;url=http://www.milonic.com/menusample46.php;")
aI("text=Apple Mac Style Menu;url=http://www.milonic.com/menusample72.php;")
aI("text=Amazon Style Tab Menu;url=http://www.milonic.com/menusample74.php;")
aI("text=Milonic Home Menu;url=http://www.milonic.com/menusample78.php;")
aI("text=Windows 98 Style Menu;url=http://www.milonic.com/menusample13.php;")
aI("text=Multiple Styles Menu;url=http://www.milonic.com/menusample5.php;")
aI("text=Multi Colored Menu Items;url=http://www.milonic.com/menusample80.php;")
aI("text=Multi Colored Menus Using Styles;url=http://www.milonic.com/menusample7.php;")
aI("text=Multi Tab;url=http://www.milonic.com/menusample50.php;")
aI("text=Tab Top;url=http://www.milonic.com/menusample52.php;")
aI("text=Multi Columns;url=http://www.milonic.com/menusample73.php;")
aI("text=100% Width Span Menu;url=http://www.milonic.com/menusample26.php;")
aI("text=Follow Scrolling Style Menu;url=http://www.milonic.com/menusample10.php;")
aI("text=Menu Positioning With Offsets;url=http://www.milonic.com/menusample23.php;")
aI("text=Table Based (Relative) Menus;url=http://www.milonic.com/menusample9.php;")
aI("text=Opening Windows and Frames with the Menu;url=http://www.milonic.com/menusample11.php;")
aI("text=Menus Over Form Selects, Flash and Java Applets;url=http://www.milonic.com/menusample14.php;")
aI("text=Activating Functions on Mouseover;url=http://www.milonic.com/menusample15.php;")
aI("text=Drag Drop Menus;url=http://www.milonic.com/menusample22.php;")
aI("text=Menus with Header Type Items;url=http://www.milonic.com/menusample8.php;")
aI("text=Right To Left Openstyle;url=http://www.milonic.com/menusample65.php;")
aI("text=Up Openstyle Featuring Headers;url=http://www.milonic.com/menusample33.php;")
aI("text=DHTML Menus and Tooltips;url=http://www.milonic.com/menusample6.php;")
aI("text=Unlimited Level Menus Example;url=http://www.milonic.com/menusample67.php;")
aI("text=Context Right Click Menu;url=http://www.milonic.com/menusample27.php;")
aI("text=Menus built entirely from images;url=http://www.milonic.com/menusample18.php;")
aI("text=Static Images Sample;url=http://www.milonic.com/menusample16.php;")
aI("text=Rollover Swap Images Sample;url=http://www.milonic.com/menusample17.php;")
aI("text=Background Item Images;url=http://www.milonic.com/menusample20.php;")
aI("text=Background Image Buttons;url=http://www.milonic.com/menusample89.php;")
aI("text=Menu Background Images;url=http://www.milonic.com/menusample76.php;")
aI("text=Creating Texture with Menu Background Images;url=http://www.milonic.com/menusample19.php;")
aI("text=Static Background Item Images;url=http://www.milonic.com/menusample71.php;")
aI("text=Vertical Static Background Item Images;url=http://www.milonic.com/menusample87.php;")
aI("text=World Map Sample;url=http://www.milonic.com/menusample92.php;")
aI("text=US Map Sample;url=http://www.milonic.com/menusample91.php;")
aI("text=Image Map Sample;url=http://www.milonic.com/menusample4.php;")
aI("text=Rounded Edges Imperial Style;url=http://www.milonic.com/menusample21.php;")
aI("text=Corporation;url=http://www.milonic.com/menusample40.php;")
aI("text=International;url=http://www.milonic.com/menusample70.php;")
aI("text=Clean;url=http://www.milonic.com/menusample32.php;")
aI("text=3D Gradient Block;url=http://www.milonic.com/menusample57.php;")
aI("text=Descreet;url=http://www.milonic.com/menusample42.php;")
aI("text=Agriculture;url=http://www.milonic.com/menusample41.php;")
aI("text=Breeze;url=http://www.milonic.com/menusample29.php;")
aI("text=Chart;url=http://www.milonic.com/menusample66.php;")
aI("text=Cartoon;url=http://www.milonic.com/menusample77.php;")
aI("text=Start Button Menu;url=http://www.milonic.com/menusample69.php;")
aI("text=Tramline;url=http://www.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://www.milonic.com/contactus.php;");
aI("text=Newsletter Subscription;url=http://www.milonic.com/newsletter.php;");
aI("text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("text=Discussion Forum;url=http://www.milonic.com/forum/;");
aI("text=Software License Agreement;url=http://www.milonic.com/license.php;");
aI("text=Privacy Policy;url=http://www.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://www.milonic.com/login.php;");
aI("text=Licenses;url=http://www.milonic.com/mylicenses.php;");
aI("text=Invoices;url=http://www.milonic.com/myinvoices.php;");
aI("text=Make Support Request;url=http://www.milonic.com/reqsupport.php;");
aI("text=View Support Requests;url=http://www.milonic.com/mysupport.php;");
aI("text=Your Details;url=http://www.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:

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:

<!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="http://www.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

Poster: robinski
Dated: Thursday March 30 2006 - 9:17:44 BST

Thanks Michael,

It is late evening in Australia I will try tomorrow.

Robin

Poster: Migru
Dated: Thursday March 30 2006 - 9:27:01 BST

Hi Robin

found something very important to correct:

take out

Code:

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:

position="relative";

Michael

Poster: robinski
Dated: Thursday March 30 2006 - 20:54:52 BST

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

Poster: Migru
Dated: Thursday March 30 2006 - 21:56:27 BST

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

Poster: robinski
Dated: Friday March 31 2006 - 0:07:55 BST

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.

Poster: Migru
Dated: Friday March 31 2006 - 0:12:46 BST

Hi
You´re welcome

Michael

Poster: robinski
Dated: Friday March 31 2006 - 3:15:02 BST

I am attempting to add height to each menu item. The Page:
http://www.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

Poster: Ruth
Dated: Friday March 31 2006 - 4:53:51 BST

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

Poster: robinski
Dated: Friday March 31 2006 - 6:24:34 BST

Thanks Ruth,

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

Robin

Poster: robinski
Dated: Friday March 31 2006 - 6:49:37 BST

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

Industrial Strength JavaScript and DHTML Menus

Control of the menu position