Menu G5 Step-by-step: Define a menu

Let's say we have a menu bar like the one above (clicking on a menu item won't give you any surprise as no URL is defined in this demo menu content), and if you play with it a bit you will find out it has a menu content like the following:

Home
Tool Scripts

Menu Scripts

Menu G5
Menu G4
Menu G3

Xin Calendar
Select Menu 2
Form Guard

Game Scripts

Soul Of Fighters
Simple Tetris 2
Bubble Puzzle
Puzzle OnSite

User Forum

Menu G5
Xin Calendar
Form Utilities

Contact

So we have a top-menu of "Home", "Tool Scripts", "Game Scripts", "User Forum" and "Contact" here, and a sub-menu of "Menu Scripts", "Xin Calendar", "Select Menu 2" and "Form Guard" for the "Tool Scripts" in top-menu, a sub-menu of "Menu G5", "Menu G4" and "Menu G3" for "Menu Scripts" in the sub-menu of "Tool Scripts", etc.

To define this menu content In Menu G5, we name it first:

addMenu("Demo", "demo-top");

which means we would like to make a new menu content, name it as "Demo" and its top-menu as "demo-top". We are then ready to add menu items to its top-menu, start with the "Home" item:

addLink("demo-top", "Home", "", "/index.html", "");

which means we are adding a link item to the menu named "demo-top" (which is our top-menu), it would display "Home" as the item text and load "/index.html" when clicked.

Then we move to the next item "Tool Scripts". This item has a sub-menu, we use a different call for sub-menu item:

addSubMenu("demo-top", "Tool Scripts", "", "/Tools/index.html", "tool-sub", "");

which means we are adding a sub-menu item to the menu named "demo-top", it would display "Tool Scripts" as the item text, pop up a sub-menu named "tool-sub" when hovered, and load "/Tools/index.html" when clicked.

Likewise, we define the sub-menu items for "Game Scripts" and "User Forum":

addSubMenu("demo-top", "Game Scripts", "", "/Games/index.html", "game-sub", "");
addSubMenu("demo-top", "User Forum", "", "/bbs/index.php", "forum-sub", "");

and the last link item "Contact" in the top-menu:

addLink("demo-top", "Contact", "", "/contact.html", "");

So far our menu content would look like this:

// a menu content named Demo
addMenu("Demo", "demo-top");

// top menu of Demo
addLink("demo-top", "Home", "", "/index.html", "");
addSubMenu("demo-top", "Tool Scripts", "", "/Tools/index.html", "tool-sub", "");
addSubMenu("demo-top", "Game Scripts", "", "/Games/index.html", "game-sub", "");
addSubMenu("demo-top", "User Forum", "", "/bbs/index.php", "forum-sub", "");
addLink("demo-top", "Contact", "", "/contact.html", "");

and we continue with the sub-menus, the first one would be the "tool-sub" for the "Tool Scripts" item:

// sub-menu of tool-sub for [Tool Scripts]
addSubMenu("tool-sub", "Menu Scripts", "", "", "menu-sub", "");
addLink("tool-sub", "Xin Calendar", "", "/Tools/calendar.html", "");
addLink("tool-sub", "Select Menu 2", "", "/Tools/sm.html", "");
addLink("tool-sub", "Form Guard", "", "/Tools/fg.html", "");

and likewise, the sub-menus for "Game Scripts" and "User Forum":

// sub-menu of game-sub for [Game Scripts]
addLink("game-sub", "Soul Of Fighters", "", "/Games/sof.html", "");
addLink("game-sub", "Simple Tetris 2", "", "/Games/tetris2.html", "");
addLink("game-sub", "Bubble Puzzle", "", "/Games/bubble.html", "");
addLink("game-sub", "Puzzle OnSite", "", "/Games/puzzle.html", "");

// sub-menu of forum-sub for [User Forum]
addLink("forum-sub", "Menu G5", "", "/bbs/forum.php?id=1", "");
addLink("forum-sub", "Xin Calendar", "", "/bbs/forum.php?id=2", "");
addLink("forum-sub", "Form Utilities", "", "/bbs/forum.php?id=3", "");

and finally the sub-menu of "menu-sub" for the "Menu Scripts" item:

// sub-menu of menu-sub for [Menu Scripts]
addLink("menu-sub", "Menu G5", "", "/Tools/MenuG5/index.html", "");
addLink("menu-sub", "Menu G4", "", "/Tools/MenuG4/index.html", "");
addLink("menu-sub", "Menu G3", "", "/Tools/MenuG3/index.html", "");

When we are done with the menu content, we put an end to it:

endMenu();

To put them all together, we have:

// a menu content named Demo
addMenu("Demo", "demo-top");

// top menu of Demo
addLink("demo-top", "Home", "", "/index.html", "");
addSubMenu("demo-top", "Tool Scripts", "", "/Tools/index.html", "tool-sub", "");
addSubMenu("demo-top", "Game Scripts", "", "/Games/index.html", "game-sub", "");
addSubMenu("demo-top", "User Forum", "", "/bbs/index.php", "forum-sub", "");
addLink("demo-top", "Contact", "", "/contact.html", "");

// sub-menu of tool-sub for [Tool Scripts]
addSubMenu("tool-sub", "Menu Scripts", "", "", "menu-sub", "");
addLink("tool-sub", "Xin Calendar", "", "/Tools/calendar.html", "");
addLink("tool-sub", "Select Menu 2", "", "/Tools/sm.html", "");
addLink("tool-sub", "Form Guard", "", "/Tools/fg.html", "");

// sub-menu of game-sub for [Game Scripts]
addLink("game-sub", "Soul Of Fighters", "", "/Games/sof.html", "");
addLink("game-sub", "Simple Tetris 2", "", "/Games/tetris2.html", "");
addLink("game-sub", "Bubble Puzzle", "", "/Games/bubble.html", "");
addLink("game-sub", "Puzzle OnSite", "", "/Games/puzzle.html", "");

// sub-menu of forum-sub for [User Forum]
addLink("forum-sub", "Menu G5", "", "/bbs/forum.php?id=1", "");
addLink("forum-sub", "Xin Calendar", "", "/bbs/forum.php?id=2", "");
addLink("forum-sub", "Form Utilities", "", "/bbs/forum.php?id=3", "");

// sub-menu of menu-sub for [Menu Scripts]
addLink("menu-sub", "Menu G5", "", "/Tools/MenuG5/index.html", "");
addLink("menu-sub", "Menu G4", "", "/Tools/MenuG4/index.html", "");
addLink("menu-sub", "Menu G3", "", "/Tools/MenuG3/index.html", "");

endMenu();

Actually, you can change the order of some content lines as long as a higher level menu (or item) goes beyond its lower level menu items (or sub-menus). So we can have the menu content in the following order, just like how we layout it earlier:

addMenu("Demo", "demo-top");

addLink("demo-top", "Home", "", "/index.html", "");

addSubMenu("demo-top", "Tool Scripts", "", "/Tools/index.html", "tool-sub", "");
	addSubMenu("tool-sub", "Menu Scripts", "", "", "menu-sub", "");
		addLink("menu-sub", "Menu G5", "", "/Tools/MenuG5/index.html", "");
		addLink("menu-sub", "Menu G4", "", "/Tools/MenuG4/index.html", "");
		addLink("menu-sub", "Menu G3", "", "/Tools/MenuG3/index.html", "");
	addLink("tool-sub", "Xin Calendar", "", "/Tools/calendar.html", "");
	addLink("tool-sub", "Select Menu 2", "", "/Tools/sm.html", "");
	addLink("tool-sub", "Form Guard", "", "/Tools/fg.html", "");

addSubMenu("demo-top", "Game Scripts", "", "/Games/index.html", "game-sub", "");
	addLink("game-sub", "Soul Of Fighters", "", "/Games/sof.html", "");
	addLink("game-sub", "Simple Tetris 2", "", "/Games/tetris2.html", "");
	addLink("game-sub", "Bubble Puzzle", "", "/Games/bubble.html", "");
	addLink("game-sub", "Puzzle OnSite", "", "/Games/puzzle.html", "");

addSubMenu("demo-top", "User Forum", "", "/bbs/index.php", "forum-sub", "");
	addLink("forum-sub", "Menu G5", "", "/bbs/forum.php?id=1", "");
	addLink("forum-sub", "Xin Calendar", "", "/bbs/forum.php?id=2", "");
	addLink("forum-sub", "Form Utilities", "", "/bbs/forum.php?id=3", "");

addLink("demo-top", "Contact", "", "/contact.html", "");

endMenu();

If you have more than one menu content, you can start with addMenu() again after you finish one:

// The products menu
addMenu("Products Menu", "product-top");

addLink("product-top", ...);
...
...

// The services menu
addMenu("Services Menu", "service-top");

addLink("service-top", ...);
...
...

// All done
endMenu();

Note: For a menu content, the names of the top-menu and the sub-menus should be unique within the menu content, and names of menu contents should also be unique.

Note: Usually we put our menu contents in a JS script file and call it a content script.

Well, we have the menu content now, the next step would be to make a menu instance on it.

[Build a menu instance] [Back to index page]

# # #