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:
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]
# # #