Drop down menu and sub menu : Menu 2 « GUI Components « JavaScript DHTML






Drop down menu and sub menu

 
<html>
<head>
<title>DynAPI Examples - HTML Menu</title>
<script language="JavaScript" src="./dynapisrc/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('./dynapisrc/');
dynapi.library.include('dynapi.api');
dynapi.library.include('TemplateManager');
dynapi.library.include('HTMLMenu');

</script>
<script language="Javascript">

// Mozilla will collapse/expand table cells whenever the content of the layer changes. To solve this, specify a width for your table cells
t = 'This is the Template:<br><br><center><table border="0"><tr><td width="200">{@mnu}</td></tr></table></center>';
var tp = new Template(null,100,100,250,200,'#EEEEEE');

tp.addChild(new HTMLMenu(),'mnu');

var mbar;
// Main Menu
mbar= tp.mnu.createMenuBar('main',40,20);
mbar.addItem(null,'File','file');
mbar.addItem(null,'Edit','edit');
mbar.addItem(null,'View','view');
mbar.addItem(null,'Tools','tools');
mbar.addItem(null,'Help','help');
  //File menu
  mbar = tp.mnu.createMenuBar('file',130);
  mbar.addItem(null,'New');
  mbar.addItem(null,'Open',null,'alert("Open files")');
  mbar.addItem(null,'Save');
  mbar.addItem(null,'Save As ...');
  mbar.addItem(null,'Recent Files','recent');
  mbar.addItem(null,'Exit');
    //Recent menu
    mbar = tp.mnu.createMenuBar('recent',120);
    mbar.addItem(null,'Dynapi.js');
    mbar.addItem(null,'Quickref.html');
    mbar.addItem(null,'Changelog.html');
    mbar.addItem(null,'Index.html');
  //edit menu
  mbar = tp.mnu.createMenuBar('edit',120);
  mbar.addItem(null,'Undo');
  mbar.addItem(null,'Cut');
  mbar.addItem(null,'Copy');
  mbar.addItem(null,'Paste');
  //view menu
  mbar = tp.mnu.createMenuBar('view',130);
  mbar.addItem(null,'Go');
  mbar.addItem(null,'Stop');
  mbar.addItem(null,'Toolbars','tbar');
  mbar.addItem(null,'Status Bar');
    // tbar
    mbar = tp.mnu.createMenuBar('tbar',120);
    mbar.addItem(null,'Header');
    mbar.addItem(null,'Footer');
    mbar.addItem(null,'Standard');
    mbar.addItem(null,'Drawing');
  //tools menu
  mbar = tp.mnu.createMenuBar('tools',120);
  mbar.addItem(null,'Options');
  mbar.addItem(null,'Macro');
  mbar.addItem(null,'Convert...');
  mbar.addItem(null,'Run...');

dynapi.document.addChild(tp);

dynapi.onLoad(function(){
  tp.setHTML(t);
})
</script>
</head>

<body>
<script>
  dynapi.document.insertAllChildren();
</script>
</body>
</html>


           
         
  








dynapi.zip( 791 k)

Related examples in the same category

1.Popup Menu
2.AtJsMenu Demo
3.Example 1: Basic Menu From Existing Markup
4.Example 2: Basic Menu From Pure JavaScript
5.Example 3: Grouped MenuItem Instances From Existing Markup
6.Example 4: Grouped MenuItem Instances Using Pure JavaScript
7.Example 5: Grouped MenuItem Instances With Titles From Existing Markup
8.Example 6: Grouped MenuItem Instances With Titles Using Pure JavaScript
9.Example 7: Multi-tiered Menu From Existing Markup
10.Example 8: Multi-tiered Menu From Pure JavaScript
11.Example 9: Handling Click Events
12.Example 10: Listening For DOM-Related Events
13.Example 11: MenuItem Configuration Properties
14.Example 12: Setting Configuration Properties At Runtime
15.Example 13: Multi-tiered Menu with Progressive Rendering of Submenus
16.Website Left Nav Example (with submenus built from JavaScript) 1
17.Website Left Nav Example (with submenus built from markup) 2
18.OS-Style Programs Menu Example
19.Website Top Nav (with submenus built from JavaScript) 3
20.Website Top Nav (with submenus built from markup) 4
21.Vertical menu and image menu
22.Emulate XP start menu
23.xmenu-xlayer-3
24.tree-menu
25.menu for applications