Diva of the Net - Help Pages - Drop Down Menu 1

topper

Diva Help Pages
Drow Down Menu 1

This menu comes from Dynamic Drive - DHTL Resources

What do I need to know about This Drop Down Menu?
What do I need to change on this menu?

What do I need to know about This Drop Down Menu?

This type of Drop Down Menu requires the following:

1) You need to upload all the files that are with the script. All the files are located here
2) You need to put text in your HTML document before the </HEAD> and after the Body Tags
3) You need to edit the menucontext.js and custom.js files and put in your own links and names.

You can use Notepad to edit the menucontext.js and custom.js Files. You can change the colors of the background to match your set, as well as the colors of fonts both when they are normal and when clicked on.

You also need to add some java scripting to your html document so that your html files knows where to go to find the information needed.

The following coding needs to be inserted before the </HEAD> tag.The following coding needs to be inserted before the </HEAD> tag.

<script language="JavaScript">

//Top Nav Bar I v2- By Constantin Kuznetsov Jr. ([email protected])
//Modified by Dynamic Drive for NS6/Opera6 compatibility and code streamlining March 4th, 2002 //Visit http://www.dynamicdrive.com for this script

var keepstatic=0 //specify whether menu should stay static (works only in IE4+)
var menucolor="#575735" //specify menu color
var submenuwidth=150 //specify sub menus' color

</script>

You need to make these changes in your html coding, you need to specify if you want the menu Static or Non Static (Static moves the menu down as you scroll and no Static keeps the menu at the top of the page.

Here is where you need to change the number 0 (In Yellow above) means that the menu will stay at the top and a 1 will have it static. You also need to change the menu color (In Yellow) to match your graphic set.

The other coding you need to insert just after the Body Tags in the HTML document is here

You also need to insert this coding in the html Document as well just below your body tags.

l<script language="JavaScript" src="menu.js"></script> <script language="JavaScript" src="menucontext.js"></script> <script language="JavaScript"> showToolbar(); </script> <script language="JavaScript"> function UpdateIt(){ if (ie&&keepstatic&&!opr6) document.all["MainTable"].style.top = document.body.scrollTop; setTimeout("UpdateIt()", 200); } UpdateIt(); </script>

You may get all the files here. This menu comes from Dynamic Drive - DHTL Resources

Menucontext JS File

//Top Nav bar script v2- http://www.dynamicdrive.com/dynamicindex1/sm/index.htm

function showToolbar() { // AddItem(id, text, hint, location, alternativeLocation); // AddSubItem(idParent, text, hint, location);

menu = new Menu();
menu.addItem("mainid", "Diva Help Main Page", "Diva Help Main Page", null, null);
menu.addItem("htmlid", "HTML Help", "HTML Help", null, null);
menu.addItem("graphicid", "Graphic Help", "Graphic Help", null, null);
menu.addItem("javaid", "Java Help", "Java Help", null, null);
menu.addItem("pspid", "PSP Help", "PSP Help", null, null);
menu.addItem("fontid", "Font Help", "Font Help", null, null);
menu.addItem("webtipsid", "Web Tips", "Web Tips", null, null);
menu.addItem("sitemapid", "Site Map", "Site Map", null, null);

menu.addSubItem("mainid", "Diva Help Main Page", "Diva Help Main Page", "index.html"); menu.addSubItem("htmlid", "HTML Help", "HTML Help", "HTML.html");
menu.addSubItem("graphicid", "Graphic Help", "Graphic Help", "graphics.html"); menu.addSubItem("javaid", "Java Help", "Java Help?", "java.html");
menu.addSubItem("pspid", "PSP Help", "PSP Help", "psp.html");
menu.addSubItem("fontid", "Font Help", "Font Help", "fonts.html");
menu.addSubItem("webtipsid", "Web Tips", "Web Tips", "webtips.html");
menu.addSubItem("sitemapid", "Site Map", "Site Map", "sitemap.html");

menu.showMenu();
}

What do I need to change on this menu?

You need to change the menucontext.js file and the custom.js file

The first part of the coding is to set up the text in the menu (Yellow). The second part of the coding is to set up the links (White).
You need to change the ID name "mainid" and the Page Name "Diva Help Main Page", "Diva Help Main Page"

Whatever you call the ID and the Page name must be the same exactly in the Links menu. I called mine mainid and Diva Help Main Page
menu.addItem("mainid", "Diva Help Main Page", "Diva Help Main Page", null, null);

Whatever you call the ID and the Page name must be the same exactly as in the text menu but now you add the link to the page. I called mine mainid and Diva Help Main Page again and made the link to the index.html page.
menu.addSubItem("mainid", "Diva Help Main Page", "Diva Help Main Page", "index.html");

This menu comes from Dynamic Drive - DHTL Resources

Back To top

Costum JS File

Here is the coding I used to create this drop down menu. This is the Custom JS File.

//UDMv3.4.1 //**DO NOT EDIT THIS ***** if (!exclude) { //******** //************************

///////////////////////////////////////////////////////////////////////////
//
// ULTIMATE DROPDOWN MENU VERSION 3.5 by Brothercake
// http://www.brothercake.com/dropdown/
//
// Link-wrapping routine by Brendan Armstrong
// KDE modifications by David Joham
// Opera reload/resize routine by Michael Wallner
// http://www.wallner-software.com/
//
// This script featured on Dynamic Drive (http://www.dynamicdrive.com) ///////////////////////////////////////////////////////////////////////////

// *** POSITIONING AND STYLES *********************************************
var menuALIGN = "left"; // alignment
var absLEFT = 0; // absolute left or right position (if menu is left or right aligned)
var absTOP = 0; // absolute top position
var staticMENU = false; // static positioning mode (ie5,ie6 and ns4 only)
var stretchMENU = true; // show empty cells
var showBORDERS = true; // show empty cell borders
var baseHREF = ""; // base path to .js files for the script (ie: resources/)
var zORDER = 1000; // base z-order of nav structure (not ns4)
var mCOLOR = "575735"; // main nav cell color
var rCOLOR = "575745"; // main nav cell rollover color
var bSIZE = 1; // main nav border size
var bCOLOR = "black" // main nav border color
var aLINK = "FFFBD2"; // main nav link color
var aHOVER = ""; // main nav link hover-color (dual purpose)
var aDEC = "none"; // main nav link decoration
var fFONT = "arial"; // main nav font face
var fSIZE = 13; // main nav font size (pixels)
var fWEIGHT = "bold" // main nav font weight
var tINDENT = 7; // main nav text indent (if text is left or right aligned)
var vPADDING = 7; // main nav vertical cell padding
var vtOFFSET = 0; // main nav vertical text offset (+/- pixels from middle)
var keepLIT = true; // keep rollover color when browsing menu
var vOFFSET = 5; // shift the submenus vertically
var hOFFSET = 4; // shift the submenus horizontally
var smCOLOR = "lightgreen"; // submenu cell color
var srCOLOR = "lightyellow"; // submenu cell rollover color
var sbSIZE = 1; // submenu border size
var sbCOLOR = "black" // submenu border color
var saLINK = "black"; // submenu link color
var saHOVER = ""; // submenu link hover-color (dual purpose)
var saDEC = "none"; // submenu link decoration
var sfFONT = "arial";// submenu font face
var sfSIZE = 13; // submenu font size (pixels)
var sfWEIGHT = "normal" // submenu font weight
var stINDENT = 5; // submenu text indent (if text is left or right aligned)
var svPADDING = 1; // submenu vertical cell padding
var svtOFFSET = 0; // submenu vertical text offset (+/- pixels from middle)
var shSIZE = 2; // submenu drop shadow size
var shCOLOR = "cccccc"; // submenu drop shadow color
var shOPACITY = 75; // submenu drop shadow opacity (not ie4,ns4 or opera)
var keepSubLIT = true; // keep submenu rollover color when browsing child menu
var chvOFFSET = -12; // shift the child menus vertically
var chhOFFSET = 7; // shift the child menus horizontally
var closeTIMER = 330; // menu closing delay time
var cellCLICK = true; // links activate on TD click
var aCURSOR = "hand"; // cursor for active links (not ns4 or opera)
var altDISPLAY = ""; // where to display alt text
var allowRESIZE = true; // allow resize/reload
var redGRID = false; // show a red grid
var gridWIDTH = 0; // override grid width
var gridHEIGHT = 0; // override grid height
var documentWIDTH = 0; // override document width
var hideSELECT = true; // auto-hide select boxes when menus open (ie only)
var allowForSCALING = false; // allow for text scaling in mozilla 5

//** LINKS ***********************************************************

// add main link item ("url","Link name",width,"text-alignment","_target","alt text",top position,left position,"key trigger")

addMainItem("index.html","Diva Help Page",160,"center","","",0,0,"e");

addMainItem("graphics.html","Graphic Help",100,"center","","",0,0,"w");

addMainItem("HTML.html","HTML Help",85,"center","","",0,0,"s");

addMainItem("psp.html","PSP Help",80,"center","","",0,0,"t");

addMainItem("java.html","Java Help",80,"center","","",0,0,"r"); defineSubmenuProperties(120,"left","center",-4,0,"");

addMainItem("fonts.html","Font Help",80,"center","","",0,0,"t");

addMainItem("webtips.html","Web Tips",80,"center","","",0,0,"r"); defineSubmenuProperties(120,"left","center",-4,0,"");

addMainItem("sitemap.html","Site Map",100,"center","","",0,0,"r"); defineSubmenuProperties(120,"left","center",-4,0,"");

//**DO NOT EDIT THIS *****
}//***********************
//************************

What do I need to change on this menu?

You need to change the custom.js file to your coding and colors of your page and you need to change the links to match the links on your page.

The part of the coding in yellow determines the colors of the menu.

The second part of the coding in white is the links you need to change.

Back To top

Same menu but with Static (the menu moves down as you scrool)

Diva Help Pages

Diva Home Page

Diva Help Site Map

This background set was made and copyrighted by Lady Care.
Please do not take any of the set or the graphics.
Thank you for respecting the Copyright Laws.