Emulate XP start menu : Menu 2 : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Menu 2 »

 

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>

           
       

Download : Download nav_dynapi.zip nav_dynapi.zip


-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Menu 2