Menu G5 Step-by-step: Build a menu instance

yxScripts.com

We want to show a menu on the page with the menu content we just defined. We call this menu a menu instance of the menu content. But before we can really show some fancy menu on our pages, we will need to install the menu scripts first.

After you unzip the menuG5.zip, you should be able to find a sub-dir named "script", which you should upload to your web site. The "script" sub-dir holds the following files:

Note: The compact version is about 12KB to 15KB smaller in file size than the normal version. It's not reading-friendly.

As the name tells, the "menuG5Loader.js" (or "menuG5LoaderX.js" if you are using the compact version) script should be included into the menu page and it would load a browser specific script if a supported browser is detected. In order for the loader script to know where to find the browser specific scripts, we need to set up the web path of the "script" directory:

scriptPath="http://www.mydomain.com/menu/script/";

And since we have the menu content in a content script (usually named as content.js), we can also let the loader script load it for us by setting another web path:

contentScript="http://www.mydomain.com/menu/content/content.js";

So, a menu page would contain the following codes:

<html>
<head>

<script language="javascript">
scriptPath="http://www.mydomain.com/menu/script/";
contentScript="http://www.mydomain.com/menu/content/content.js";
</script>

<script language="javascript" src="http://www.mydomain.com/menu/menuG5Loader.js"></script>

</head>

<body>
...

And usually, we will put the web path info into another JS script file (called a path script and usually named as path.js):

// the path settings
scriptPath="http://www.mydomain.com/menu/script/";
contentScript="http://www.mydomain.com/menu/content/content.js";

and the menu page now looks like this:

<html>
<head>

<script language="javascript" src="http://www.mydomain.com/menu/content/path.js"</script>
<script language="javascript" src="http://www.mydomain.com/menu/menuG5Loader.js"></script>

</head>

<body>
...

Of course, if you are just testing it locallly from your hard drive, you might have a path script like this:

scriptPath="../script/";
contentScript="menu/content.js";

and the script lines in your page would be like this:

<script language="javascript" src="menu/path.js"</script>
<script language="javascript" src="../script/menuG5Loader.js"></script>

Well, we have the script directory uploaded to the site and included the path script line and loader script line into our menu page, we are now ready to show the menu. To do so, we define a menu instance:

addInstance("Demo Menu", "Demo", "");

Remember we have a menu content named "Demo"? We now make a menu instance of the "Demo" menu content and name it "Demo Menu". This addInstance() line can be embedded into the menu page:

<html>
<head>

<script language="javascript" src="http://www.mydomain.com/menu/content/path.js"</script>
<script language="javascript" src="http://www.mydomain.com/menu/menuG5Loader.js"></script>

<script language="javascript">
addInstance("Demo Menu", "Demo", "");
</script>

</head>

<body>
...

or we can just append it to the content script and let the loader script execute it for us:

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

...

endMenu();

// build the menu instance
addInstance("Demo Menu", "Demo", "");

To show the menu, we use:

showMenu("Demo Menu");

We can put it as the onload call in BODY tag if we want it to show up when page is loaded:

<html>
<head>

<script language="javascript" src="http://www.mydomain.com/menu/content/path.js"</script>
<script language="javascript" src="http://www.mydomain.com/menu/menuG5Loader.js"></script>

</head>

<body onload="showMenu('Demo Menu')">

or put it this way if you don't want to touch the BODY tag:

<html>
<head>

<script language="javascript" src="http://www.mydomain.com/menu/content/path.js"</script>
<script language="javascript" src="http://www.mydomain.com/menu/menuG5Loader.js"></script>
<script language="javascript">
function buildMenu() { showMenu("Demo Menu"); }
window.onload=buildMenu;
</script>

</head>

<body>

or we can set up a link for it:

<a href="#" onclick="clickMenu('Demo Menu'); return false;">show</a>

Like this: [show]  

Usually when you click somewhere, the script will receive the onclick event, and if you are not clicking on the menu, the script will collapse the menu. So if you want to click a link to bring up the menu, you might need to tell the script not to collapse it, and that's exactly what the clickMenu() does. It tells the script to ignore the click then calls the showMenu().


You might wonder why the menu showed up as a simple black & white menu bar in the previous example but now as a open-up menu in a different look.

Well, in Menu G5, the menu content is just about the menu content, it's other settings that control the look and feel, the position and the behavior of a menu instance built on a menu content, thus you can have menu instances in different styles for different pages (or same page) but re-use the same menu content.

And our next topic would be how to render a menu instance.

[Define the style] [Back to index page]

# # #