pcNimbus Menu Builder

Company

Services

Projects

Resources

1. Menu Specifications

Use the options in the table to tune up the menu. The menu will be updated each time you click one of the Update buttons. For the color options you can select either a basic color name like: black, white, red, purple, etc. or any color represented in 'rgb' format (#rrggbb).

position left
position top
main menu cell height
submenu cell height
font size
font color
font over color
background color
background over color
border color
border width
dividing line color
main menu dividing line width
submenu dividing line width

2. Menu Items

The following text represents the menu items in xml format. Each item tag can have two attributes. Neither of them is mandatory. The text in the name attribute will appear in the menu where the href address is used as a link to other page. The root name should have at least one symbol.
Edit the text then update and test your menu.

<?xml version="1.0" ?> 
<root name="mainMenu">
	<item name="Company">
		<item name="Profile" href="../html/profile.html"/>
		<item name="What we do" href="../html/whatwedo.html"/>
		<item name="Feedback" href="../html/feedback.html"/>
		<item name="Careers" href="../html/careers.html"/>
	</item>
	<item name="Services" href="../html/services.html">
		<item name="Custom Applications" href="../html/customapp.html"/>
		<item name="Web Development" href="../html/webdev.html"/>
	</item>
	<item name="Projects" href="../html/projects.html">
		<item name="RioAlto" href="../html/rioalto.html"/>
		<item name="Suncor" href="../html/suncor.html"/>
		<item name="GoldSeal Mechanicals" href="../html/goldseal.html"/>
		<item name="Cameron Strategy" href="../html/cameron.html"/>
	</item>
	<item name="Resources">
		<item name="Menu Builder" href="../html/menubuilder.html"/>
		<item name="Picture Album" href="../html/webalbum.html"/>
		<item name="3D Flash objects" href="../html/flash.html"/>
	</item>
	<item name="Contact us" href="../html/contact.html"/>
</root>

3. Implementation

There are 3 essential parts of the menu that should take place in your web site. Each of them could be placed in a separate file or inside the html code of your web page. We recommend you to save all 3 pieces in separate files.

- a library with javascript functions called 'menuBasic.js'. You can download it from here.

- a stylesheet. Copy the text from the box called stylesheet and paste it in a new file. Name this file 'menu.css'.

- a javascript with the menu items. Copy the text from the box called javascript and paste it in a new file. Name this file 'menu.js'.

The menu is ready for implementation in your web page. Place all 3 files in the same folder with your html file. Then add the following two line in the head section of your html:

Also place the next line anywhere in the body section:

Finally your web page should look like this:

stylesheet

div.mainmenu{
position:absolute;
visibility:hidden;
left:320px;
top:97px;
}
div.submenu{
position:absolute;
visibility:hidden;
}
table.menu{
background-color:#bbd9e1;
font-size:12px;
font-family:Times New Roman, Times, serif;
color:#006b83;
border-color:#006b83;
border-style:solid;
border-width:2px;
cursor:pointer;
}
td.menu{
height:20px;
padding-left:20px;
padding-right:20px;
border-color:#006b83;
border-style:solid;
border-width:0px;
}
td.main{
height:25px;
border-left-width:1px;
}
td.sub{
border-top-width:1px;
}
td.over{
background-color:#006b83;
color:yellow;
}

javascript

addMenuItem('','mainMenu','');
addMenuItem('mainMenu','Company','');
addMenuItem('Company','Profile','../html/profile.html');
addMenuItem('Company','What we do','../html/whatwedo.html');
addMenuItem('Company','Feedback','../html/feedback.html');
addMenuItem('Company','Careers','../html/careers.html');
addMenuItem('mainMenu','Services','../html/services.html');
addMenuItem('Services','Custom Applications','../html/customapp.html');
addMenuItem('Services','Web Development','../html/webdev.html');
addMenuItem('mainMenu','Projects','../html/projects.html');
addMenuItem('Projects','RioAlto','../html/rioalto.html');
addMenuItem('Projects','Suncor','../html/suncor.html');
addMenuItem('Projects','GoldSeal Mechanicals','../html/goldseal.html');
addMenuItem('Projects','Cameron Strategy','../html/cameron.html');
addMenuItem('mainMenu','Resources','');
addMenuItem('Resources','Menu Builder','../html/menubuilder.html');
addMenuItem('Resources','Picture Album','../html/webalbum.html');
addMenuItem('Resources','3D Flash objects','../html/flash.html');
addMenuItem('mainMenu','Contact us','../html/contact.html');
document.write(buildMenu());
showDiv('mainMenu');