The purpose of this page is to provide sample menus illustrating the various styles and different ways you can create menus using the Menu component. If your site uses the Menu component, you can submit your URL for possible posting here in a future update of this page.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Adding a menu to your web site is easy.
To begin, add the following line of code into your web page:
<SCRIPT LANGUAGE="JavaScript1.2" SRC="http://developer.netscape.com/openstudio/lib/menu.js"></SCRIPT>
Next, create a menu object by using the JavaScript new operator
and the Menu() constructor, as follows:
var myMenu = new Menu();
This statement creates a menu object called myMenu.
You can add "menu items" to your newly created menu object with
the addMenuItem() method, which is built into the Menu component.
For example:
myMenu.addMenuItem("my item");
To continue adding menu items, keep calling addMenuItem(), as shown in the following sample script.
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var myMenu = new Menu();
myMenu.addMenuItem("my menu item A");
myMenu.addMenuItem("my menu item B");
myMenu.addMenuItem("my menu item C");
myMenu.addMenuItem("my menu item D");
myMenu.writeMenus();
//-->
</SCRIPT>
display myMenu
Let's summarize the three basic steps it takes to quickly add a dynamic menu to your web page:
The showMenuInFrame() function, which is in the first frame of the examples, passes the menu label and the x and y coordinates as arguments to the showMenu() function, which is actually located in the second frame along with the Menu component and the CSS-P-based menu content. There are other ways to do this, but this seems to be the simplest. Alternatively, I could have called the showMenu() function directly -- and you still can -- but the x and y coordinates might not be what you expected (unless you explicitly hard-code them), because the mouse is actually over the first (toc) frame at that time, not the second frame where the menus are. (Remember, each frame has its own separate window and document objects, containing a separate set of x and y properties.)
Note that the second frame creates and loads the menus the same way that this page does, but instead of having the menu objects code in the page itself, it includes a JavaScript library called mymenus.js that contains all the code for the menu objects (Open Studio also uses a library called openstudio.js for sharing menu objects). This way I can include the mymenus.js library (along with the menu.js library) into multiple documents in order to share and cache the same menu objects code.
If you need help, get as far as you can and then e-mail your staged URL. Based on your feedback, we can come up with something more generic and compatible for everyone.
As you can see, the Menu component still hasn't reached a "1.0" version yet (although it should soon, with your help). That's because originally I created the Menu component as just sample code for Netcaster Channel developers to copy and modify, with the idea of adding features and improving the portability of the component as developers requested it, until it reached a fuller-featured state. However, back then I never got around to actually publishing the Menu component. Now that I have, I still plan to update and improve it based on feedback from developers, so please send in your suggestions, requests, or comments regarding this object.
| DevEdge Online FAQ Developer Response Center Join DevEdge Program |
This site powered by: Netscape Enterprise Server and Netscape Compass Server. |