Emulate XP start menu
<html>
<head>
<title>DynAPI Examples - HTML Menu - (Start 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('HTMLMenu');
dynapi.library.include('Image');
</script>
<script language="Javascript">
var lyr = new DynLayer(null,0,0,65,25)
lyr.setAnchor({left:10,bottom:5})
var mnu = lyr.addChild(new HTMLMenu(),'mnu');
mnu.backCol = "#FFFFFF";
mnu.selBgCol="#C1D2EE";
mnu.foreCol = "#000000";
mnu.cssMenuItem="";
mnu.cssMenuText = "MNUItmText";
dynapi.document.addChild(lyr)
if(dynapi.ua.ns4){
// NS4 style
HTMLComponent.writeStyle({
MNUItm: 'border: 1px solid #C0C0C0',
MNUItmTop: 'border: 1px solid #C0C0C0',
MNUItmBottom: 'border: 1px solid #C0C0C0',
MNUItmText: 'text-decoration: none; color: #000000; font: 12px Arial, Helvetica '
})
}
else{
// IE & DOM Style
HTMLComponent.writeStyle({
MNUItm: '{border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0;}',
MNUItmTop: '{border-top: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0}',
MNUItmBottom: '{border-bottom: 1px solid #C0C0C0; border-left: 1px solid #C0C0C0; border-right: 1px solid #C0C0C0}',
MNUItmText: '{cursor: default; text-decoration: none; color: #000000; font: 12px Arial, Helvetica }'
})
}
var p ={align:"absmiddle"}
var ipx = dynapi.functions.getImage('./dynapiexamples/images/menu_side.gif',16,22,p);
var iprog = dynapi.functions.getImage('./dynapiexamples/images/menu_programs.gif',16,22,p);
var istart = dynapi.functions.getImage('./dynapiexamples/images/menu_start.gif',16,22,{
align:"absmiddle",
oversrc:'images/menu_start_on.gif'
});
var iset = dynapi.functions.getImage('./dynapiexamples/images/menu_settings.gif',16,22,{
align:"absmiddle",
oversrc:'images/menu_settings_on.gif'
});
var mbar;
// Main Menu
mbar= mnu.createMenuBar('main',60,20,1,0);
mbar.addItem(null,{image:istart,text:' Start'},'start');
//File menu
mbar = mnu.createMenuBar('start',150,22,-3,0);
mbar.addItem('MNUItmTop',iprog.getHTML()+' Programs','progs');
mbar.addItem('MNUItm',ipx.getHTML()+' Documents',null,'nav()');
mbar.addItem('MNUItm',{image:iset,text:' Settings'},'settings');
mbar.addItem('MNUItm',ipx.getHTML()+' Search...',null,'nav()');
mbar.addItem('MNUItmTop',ipx.getHTML()+' Logoff',null,'nav()');
mbar.addItem('MNUItmBottom',ipx.getHTML()+' Shutdown ...',null,'nav()');
// Programs
mbar = mnu.createMenuBar('progs',130,22,-2,0);
mbar.addItem('MNUItmTop',ipx.getHTML()+' Accessories',null,'nav()');
mbar.addItem('MNUItm',ipx.getHTML()+' Startup',null,'nav()');
mbar.addItem('MNUItmTop',ipx.getHTML()+' Games',null,'nav()');
mbar.addItem('MNUItm',ipx.getHTML()+' DynAPI IDE',null,'nav()');
mbar.addItem('MNUItmBottom',ipx.getHTML()+' The Compressor',null,'nav()');
// Settings
mbar = mnu.createMenuBar('settings',130,22,-2,0);
mbar.addItem('MNUItmTop',ipx.getHTML()+' Control Panel',null,'nav()');
mbar.addItem('MNUItmTop',ipx.getHTML()+' Printers & Fax',null,'nav()');
mbar.addItem('MNUItm',{image:iset,text:' Networks'},null,'nav()');
mbar.addItem('MNUItmBottom',ipx.getHTML()+' DynAPI Debugger',null,'nav()');
function nav(){
alert ('Do amazing things with the new HTMLMenu')
}
</script>
</head>
<body>
<font face="arial">
<center><h1>The Start Menu</h1>
Just <font color="green"><b>Imagine</b></font> what you can do with HTMLMenu.
</center>
</font>
<script> dynapi.document.insertChild(mnu);</script>
</body>
</html>
dynapi.zip( 791 k)Related examples in the same category