Menu G4 is a collection of scripts written in Javascript, which helps to implement dhtml menus on web pages.
With Menu G4, you can:
Currently Menu G4 supports the following browsers:
The Menu G4 package also comes with a menu editor, with which you can compose the menu content and menu styles, and preview the result.
Following is the content of the Menu G4 package:
Basically you will upload the "script" and "img" sub-dirs in the Menu G4 package to your web site first.
To make a menu, you will define the menu content and menu style, you can do so with the menu editor and save the outputs in a text file (usually called content script and named as "content.js"), or you can just edit the content file from scratch if you are familiar with Menu G4, then you will also define the position of the menu in the same content file.
After that, you will set up another text file (usually called path script and named "path.js") which tells the web path of where you upload the "script" and "img" sub-dirs.
Then for a web page to show the menus, you will include the path script, the Menu G4 loader script (a Javascript file you can find inside the "script" sub-dir) and the content script in the <HEAD> section, and put the "showMenu()" in the onload call of the <BODY> tag.
If you have one single content script for all the menu pages, you can define its web path in the path script as well, and then you will only need to include the path script and the Menu G4 loader script for a menu page. The Menu G4 loader script will load the content script for you.
So a typical menu page would look like this:
<html>
<head>
<title>...</title>
<script language="javascript" src="path.js"></script>
<script language="javascript" src="/script/menuG4Loader.js"></script>
</head>
<body onload="showMenu('menu-instance')">
...
</body>
</html>
When such a menu page is loaded into a browser, the Menu G4 loader script will check whether Menu G4 supports this browser, if so, it will then, according to the settings in your path script, load the Menu G4 function script for this browser, load the content script if specified, position and render the menu.
A menu has one top-menu and usually some menu items and sub-menus. In Menu G4, you need to assign names to the top-menu and all the sub-menus. These names should be unique.
Let's say we want to make a menu for Toyota vehicles and we group them into different categories:
# Cars - Avalon - Carmy - Camry Solara - Camry Solara Convertible - Celica - Corolla - ECHO # SUVs/Van - 4Runner - Highlander - Land Cruiser - RAV4 - Sienna # Trucks - Tacoma - Tacoma Double Cab - Tacoma Xtracab - Tacoma Regular Cab - Tundra - Tundra Access Cab - Tundra Regular Cab # Rent a Toyota # Find a dealer
To define such a menu in Menu G4, we start with the top-menu:
addMenu("menu-name", "top-menu-name");
for example:
addMenu("Toyota", "Vehicles");
With the "addMenu()" call, we define the name of the menu and the name of its top-menu. We will refer this menu name later when we position the menu.
Now we can add menu items to the top-menu by referring to the "top-menu-name".
In Menu G4, five types of menu items are supported:
To add a sub-menu item, we have:
addSubMenu("top-menu-name", "item-display-text", "item-message", "link-url", "sub-menu-name", "group-id");
for example:
addSubMenu("Vehicles", "Cars", "Toyota Cars", "", "cars-sub", "");
addSubMenu("Vehicles", "SUVs/Van", "Toyota SUVs/Van", "", "suv-sub", "");
addSubMenu("Vehicles", "Trucks", "Toyota Trucks", "", "trucks-sub", "");
We will refer to the "sub-menu-name" when we want to add menu items to this sub-menu. The "item-message", "link-url" and "group-id" are optional, you can leave them blank ("").
To add a link item:
addLink("top-menu-name", "item-display-text", "item-message", "link-url", "group-id");
for example:
addLink("Vehicles", "Rent a Toyota", "you can rent a Toyota online", "http://renting-url", "");
You can use full web path or related path (based on the menu page) for the "link-url", and usually the link will be loaded into the same browser window.
To open a new window for a link, you can use a command item.
To add a command item:
addCommand("top-menu-name", "item-display-text", "item-message", "javascript-codes", "group-id");
for example:
addCommand("Vehicles", "Find a dealer", "bring up the dealer search page", "window.open('http://dealer-search-url')", "");
To add an info item:
addInfo("top-menu-name", "info-content", "group-id");
The "info-content" can be any text, you can put some HTML codes there.
To add a separator:
addSeparator("top-menu-name");
for example:
addSeparator("Vehicles");
The order of the menu items you define in the content script decides the order they are shown on the menu. So this addSeparator("Vehicles") line should be put before the addLink() line for the "Rent a Toyota" if you want to insert a separator between the sub-menus and the rest of the menu.
Now we have a top-menu like this:
addMenu("Toyota", "Vehicles");
addSubMenu("Vehicles", "Cars", "Toyota Cars", "", "cars-sub", "");
addSubMenu("Vehicles", "SUVs/Van", "Toyota SUVs/Van", "", "suv-sub", "");
addSubMenu("Vehicles", "Trucks", "Toyota Trucks", "", "trucks-sub", "");
addSeparator("Vehicles");
addLink("Vehicles", "Rent a Toyota", "you can rent a Toyota online", "http://renting-url", "");
addCommand("Vehicles", "Find a dealer", "bring up the dealer search page", "window.open('http://dealer-search-url')", "");
If you have some sub-menu items added to the top-menu, you can refer to the sub-menu names defined in the "addSubMenu()" calls, and follow the same syntax to add menu items to these sub-menus:
addSubMenu("sub-menu-name", "item-display-text", "item-message", "", "sub-sub-menu-name", "");
addLink("sub-menu-name", "item-display-text", "item-message", "link-url", "");
addCommand("sub-menu-name", "item-display-text", "item-message", "javascript-codes", "");
addInfo("sub-menu-name", "info-content", "");
addSeparator("sub-menu-name");
So, we now define the sub-menus for Cars, SUVs/Van and Trucks:
// cars sub-menu
addLink("cars-sub", "Avalon", "", "cars/avalon.html", "");
addSubMenu("cars-sub", "Camry", "", "", "camry-sub", "");
addLink("cars-sub", "Celica", "", "cars/celica.html", "");
addLink("cars-sub", "Corolla", "", "cars/corolla.html", "");
addLink("cars-sub", "ECHO", "", "cars/echo.html", "");
// suv/van sub-menu
addLink("suv-sub", "4Runner", "", "suv/4runner.html", "");
addLink("suv-sub", "Highlander", "", "suv/highlander.html", "");
addLink("suv-sub", "Land Cruiser", "", "suv/landcruiser.html", "");
addLink("suv-sub", "RAV4", "", "suv/rav4.html", "");
addLink("suv-sub", "Sienna", "", "van/sienna.html", "");
// trucks sub-menu
addSubMenu("trucks-sub", "Tacoma", "", "", "tacoma-sub", "");
addSubMenu("trucks-sub", "Tundra", "", "", "tundra-sub", "");
and the sub-menus for Camry, Tacoma and Tundra:
// camry sub-menu
addLink("camry-sub", "Camry Solara", "", "cars/solara.html", "");
addLink("camry-sub", "Camry Solara Convertible", "", "cars/solara-convertible.html", "");
// tacoma sub-menu
addLink("tacoma-sub", "Tacoma Double Cab", "", "trucks/tacoma-doublecab.html", "");
addLink("tacoma-sub", "Tacoma Xtracab", "", "trucks/tacoma-xtracab.html", "");
addLink("tacoma-sub", "Tacoma Regular Cab", "", "trucks/tacoma-regularcab.html", "");
// tundra sub-menu
addLink("tundra-sub", "Tundra Access Cab", "", "trucks/tundra-accesscab.html", "");
addLink("tundra-sub", "Tundra Regular Cab", "", "trucks/tundra-regularcab.html", "");
You can define more than one menu in the content script, just start with the "addMenu()" call again when you finish the content of the previous one.
You might wonder that the menu content doesn't tell where and how to show the menu on a page. Exactly. In Menu G4, the menu content is separated from the menu positioning and menu styles which we will come to later.
Let's take a look at the menu position first.
Simply put, to position a menu is to find a spot on the page and align the top-menu against this spot.
Menu G4 supports three methods of locating the spot:
Absolte positioning is straightforward, you can simply set up the spot with top & left offsets, relative positioning is a bit complicated and you will need to embed some special html codes into the page, pre-defined slots is much easier and you can use one of the nine pre-defined slots as the position spot.
After we have the spot, we need to decide how to align the top-menu against this spot. Just like the alignments we could set for a TD tag, we have the following alignment options for the top-menu:
We will talk about the positioning in details later, right now, we just use absolute positioning with top-left alignment for our Toyota menu example.
To make a menu from the menu content, we need to define where to show it and how to show it. To do so, we will make a menu instance:
addInstance("menu-instance-name", "menu-name", "instance-parameter-phrases");
Here we see the "menu-name" again which we mentioned before in the "addMenu()" call. As to the "instance-parameter-phrases", we will revisit it later.
For the Toyota menu, it would be:
addInstance("Toyota-Menu", "Toyota", "position:absolute; offset-top:10; offset-left:20; valign:top; align:left; menu-form:bar;");
which means we would like to make a menu from menu content "Toyota" and name it as "Toyota-Menu", position it at [20, 10] with top-left alignment, then show it as a menu bar.
That's it. To consolidate, we will have:
addMenu("Toyota", "Vehicles");
addSubMenu("Vehicles", "Cars", "Toyota Cars", "", "cars-sub", "");
addSubMenu("Vehicles", "SUVs/Van", "Toyota SUVs/Van", "", "suv-sub", "");
addSubMenu("Vehicles", "Trucks", "Toyota Trucks", "", "trucks-sub", "");
addSeparator("Vehicles");
addLink("Vehicles", "Rent a Toyota", "you can rent a Toyota online", "http://renting-url", "");
addCommand("Vehicles", "Find a dealer", "bring up the dealer search page", "window.open('http://dealer-search-url')", "");
// cars sub-menu
addLink("cars-sub", "Avalon", "", "cars/avalon.html", "");
addSubMenu("cars-sub", "Camry", "", "", "camry-sub", "");
addLink("cars-sub", "Celica", "", "cars/celica.html", "");
addLink("cars-sub", "Corolla", "", "cars/corolla.html", "");
addLink("cars-sub", "ECHO", "", "cars/echo.html", "");
// suv/van sub-menu
addLink("suv-sub", "4Runner", "", "suv/4runner.html", "");
addLink("suv-sub", "Highlander", "", "suv/highlander.html", "");
addLink("suv-sub", "Land Cruiser", "", "suv/landcruiser.html", "");
addLink("suv-sub", "RAV4", "", "suv/rav4.html", "");
addLink("suv-sub", "Sienna", "", "van/sienna.html", "");
// trucks sub-menu
addSubMenu("trucks-sub", "Tacoma", "", "", "tacoma-sub", "");
addSubMenu("trucks-sub", "Tundra", "", "", "tundra-sub", "");
// camry sub-menu
addLink("camry-sub", "Camry Solara", "", "cars/solara.html", "");
addLink("camry-sub", "Camry Solara Convertible", "", "cars/solara-convertible.html", "");
// tacoma sub-menu
addLink("tacoma-sub", "Tacoma Double Cab", "", "trucks/tacoma-doublecab.html", "");
addLink("tacoma-sub", "Tacoma Xtracab", "", "trucks/tacoma-xtracab.html", "");
addLink("tacoma-sub", "Tacoma Regular Cab", "", "trucks/tacoma-regularcab.html", "");
// tundra sub-menu
addLink("tundra-sub", "Tundra Access Cab", "", "trucks/tundra-accesscab.html", "");
addLink("tundra-sub", "Tundra Regular Cab", "", "trucks/tundra-regularcab.html", "");
addInstance("Toyota-Menu", "Toyota", "position:absolute; offset-top:10; offset-left:20; valign:top; align:left; menu-form:bar;");
And now you will see clearer why we need unique names for the top-menu and sub-menus. These names are used to link the menu items to the top-menu and sub-menus.
• How to compose a non-frame menu page with Menu G4?
Let's continue with the Toyota menu example and see how we embed it into a html page. Say we save the content script as "content.js" and upload it as:
http://www.yourhost.com/menu/content.js
and you upload the Menu G4 "script" and "img" sub-dirs as:
http://www.yourhost.com/G4/script http://www.yourhost.com/G4/img
In this case, your path script would have some settings like this:
var scriptPath = "http://www.yourhost.com/G4/script/"; var imagePath = "http://www.yourhost.com/G4/img/"; var contentScript = "http://www.yourhost.com/menu/content.js";
Supposed you name the path script as "path.js" and put it under "http://www.yourhost.com/menu/" as well:
http://www.yourhost.com/menu/path.js
then in your web page, you would have:
<html>
<head>
<script language="javascript" src="http://www.yourhost.com/menu/path.js"></script>
<script language="javascript" src="http://www.yourhost.com/G4/script/menuG4Loader.js"></script>
</head>
<body onload="showMenu('Toyota-Menu')">
...
</body>
</html>
The "menuG4Loader.js" is the loader script we mentioned before, and remember the "Toyota-Menu"? That's the name of the menu instance we defined in the addInstance() call.
Follow this link to see a non-frame Toyota menu page.
• How to compose a cross-frame menu page with Menu G4?
We still use the Toyota example and the same content script and path script, but we might need to change the addInstance() call a bit.
Let's say we want to make a frameset page with top frame and bottom frame, the top-menu of the Toyota menu will be shown in the top frame as a menu bar and the sub-menus go into the bottom frame.
Obviously we want to put the top-menu close to the bottom of the top frame and the sub-menus close to the top of the bottom frame. Also, we would like to have all the links go to the bottom frame (say, named as "main").
To do so, we will use slot positioning and change the addInstance() call to:
addInstance("Toyota-Menu", "Toyota", "position:slot 5; offset-top:0; offset-left:0; valign:bottom; align:center; menu-form:bar; target:main");
The fifth slot (slot 5) is a spot at the center place of the window/frame bottom (we will have more details on pre-defined slots later). With bottom-center alignment against this spot, the top-menu will be sitting at the center place of the window/frame bottom as well. Once we have the position of the top-menu, Menu G4 will place the cross-frame sub-menus at the right place for us, which is, for this case, at the top of the bottom frame.
For cross-frame menus, we put the path script and loader script in the frameset page:
<html> <head> <script language="javascript" src="http://www.yourhost.com/menu/path.js"></script> <script language="javascript" src="http://www.yourhost.com/G4/script/menuG4Loaderfs.js"></script> </head> <frameset rows="60, *"> <frame src="top.html"></frame> <frame src="bottom.html" name="main"></frame> </frameset> </html>
Now we need to define where to show the top-menu and where to show the sub-menus. This can be done in the top-menu frame page (top.html in this case):
<html>
<head>
<script language="javascript" src="http://www.yourhost.com/G4/script/menuG4f.js"></script>
</head>
<body onload="initMenu('Toyota-Menu', 'top'); setSubFrame('Toyota-Menu', parent.main)">
...
</body>
</html>
The "menuG4f.js" is a frame control script that registers the menu to the frameset page. The "initMenu()" call tells Menu G4 to show the top-menu in the calling frame page, and the "setSubFrame()" call tells which frame to show the sub-menus.
The "parent.main" here is the same as "parent.frames['main']" or "parent.frames[1]". It's the reference path from the top frame (top-menu frame) to the bottom frame (sub-menu frame).
The pages in the sub-menu frame are just "plain" html pages, we don't need to set up anything for them to display the sub-menus. The top-menu page takes care of that already.
Follow this link to see a cross-frame Toyota menu page.
• How to define the menu styles?
Up to this point, we've only talked about the menu content and the setup of menu page. Now we would take a look at menu styles.
Menu G4 separates the menu content from the menu styles, so that you can have one single menu content across the whole site but apply different styles for different pages.
With Menu G4, you can define styles for the menu base pad, menu item, item text, sub-menu tag and separator, then combine them into one menu style. Let's go through them one by one.
To define a menu base pad style, we have:
addStylePad("pad-style-name", "style-parameter-phrases");
A parameter phrase is a "name:value" pair, parameter phrases are order insensitive and separated by semicolon. Usually a parameter phrase will have a default value which will be taken if the parameter phrase is not presented.
Currently Menu G4 supports the following pad style parameter phrases:
| value | |
| string that specifies one of the following values: visible ... Default. The menu base pad is visible hidden ... The menu base pad is hidden, the rest of parameter phrases will be ignored. | |
| number that specifies the width in pixel of the pad border: 0 ... Default. The other border settings will be ignored. | |
| string that specifies one of the following values: outset ... 3-D outset color effect inset ... 3D inset color effect solid ... Default. Border is a solid line. | |
| string that specifies the border color in #rrggbb format #000000 ... Default | |
| set of numbers of 0 (to use background-color) or 1 (to use border-color) separated by spaces, specify how to pick a border color for sides of top, right, bottom and left: 1 1 1 1 ... Default | |
| one number (for both padding height and width) or two numbers separated by space (for padding height and padding width respectively) that specify the padding space: 0 ... Default | |
| string that specifies the background color in #rrggbb format: #------ ... Default. Transparent. | |
| string that specifies one of the following values: bar ... Top-menu shown as a horizontal menu bar. pad ... Default. Top-menu shown as a drop-down menu pad. | |
| string that specifies one of the following values: right-down ... Default. If the parent menu is a menu pad, show the sub-menu on right side and align the sub-menu and its parent item on top. If the parent menu is a menu bar, show the sub-menu below and align the sub-menu and its parent item on left side. right-up ... For menu pad, show the sub-menu on right side and align the sub-menu and its parent item on bottom. For menu bar, show the sub-menu above and align the sub-menu and its parent item on left side. left-down ... For menu pad, show the sub-menu on left side and align the sub-menu and its parent item on top. For menu bar, show the sub-menu below and align the sub-menu and its parent item on right side. left-up ... For menu pad, show the sub-menu on left side and align the sub-menu and its parent item on bottom. For menu bar, show the sub-menu above and align the sub-menu and its parent item on right side. center-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on center. center-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on center. abs-right-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on right side. abs-right-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on right side. abs-left-down ... For menu bar only. Show the sub-menu below and align the sub-menu and parent menu on left side. abs-left-up ... For menu bar only. Show the sub-menu above and align the sub-menu and parent menu on left side. right-top ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu on top. left-top ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu on top. right-middle ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu in middle. left-middle ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu in middle. right-bottom ... For menu pad only. Show the sub-menu on right side and align the sub-menu and parent menu on bottom. left-bottom ... For menu pad only. Show the sub-menu on left side and align the sub-menu and parent menu on bottom. | |
| string that specifies one of the following values: yes ... If a menu pad is longer than the height of the browser window or a menu bar is wider than the width of the browser window, begin to scroll the out-of-border part of the menu into the browser window when the mouse cursor stops on the item close to browser edge for a while. Stop the scrolling if a mouse-move, mouse-down or mouse-click is detected, or the menu end gets into the browser window. no ... Default. Do not scroll the menu at all. | |
| number that specifies the top offset in pixel (after the direction placement): 0 ... Default | |
| number that specifies the left offset in pixel: 0 ... Default | |
| number (can be negative) that specifies the offset in pixel between menu items: 0 ... Default | |
| number (0 to 100) that specifies the opacity of the base pad (for IE/N6+ only): 100 ... Default | |
For example:
addStylePad("menu-bar", "padding:3; background-color:#c0c0c0; border-size:1; border-style:solid; border-color:#000080; menu-form:bar;");
To define the menu item style, we would use:
addStyleItem("item-style-name", "style-parameter-phrases");
and the available settings are:
| value | |
| number that specifies the width in pixel of the item: 0 ... Default. Use actual item width. If it's a menu pad, the maximum item width will be the final width. | |
| number that specifies the height in pixel of the item: 0 ... Default. Use actual item height. If it's a menu bar, the maximum item height will be the final height. | |
| number that specifies the width in pixel of the item border: 0 ... Default. The other border settings will be ignored. | |
| string or strings separated by spaces that specify the border color effects for item at modes of normal, highlighted and mouse-down. The string will have one of the following values: outset ... 3-D outset color effect inset ... 3D inset color effect solid ... Border is a solid line. solid solid ... Default. If only one string is specified, it sets border color effect for both normal and highlighted modes but no effect for mouse-down. If two strings are specified, they set the color effects for normal and highlighted modes respectively but no effect for mouse-down. If three strings are specified, they set the color effects for normal, highlighted and mouse-down modes. | |
| string or strings separated by spaces that specify the border colors for item at modes of normal, highlighted and mouse-down. The string specifies the border color in #rrggbb format: #000000 #000000 ... Default. If only one string is specified, it sets border color for both normal and highlighted modes but no effect for mouse-down. If two strings are specified, they set the border colors for normal and highlighted modes respectively but no effect for mouse-down. If three strings are specified, they set the border colors for normal, highlighted and mouse-down modes. Both the border-style and border-color for mouse-down mode have to be specified to take effect. | |
| set, or sets separated by comma, of numbers of 0 (to use background-color) or 1 (to use border-color) separated by spaces, specify how to pick a border color for sides of top, right, bottom and left for item at modes of normal, highlighted and mouse-down. 1 1 1 1, 1 1 1 1 ... Default. A set will take effect only if both associated border-style and border-color are specified. | |
| number (for both padding height and width) or two numbers separated by space (for padding height and padding width respectively) that specify the padding space: 0 ... Default | |
| string or strings separated by space that specify the background color in #rrggbb format for item at normal, highlighted and mouse-down modes: #------ #------ ... Default. Transparent. | |
| string that specifies one of the following values: mouse-over ... Default. Hover to open a sub-menu. You can specify a link for a sub-menu item so that clicking on it will load the link. mouse-click ... Click to open a sub-menu. The link, if any, for the sub-menu item will be ignored. | |
| number (0 to 100) that specifies the opacity of the item (for IE/N6+ only): 100 ... Default | |
For example:
addStyleItem("bar-item", "padding:1 6; border-size:1; border-style:outset outset; border-color:#c0c0c0 #000080; background-color:#c0c0c0 #000080");
Note: the mouse-down settings won't apply to sub-menu items set to mouse-over, it also won't work in Netscape 4 and Konqueror 3.
To define the item text style, we would use:
addStyleFont("font-style-name", "style-parameter-phrases");
and the available settings are:
| value | |
| string or strings separated by comma that specify the font name: Arial ... Default. | |
| number that specifies the font size in pixel: 14 ... Default. | |
| string or two strings separated by space that specify the font weight for item at normal and highlighted modes. The string will have one of the following values: normal bold normal normal ... Default. If only one string is specified, it sets font weight for both normal and highlighted modes. | |
| string or two strings separated by space that specify the font style for item at normal and highlighted modes. The string will have one of the following values: normal italic normal normal ... Default. If only one string is specified, it sets font style for both normal and highlighted modes. | |
| string or two strings separated by space that specify the text decoration for item at normal and highlighted modes. The string will have one of the following values: none underline none none ... Default. If only one string is specified, it sets text decoration for both normal and highlighted modes. | |
| string or strings separated by space that specify the font color in #rrggbb format for item at normal, highlighted and mouse-down modes: #000000 #000000 ... Default. If only one string is specified, it sets font color for both normal and highlighted modes but no effect for mouse-down. If two strings are specified, they set the font colors for normal and highlighted modes respectively but no effect for mouse-down. If three strings are specified, they set the font colors for normal, highlighted and mouse-down modes | |
| string that specifies one of the following values: left ... Default. center right | |
| string that specifies one of the following values: top ... Default. middle ... Does not work in Netscape 4, should be considered only when all the items can display text in one line and you also specify the item height in the item style. This is to help align the item text in the middle without setting the item padding height. | |
For example:
addStyleFont("font", "font-family:Verdana, Arial; font-size:12; color:#cccccc #000080 #cc00000; font-weight:normal bold;");
To define the sub-menu tag style, we would use:
addStyleTag("tag-style-name", "style-parameter-phrases");
and the available settings are:
| value | |
| string that specifies one of the following values: visible ... Default. The sub-menu tag is visible hidden ... The sub-menu tag is hidden, the rest of parameter phrases will be ignored. | |
| string that specifies the web path for tag images. If the path doesn't start with "." (like "./" or "../"), "/" or "http://", the "imagePath" will be added to it. | |
| string that specifies the image name for tag at normal mode. | |
| string that specifies the image name for tag at highlighted mode. | |
| number that specifies the width of the tag image. | |
| number that specifies the height of the tag image. | |
| string that specifies one of the following values: left right ... Default. | |
| string that specifies one of the following values: top ... Default. middle ... Only works in IE/N6+/Konq3, should be considered only when all the items can display text in one line. | |
For example:
addStyleTag("tag", "path:http://www.yxScripts.com/menuG4/img/; tag-normal:tagDN.gif; tag-highlight:tagDH.gif; width:11; height:9");
To define the separator style, we would use:
addStyleSeparator("separator-style-name", "style-parameter-phrases");
and the available settings are:
| value | |
| string that specifies one of the following values: outset ... 3-D outset color effect inset ... 3D inset color effect solid ... Default. A solid line. | |
| string that specifies the color in #rrggbb format: #000000 ... Default. | |
| number that specifies one of the following values: 1 ... Only applies when the style is set to solid. 2 ... Default. | |
Well, we have defined styles for different parts of the menu, and now we combine them into a menu style:
addStyleMenu("menu-style-name", "pad-style-name", "item-style-name", "font-style-name", "tag-style-name", "separator-style-name");
• How to link menu styles to the menus?
Let's bring back the Toyota menu as an example. We have the following top-menu and sub-menus in the Toyota menu:
And say we want to use actual width for the top-menu items since it's a menu bar and use fixed item width for the sub-menu items, the rest of the style settings will be the same for the whole menu:
addStylePad("pad", "...");
addStyleItem("top-item", "width:0; ...");
addStyleItem("sub-item", "width:120; ...");
addStyleFont("font", "...");
addStyleTag("tag", "...");
addStyleSeparator("separator", "...");
addStyleMenu("top-bar", "pad", "top-item", "font", "tag", "separator");
addStyleMenu("sub-pad", "pad", "sub-item", "font", "tag", "separator");
So we have two menu styles, "top-bar" and "sub-pad", we would like to apply the "top-bar" to the top-menu and apply "sub-pad" to all the sub-menus. To do so, we define a style group:
addStyleGroup("style-group-name", "menu-style-name", "top-menu-name", "sub-menu-name", "sub-menu-name", ...);
The style group lets us group the top-menu and/or sub-menus and link them to the menu styles. For the Toyota menu, it would be:
addStyleGroup("toyota-style", "top-bar", "Vehicles");
addStyleGroup("toyota-style", "sub-pad", "cars-sub", "suv-sub", "trucks-sub", "camry-sub", "tacoma-sub", "tundra-sub");
Almost done, and what left is just to tell Menu G4 to use "toyota-style" to render the Toyota menu. To do so, we put one more parameter phrase in the addInstance() call:
addInstance("Toyota-Menu", "Toyota", "position:...; style:toyota-style");
Follow this link to see a non-frame Toyota menu page with some menu styles.
• How to define item-level styles?
We've talked about the menu style, which applies to all the menu items on the same pad, but sometimes we might want to have a different style for some items only, so we have the item-level style.
Since those items, which you want to apply a different style, are still on the same pad with other items that follow the menu style, so the item-level style only covers the item style, the font style and the tag style.
We use the same syntax to define the item style, the font style and the tag style for an item-level style as we did for a menu style, and use the same syntax to put them together:
addStyleItem("item-style-name", ...);
addStyleFont("font-style-name", ...);
addStyleTag("tag-style-name", ...);
addStyleMenu("item-level-style-name", "", "item-style-name", "font-style-name", "tag-style-name", "");
The only difference is that, we use "" for the pad-style parameter and separator-style parameter in the "addStyleMenu()" call since that would follow the menu style.
• How to link the item-level styles to the items?
We refer to the names of the top-menu and the sub-menus in the "addStyleGroup()" call, but menu items don't have names, so we refer to their group IDs.
If you have some menu items with group IDs:
addLink(..., "id-1"); addLink(..., "id-1"); addLink(..., "id-1"); addLink(..., "id-2"); addLink(..., "id-2"); addLink(..., "id-2");
and you have defined two item-level styles: "item-level-1" and "item-level-2":
addStyleItem("item-style-1", "...");
addStyleFont("font-style-1", "...");
addStyleTag("tag-style-1", "...");
addStyleItem("item-style-2", "...");
addStyleFont("font-style-2", "...");
addStyleTag("tag-style-2", "...");
addStyleMenu("item-level-1", "", "item-style-1", "font-style-1", "tag-style-1", "");
addStyleMenu("item-level-2", "", "item-style-2", "font-style-2", "tag-style-2", "");
and you want to apply "item-level-1" to items with group ID "id-1" and "item-level-2" to items with group ID "id-2", you can do this:
addStyleGroup("style-group-name", "item-level-1", "id-1");
addStyleGroup("style-group-name", "item-level-2", "id-2");
Then, when you make a menu instance with this style group, items with group ID "id-1" will be rendered with "item-level-1" style, and items with group ID "id-2" will be rendered with "item-level-2" style.
Actually you can define many menu styles and item-level styles, and group them into the same style group, thus, for the menu instance with this style group, if a sub-menu name or an item group ID is matched, the corresponding style will be applied.
• How does menu positioning and alignment work?
To position a menu is actually to position its top-menu pad, simply put, is to set up a spot on the page, and align the top-menu pad with that spot.
We go through the spot first, then the alignment later.
There are three ways to set up a spot on the page:
- define the coordinates ... absolute position
- make a position mark ... relative position
- use a pre-defined slot
Absolute positioning is straightforward, and we will have "addInstance()" call like this:
addInstance("menu-instance-name", "menu-name", "position:absolute; ...");
Many times, we might want to show the menu at some place that the coordinates are not easy to obtain, for example, a table cell in a centralized table. In such cases, we will set up some in-line layers on the web page as position marks, that's what we call relative positioning.
An in-line layer is a "box" element, after we set up an in-line layer, the top-left corner (the very pixel spot) of the layer will become the position mark we need.
If the position mark we need is not in a table cell, we can make the in-line layer with the SPAN tag this way:
<span id="holder" style="position:relative"> </span>
and the "addInstance()" call would be:
addInstance("menu-instance-name", "menu-name", "position:relative holder; ...");
For example, you have some HTML content like this:
let's show the menu right here:
and you want to show the menu right next to the "here:", then in the page source code, you can make the position mark this way:
let's show the menu right here:<span id="holder" style="position:relative"> </span>
If we need to put the position mark inside a table cell, for example, we have a logo image in a centralized table and we want to show the menu under the image:
| |
| | <--show the menu from here |
then the only easy way to make a position mark along with the logo image is to, in the same table, make a table cell next to the image cell and put the position mark inside the new table cell. For this example, we will make a table cell right under the image cell (of course, the additional table cell won't be visible on the actual page, I show it here just to tell where it would be):
| Logo Image |
and use two in-line layers with the DIV tag for the position mark:
<div id="holder" style="position:absolute"> </div><div id="holder2" style="position:relative"> </div>
and the "addInstance()" call would be:
addInstance("menu-instance-name", "menu-name", "position:relative holder holder2; ...");
in the page source code, it becomes:
<table align="center"> <tr><td><img src="logo.gif"></td></tr> <tr><td><div id="holder" style="position:absolute"> </div><div id="holder2" style="position:relative"> </div></td></tr> </table>
The reason of using two in-line layers is that the way Netscape 4 and Konqueror 3 tell the position of an in-line layer in a table cell is different from the way IE, Netscape 6+ and Opera 7 do. So actually one in-line layer is for Netscape 4 and Konqueror 3, and the other is for IE, Netscape 6+ and Opera7.
So, relative positioning is for you to position the menu against some HTML element, but sometimes, we might want to position the menu against the browser window, say, at the bottom-right corner. In this case, the pre-defined slots come very handy.
The slots are some pre-defined spots related to the browser window. Menu G4 defines nine slots:
|
So if we want to put the menu at the bottom-right corner, we can just pick slot 4 without worrying the size of the browser window, and the "addInstance()" call would be:
addInstance("menu-instance-name", "menu-name", "position:slot 4; ...");
Now we have the spot, and we need to decide the top-menu pad alignment with the spot.
Following are the alignment options supported in "addInstance()" call:
|
valign:top; align:left; | |
|
valign:top; align:center; | |
|
valign:top; align:right; | |
|
valign:middle; align:left; | |
|
valign:middle; align:center; | |
|
valign:middle; align:right; | |
|
valign:bottom; align:left; | |
|
valign:bottom; align:center; | |
|
valign:bottom; align:right; | |
Obviously, for the logo image example, we should use "valign:top; align:left;" alignment, and for the bottom-right corner example, we should go with "valign:bottom; align:right;" alignment.
• How to make a menu instance?
We've mentioned the "addInstance()" call many times, we now take a look at some details:
addInstance("menu-instance-name", "menu-name", "instance-parameter-phrases");
and the available settings are:
| value | |
| string that specifies one of the following values: visible ... Default. The top-menu will stay visible on page. hidden ... The menu is hidden. | |
| string that specifies one of the following options: absolute ... Default. The actual coordinates are specified by offset-top and offset-left. relative holder ... "holder" is the position mark. relative holder1 holder2 ... "holder1" and "holder2" are the position marks in a table cell. slot n ... n could be 0, 1, 2, 3, 4, 5, 6, 7 or 8. | |
| string that specifies one of the following values: top ... Default. middle bottom | |
| string that specifies one of the following values: left ... Default. center right | |
| number that specifies the vertical offset in pixel against the position spot. 0 ... Default. | |
| number that specifies the horizontal offset in pixel against the position spot. 0 ... Default. | |
| string that specifies one of the following values: bar ... Top-menu shown as horizontal menu bar, sub-menus shown as drop-down menu pads if no other pad styles are defined. pad ... Default. Top-menu shown as drop-down menu pad, sub-menus shown as drop-down menu pads if no other pad styles are defined. | |
| same as the "direction" in pad style. The first level sub-menu will follow this setting. If a pad style is defined, it will overwrite this setting for sub-menus at deeper levels. | |
| string that specifies the name of the style group. If not specified, default styles will be used. | |
| string that specifies the target window name for links on the menu. If not specified, self window will be assumed. | |
| string that specifies one of the following values: yes ... Click on any blank area of the page to collapse the menu. no ... Default. Mouse-out for a while or click to collapse the menu. | |
| string that specifies one of the following values: yes ... Default. Keep opened child sub-menus open when the mouse cursor stays on a sub-menu item. no ... Only keep the immediate sub-menu open. | |
| string that specifies one of the following values: yes ... Menu will move to maintain the same position in the browser window. no ... Default. Menu always stay on the same position in the page. | |
• How to set up the path script?
Menu G4 uses a path script to tell the loader script where to load the function script for the browser detected and where to load the menu content/style script. It also looks at the path script for some parameter settings.
A typical path script would look like this:
var webPath = "http://www.yxScripts.com/"; var scriptPath = "http://www.yxScripts.com/menuG4/script/"; var imagePath = "http://www.yxScripts.com/menuG4/img/"; var contentScript = "http://www.yxScripts.com/example/content.js"; var nonMenuPage = ""; var menuTimer = 500; var menuTimerBar = 0; var floatTimer = 100; var floatOffset = 1; var zBase = 2;
The "webPath" is like the "BASE" in HTML syntax, it defines the base web path for all the links on the menu. If this line is missing, the current path of the web page will be used.
The "scriptPath" is where you put the Menu G4 scripts. If this line is missing, "http://www.yxScripts.com/menuG4/script/" will be used.
The "imagePath" is where you put the Menu G4 images. If this line is missing, "http://www.yxScripts.com/menuG4/img/" will be used.
The "contentScript" is where you put your menu content/style file.
The "nonMenuPage" is the page to be loaded when a browser is not supported by Menu G4. If this line is missing, the loader script won't take any action for a non-supported browser.
The "menuTimer" is the time delay when you mouse-over a sub-menu item on a drop-down menu to open its sub-menu, if this line is missing, 500 will be used.
The "menuTimerBar" is the time delay when you mouse-over a sub-menu item on a menu bar to open its sub-menu, if this line is missing, 0 will be used.
The "floatTimer" is the interval in ms for how fast the floating menu and scrolling sub-menu will move. Default is 100.
The "floatOffset" tells how to move a floating menu in position. Default is 1. Setting to a larger number will have the floating menu move slower but smoother.
The "zBase" is the base z-index for the menu layers. If you have other DHTML layers on the page, you should set this to a big number so that the menu layers can stay on top. If this line is missing, 2 will be used.
• How to use images as menu items?
If you want to use an image to replace the item display text, you will need to define the group-id for the item and use the following call to link the image to the item:
setImage("item-group-id", "image-path", "image-normal", "image-highlight", image-width, image-height);
If the "image-path" is blank (""), the "imagePath" defined in the path script will be used. If the "image-path" doesn't start with "./" (current path), "/" or "http://", the "imagePath" will be added to it. This call can be placed in the content script.
• How to use image icons in menu items?
If you want to put an image icon along with a menu item, you will need to define the group-id for the item and use the following call to link the image icon to the item:
setIcon("item-group-id", "image-path", "image-normal", "image-highlight", image-width, image-height, "align", "valign");
The "align" could be "left" or "right". The "valign" could be "top" or "middle". Just like the "valign" in the tag style, the "middle" option should be considered only when all the items can display text in one line.
If the "image-path" is blank (""), the "imagePath" defined in the path script will be used. If the "image-path" doesn't start with "./" (current path), "/" or "http://", the "imagePath" will be added to it. This call can be placed in the content script.
• How to use background images for menu items?
If you want to use images as background for a menu item, you will need to define the group-id for the item and use the following call to link the background images to the item:
setBGImage("item-group-id", "image-path", "background-image-normal", "background-image-highlight")
If the "image-path" is blank (""), the "imagePath" defined in the path script will be used. If the "image-path" doesn't start with "./" (current path), "/" or "http://", the "imagePath" will be added to it. This call can be placed in the content script.
• How to use background image for menu base pad?
If you want to use an image as background for a menu base pad, you can use the following call to link the background image to the pad:
setBGImage("top/sub-menu-name", "image-path", "background-image", "")
If the "image-path" is blank (""), the "imagePath" defined in the path script will be used. If the "image-path" doesn't start with "./" (current path), "/" or "http://", the "imagePath" will be added to it. This call can be placed in the content script.
• How to set up mouse-over/mouse-out events for menu items?
If you want to have some actions for the mouse-over/mouse-out events on a menu item, you can associate the actions with its group id:
addItemEvent("item-group-id", "mouse-over-action", "mouse-out-action");
for example: addItemEvent("item-group-id", "alert('Mouse Over')", "alert('Mouse Out')");
This call can be placed in the content script.
• How to set up open/close events for sub-menus?
If you want to have some actions when a sub-menu opens or closes, you can associate the actions with its name:
addMenuEvent("sub-menu-name", "menu-open-action", "menu-close-action");
This call can be placed in the content script.
• How to set up window resizing event?
Menu G4 will detect window resizing and re-position the menus. If you want to have some actions when the window is being resized, you can have:
addWindowEvent("action-codes");
This call can be placed in the content script.
• How to get more control on menu instances?
Menu G4 provides some function calls to control the menu instances after they are built:
getMenuDim("menu-instance-name");
for example: var insInfo = getMenuDim("myIns");
The "menu-instance-name" is the name you use in the addInstance() call. This function returns an object with the following properties:
- x ... the x-coordinate of the top-menu
- y ... the y-coordinate of the top-menu
- width ... the width of the top-menu
- height ... the height of the top-menu
- scrollx ... the x-scroll offset of the browser
- scrolly ... the y-scroll offset of the browser
showMenu("menu-instance-name");
If the visibility parameter of a menu instance is set to "hidden", this menu instance won't be visible until you call this function. And after the menu closes, it's still invisible.
showMenuX("menu-instance-name");
It's like the "showMenu()", but the top-menu will stay visible after shown, as if the menu instance was created with the "visibility:visible" parameter.
hideMenu("menu-instance-name");
If the menu instance is created with "visibility:visible" parameter, this call will collapse the menu, if the menu instance is created with the "visibility:hidden" parameter, this call will close and hide the menu.
hideMenuX("menu-instance-name");
This call will close and hide the menu, and set its visibility to "hidden", as if the menu instance was created with the "visibility:hidden" parameter.
moveMenuTo("menu-instance-name", x, y);
This call moves the top-menu of the given menu instance to the specified position.
moveMenuBy("menu-instance-name", dx, dy);
This call moves the top-menu of the given menu instance by the specified offsets.
openMenu("menu-instance-name");
This call is like the showMenu(), but resets the menu timer before showing the menu.
openMenuX("menu-instance-name");
This call is like the showMenuX(), but resets the menu timer before showing the menu.
closeMenu();
This call closes all the menus after the menu timer.
closeMenuX("menu-instance-name");
This call sets the menu's visibility to hidden, then calls closeMenu().
• How to open a link in a new window?
The target parameter in the "addInstance()" call defines the target widnow for all the links on the menu. If you want to have a new window for some links, you can make them as command items:
addCommand("sub-menu-name", "item-text", "item-message", "window.open('link-url', 'window-name', 'window-para')", "group-id");
If you are using cross-frame menus, you have one more parameter for the "addLink()" call:
addLink("top/sub-menu-name", "item-display-text", "item-message", "link-url", "group-id", "link-target");
• How to define the sub-menu frame for cross-frame menus?
Menu G4 provides several ways to define a sub-menu frame to fit different situations (the set up of frameset page will be the same):
This is the simplest case, we only need to set up the top-menu page. Just include the "menuG4f.js" in the top-menu page and set up the BODY tag like this:
<body ... onload="initMenu('instance-name', 'top'); setSubFrame('instance-name', sub-menu-frame-reference-path)">
If it's a top-bottom frame layout, set the menu direction to "right-down", if it's bottom-top, set the direction to "right-up", if it's left-right, set the direction to "right-down", if it's right-left, set the direction to "left-down".
For example, a top-left-right T-frame layout, top-menus in top and left frame, both have sub-menus in the right frame.
This is also simple, just set up the top-menu pages as we do in case 1, and set up the menu directions accordingly.
For this case, the sub-menu frame is not known to the top-menu page, thus it has no way to call the "setSubFrame()". So, we will call "initMenu()" only in the top-menu page:
<body ... onload="initMenu('instance-name', 'top')">
and set up the first sub-menu page to report the sub-menu frame:
<body ... onload="initSub('instance-name')">
This could happen if the page, the menu content or the menu instance are generated on-the-fly. We then need to make a "connection-id" to link the top-menu and the sub-menus.
To set up the top-menu page:
<body ... onload="initMenu('instance-name', 'top'); setSubID('instance-name', 'sub-id')">
to set up the sub-menu page, include the "menuG4f.js" and put the BODY tag this way:
<body ... onload="initSub('sub-id')">
If the sub-menu frame is consistent (all the sub-menus will be shown in the same frame afterwards), we only need to set up the first sub-menu page, otherwise, sub-menu pages that would change the sub-menu frame should include the "menuG4f.js" and set up the "initSub()" call.
As you can notice, the parameter passed to the initSub() call could be a menu instance name or a "connection-id". The initSub() will try to look for a menu instance first by the given parameter, then a "connection-id" if no menu instance is found.
To put the whole menu in a frame page, we include the "menuG4f.js" and set up the BODY tag this way:
<body ... onload="initMenu('instance-name', 'all')">
For page with the triggers, it needs to include the "menuG4f.js" as well.
To set up a mouse-over/mouse-out trigger:
<a href="#" onmouseover="openMenu('instance-name')" onmouseout="closeMenu()">Menu Trigger</a>
To set up a mouse-click/mouse-out trigger:
<a href="#" onclick="clickMenu('instance-name')" onmouseout="closeMenu()">Menu Trigger</a>
Of course, the menu needs to be positioned to stay close to the menu triggers.
Actually, the "openMenu()", "clickMenu()" and "closeMenu()" will also work for non-frame menus.
• How to migrate Menu G3.x to Menu G4.
For a non-frame menu, the menu content would be the same in Menu G3.x and Menu G4, we only need to:
... this can be done easily with the convertor tool.
... use convertor as well.
... this can be done in two ways. Say you have the following instance:
function buildMenu() {
addInstance("ins", ...);
}
and html page:
<body onload="buildMenu()">
You can either update the "buildMenu()" function and leave the html page as it is:
function buildMenu() {
addInstance("ins", ...);
showMenu("ins");
}
or you can follow the "standard" Menu G4 way to update both of them:
addInstance("ins", ...);
<body onload="showMenu('ins')">
For a cross-frame menu, we will need to:
... in Menu G3, we use "addSubIns()" to define cross-frame sub-menu items, then define individual menus as cross-frame sub-menus. Now we need to join them into one menu as what we will have for a non-frame page.
... at this point, still use the Menu G3 syntax.
... you can use Menu G3 syntax here then convert it later, or just use Menu G4 syntax directly and save step 5.
... use the convertor.
... use the convertor.
... re-compose it with Menu G4 settings.
... remove all Menu G3 settings and leave them as plain html pages.
The in-page relative positioning won't work with Konqueror3/Linux
... Konqueror3/Linux doesn't return the correct position of an in-page in-line layer.
workaround: use in-table relative positioning if possible.
Background image for menu items won't work in Netscape 4 cross-frame version.
4.1.5
4.1.4
4.1.3
4.1.2
4.1.1
4.1.0
4.0.5
4.0.4
4.0.3
4.0.2
4.0.1
4.0
3.2
3.1