Site hosted by Angelfire.com: Build your free website today!
- SmartMenu v2.0 (last updated March 4th, 2002) cross-browser edition
- By Constantin Kuznetsov Jr.
 
** New futures of SmartMenu v2.1**
Now menu works in NS6, Opera6+
Added window/frame trageting in v2.1

To install this script, do the following 3 steps:

1) Add the following code inside the <HEAD> section of your page:

<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: bold 12px Arial; color: white; cursor: hand; z-index:100}
#MainTable A:hover {color: yellow;}
</style>

<script language="JavaScript">

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

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

</script>


2) Copy and paste the below code into your webpage, RIGHT AFTER the <body> tag (proceeding any other tags):

<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>


3) Upload the files "menu.js" and "menucontext.js" into your webpage directory (along with the above webpage, of course), and you're done!

The contents of the menu is stored inside "menucontext.js" To edit them, simply open up "menucontext.js" using any text editor, and change the links/text to your own. Save the modified file, and reupload it.

If you wish the menu to push right up against the edges of your browser screen, add the following code into the <BODY> tag itself, like this:

<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">

| Web Building Sites

| News Sites

| Free Downloads

| Search Engines

| Miscellaneous

Dynamic Drive

JavaScript Kit

Web Review

Freewarejava.com

Web Monkey

CNN

ABC News

MSNBC

CBS news

News.com

Wired News

TechWeb

Dynamic Drive

Download.com

Tucows

Yahoo

Google

Excite

HotBot

Cnet

RealAudio

MP3.com


Top Navigational Bar I (aka Smart menu) v2.1













.

.

.

.

.

.

.

.

. if (document.all)    {n=0;ie=1;ns6=0;fShow="visible";fHide="hidden";}
if (document.getElementById&&!document.all)    {n=0;ie=0;ns6=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;ns6=0;fShow="show";fHide="hide";}

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

opr6=ie&&navigator.userAgent.indexOf("Opera")!=-1

window.onerror=new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu()                                                        //
////////////////////////////////////////////////////////////////////////////
rightX = 0;
function Menu()
{
	this.bgColor     = menucolor;
	if (ie) this.menuFont = "bold 12px Arial";
	if (n)  this.menuFont = "bold 12px Verdana";
	this.fontColor   = "black";

	this.addItem    = addItem;
	this.addSubItem = addSubItem;
	this.showMenu   = showMenu;
	this.mainPaneBorder = 0;
	this.subMenuPaneBorder = 0;

	this.subMenuPaneWidth = submenuwidth;

	lastMenu = null;
	
	rightY = 0;
	leftY = 0;
	leftX = 0;

	HTMLstr = "";
	HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
	HTMLstr += "\n";
	if (ie||ns6) HTMLstr += "<div id='MainTable' style='position:relative;top:0'>\n";
//	if (n)  HTMLstr += "<layer name='MainTable'>\n";
	HTMLstr += "<table width='100%' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
	HTMLstr += "<tr>";
	if (n) HTMLstr += "<td>&nbsp;";
	HTMLstr += "<!-- MAIN MENU STARTS -->\n";
	HTMLstr += "<!-- MAIN_MENU -->\n";
	HTMLstr += "<!-- MAIN MENU ENDS -->\n";
	if (n) HTMLstr += "</td>";
	HTMLstr += "</tr>\n";
	HTMLstr += "</table>\n";
	HTMLstr += "\n";
	HTMLstr += "<!-- SUB MENU STARTS -->\n";
	HTMLstr += "<!-- SUB_MENU -->\n";
	HTMLstr += "<!-- SUB MENU ENDS -->\n";
	HTMLstr += "\n";
	if (ie||ns6) HTMLstr+= "</div>\n";
//	if (n)  HTMLstr+= "</layer>\n";
	HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}

function addItem(idItem, text, hint, location, altLocation)
{
	var Lookup = "<!-- ITEM "+idItem+" -->";
	if (HTMLstr.indexOf(Lookup) != -1)
	{
		alert(idParent + " already exist");
		return;
	}
	var MENUitem = "";
	MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
	if (n)
	{
		MENUitem += "<ilayer name="+idItem+">";
		MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
		MENUitem += "|&nbsp;";
		MENUitem += text;
		MENUitem += "</a>";
		MENUitem += "</ilayer>";
	}
	if (ie||ns6)
	{
		MENUitem += "<td>\n";
		MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
		MENUitem += "<a ";
		MENUitem += "class=clsMenuItemIE ";
//		MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
		if (hint != null)
			MENUitem += "title='"+hint+"' ";
		if (location != null)
		{
			MENUitem += "href='"+location+"' ";
			MENUitem += "onmouseover=\"hideAll()\" ";
		}
		else
		{
			if (altLocation != null)
				MENUitem += "href='"+altLocation+"' ";
			else
				MENUitem += "href='.' ";
			MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
			MENUitem += "onclick=\"return false;\" "
		}
		MENUitem += ">";
		MENUitem += "|&nbsp;\n";
		MENUitem += text;
		MENUitem += "</a>\n";
		MENUitem += "</div>\n";
		MENUitem += "</td>\n";
	}
	MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
	MENUitem += "<!-- MAIN_MENU -->\n";

	HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}

function addSubItem(idParent, text, hint, location, linktarget)
{
	var MENUitem = "";
	Lookup = "<!-- ITEM "+idParent+" -->";
	if (HTMLstr.indexOf(Lookup) == -1)
	{
		alert(idParent + " not found");
		return;
	}
	Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
	if (HTMLstr.indexOf(Lookup) == -1)
	{
		if (n)
		{
			MENUitem += "\n";
			MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
			MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
			MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
			MENUitem += "</table>\n";
			MENUitem += "</layer>\n";
			MENUitem += "\n";
		}
		if (ie||ns6)
		{
			MENUitem += "\n";
			MENUitem += "<div id='"+idParent+"submenu' onmouseout=operahide() style='position:absolute; visibility: hidden; z-index:100; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
			MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
			MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
			MENUitem += "</table>\n";
			MENUitem += "</div>\n";
			MENUitem += "\n";
		}
		MENUitem += "<!-- SUB_MENU -->\n";
		HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
	}

	Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
	if (n)  MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
	if (ie||ns6) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"' target='"+linktarget+"'>"+text+"</a><br></td></tr>\n";
	MENUitem += Lookup;
	HTMLstr = HTMLstr.replace(Lookup, MENUitem);

}

function showMenu()
{
	document.writeln(HTMLstr);
}

////////////////////////////////////////////////////////////////////////////
// Private declaration
function displaySubMenu(idMainMenu)
{
	var menu;
	var submenu;
	if (n)
	{
		submenu = document.layers[idMainMenu+"submenu"];
		if (lastMenu != null && lastMenu != submenu) hideAll();
		submenu.left = document.layers[idMainMenu].pageX;
		submenu.top  = document.layers[idMainMenu].pageY + 25;
		submenu.visibility = fShow;

		leftX  = document.layers[idMainMenu+"submenu"].left;
		rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
		leftY  = document.layers[idMainMenu+"submenu"].top+
			document.layers[idMainMenu+"submenu"].clip.height;
		rightY = leftY;
	} else if (ie||ns6) {
//alert(document.getElementById(idMainMenu+"submenu").id)
		menu = ie? eval(idMainMenu) : document.getElementById(idMainMenu);
		submenu = ie? eval(idMainMenu+"submenu.style") : document.getElementById(idMainMenu+"submenu").style;
		submenu.left = calculateSumOffset(menu, 'offsetLeft');
//		submenu.top  = calculateSumOffset(menu, 'offsetTop') + 30;
		submenu.top  = menu.style.top+23;
		submenu.visibility = fShow;
		if (lastMenu != null && lastMenu != submenu) hideAll();

		leftX  = ie? document.all[idMainMenu+"submenu"].style.posLeft : parseInt(document.getElementById(idMainMenu+"submenu").style.left);
		rightX = ie? leftX + document.all[idMainMenu+"submenu"].offsetWidth : leftX+parseInt(document.getElementById(idMainMenu+"submenu").offsetWidth);

		leftY  = ie? document.all[idMainMenu+"submenu"].style.posTop+
			document.all[idMainMenu+"submenu"].offsetHeight : parseInt(document.getElementById(idMainMenu+"submenu").style.top)+parseInt(document.getElementById(idMainMenu+"submenu").offsetHeight);
		rightY = leftY;
	}
	lastMenu = submenu;
}

function hideAll()
{
	if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}

function calculateSumOffset(idItem, offsetName)
{
	var totalOffset = 0;
	var item = eval('idItem');
	do
	{
		totalOffset += eval('item.'+offsetName);
		item = eval('item.offsetParent');
	} while (item != null);
	return totalOffset;
}

function updateIt(e)
{
	if (ie&&!opr6)
	{
		var x = window.event.clientX;
		var y = window.event.clientY;

		if (x > rightX || x < leftX) hideAll();
		else if (y > rightY) hideAll();
	}
	if (n||ns6)
	{
		var x = e.pageX;
		var y = e.pageY;

		if (x > rightX || x < leftX) hideAll();
		else if (y > rightY) hideAll();
	}
}

function operahide(){
        if (opr6){
        if (!MainTable.contains(event.toElement))
        hideAll()
}
}

if (ie||ns6)
{
	document.body.onclick=hideAll;
	document.body.onscroll=hideAll;
	document.body.onmousemove=updateIt;
}
if (document.layers)
{
	window.captureEvents(Event.MOUSEMOVE);
	window.captureEvents(Event.CLICK);
	window.onmousemove=updateIt;
	window.onclick=hideAll;
}

.

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

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

	menu = new Menu();
	menu.addItem("webmasterid", "Web Building Sites", "Web Building Sites",  null, null);
	menu.addItem("newsid", "News Sites", "News Sites",  null, null);
	menu.addItem("freedownloadid", "Free Downloads", "Free Downloads",  null, null);
	menu.addItem("searchengineid", "Search Engines", "Search Engines",  null, null);
	menu.addItem("miscid", "Miscellaneous", "Miscellaneous",  null, null);

	menu.addSubItem("webmasterid", "Dynamic Drive", "Dynamic Drive",  "http://www.dynamicdrive.com/", "");
	menu.addSubItem("webmasterid", "JavaScript Kit", "JavaScript Kit",  "http://www.javascriptkit.com/", "");
	menu.addSubItem("webmasterid", "Web Review", "Web Review",  "http://www.webreview.com/", "");
	menu.addSubItem("webmasterid", "Freewarejava.com", "Freewarejava.com",  "http://www.freewarejava.com/", "_blank");
	menu.addSubItem("webmasterid", "Web Monkey", "Web Monkey",  "http://www.webmonkey.com/", "_blank");

	menu.addSubItem("newsid", "CNN", "CNN",  "http://www.cnn.com", "");
	menu.addSubItem("newsid", "ABC News", "ABC News",  "http://www.abcnews.com", "");
	menu.addSubItem("newsid", "MSNBC", "MSNBC",  "http://www.msnbc.com", "");
	menu.addSubItem("newsid", "CBS news", "CBS News",  "http://www.cbsnews.com", "");
	menu.addSubItem("newsid", "News.com", "News.com",  "http://news.com", "");
	menu.addSubItem("newsid", "Wired News", "Wired News",  "http://www.wired.com", "");
	menu.addSubItem("newsid", "TechWeb", "TechWeb",  "http://www.techweb.com", "");

	menu.addSubItem("freedownloadid", "Dynamic Drive", "Dynamic Drive",  "http://www.dynamicdrive.com/", "");
	menu.addSubItem("freedownloadid", "Download.com", "Download.com",  "http://download.com/", "");
	menu.addSubItem("freedownloadid", "Tucows", "Tucows",  "http://tucows.com/", "");

	menu.addSubItem("searchengineid", "Yahoo", "Yahoo",  "http://www.yahoo.com/", "");
	menu.addSubItem("searchengineid", "Google", "Google",  "http://www.google.com/", "");
	menu.addSubItem("searchengineid", "Excite", "Excite", "http://www.excite.com", "");
	menu.addSubItem("searchengineid", "HotBot", "HotBot",  "http://www.hotbot.com", "");

	menu.addSubItem("miscid", "Cnet", "Cnet",  "http://www.cnet.com/", "");
	menu.addSubItem("miscid", "RealAudio", "RealAudio",  "http://www.realaudio.com/", "");
	menu.addSubItem("miscid", "MP3.com", "MP3.com",  "http://www.mp3.com/", "");

	menu.showMenu();
}