|
EXAMPLE
See it at work at the top of this page.
1) Insert the !DOCTYPE declaration at the top of your document before the <HTML>
tag.
2) Insert this code in the <HEAD> section of the page.
3) Download
this ZIP file with the menubarAPI4.js, the init.js and
the menu.css
files and unzip.
4) Insert the onLoad tag inside the <BODY> tag as
follows:
<body onload="init();monitor=document.getElementById('mon')",
followed by other tags such as bgcolor, etc..
5) Define the positioning and the style of the menu in the menu.css file:
body{margin:0}
#menubar{
position: absolute;
left: 140px;
// left position of the menu
top: 4px;
// top position of the menu
background-color: #222299;
padding: 0;
border-width: 1px;
border-style: solid;
border-color: #3344ee #000033 #000033 #3344ee ;
clear: both;
z-index: 200;
white-space: nowrap;
}
.buttons{
font-size: 12px;
font-family: verdana, arial, helvetica;
color: #ddeeff;
// font color
cursor: default;
border-width: 1px;
border-style: solid;
background-color: #222299;
border-color: #222299;
float: left;
and so forth.
6) Define the headers, the menus and the content in
this section of the init.js file:
// the first header menu
var stbMenu = new Menu('SimplytheBest');
uiMenubar.add(stbMenu);
stbMenu.add(new MenuItem('Main index','http://simplythebest.net'));
stbMenu.add(new MenuItem('Blogs','http://blogs.simplythebest.net/'));
stbMenu.add(new MenuItem('CGI scripts','http://simplythebest.net/scripts/'));
stbMenu.addSeparator("#000388");
// the sub menu
stbDHTMLMenu = new Menu('DHTML scripts');
stbDHTMLMenu.add(new MenuItem('Main DHTML page','scripts/DHTML_scripts/index.html'));
stbDHTMLMenu.add(new MenuItem('Animation','scripts/DHTML_scripts/dhtml_animation.html'));
stbDHTMLMenu.add(new MenuItem('Buttons','scripts/DHTML_scripts/dhtml_buttons.html'));
stbDHTMLMenu.add(new MenuItem('Menus','scripts/DHTML_scripts/dhtml_menu_scripts.html'));
stbDHTMLMenu.add(new MenuItem('Scrollers','scripts/DHTML_scripts/dhtml_scrollers.html'));
stbMenu.add(stbDHTMLMenu);
and so forth.
7) Define where the script files are stored in the code you've
inserted in the <HEAD>
section:
<style type="text/css" title="stylesheet.css">
@import "menu_script/menu.css";
</style>
<script src="menu_script/menubarAPI4.js" type="text/javascript"></script>
<script src="menu_script/init.js" type="text/javascript"></script>
|
