Problema su menu orizzontale

**belize** · 15-11-2004, 11:47

Ho un menù orizzontale a tendina scaricato da un sito. E' bellissimo e funziona perfettamente, solo che è posizionato in modo assoluto e io invece lo vorrei posizionare in modo relativo.
Guardate il codice che vi allego e capirete tutto.
Sono 3 file: sample.htm - menu.js - menucontext.js
Vi sono molto grato
ciao!

>>>>>>>>>>>>>>>>> file sample.htm <<<<<<<<<<<<<<<<<<<<<<<<<<

codice:

<html>
<head>
<style>
all.clsMenuItemNS, .clsMenuItemIE{text-decoration: none; font: normal 11px Georgia; color: #1E1408; cursor: hand; z-index:100;}
#MainTable A:hover {color: red;}
body {
	background-color: #816E49;
}
</style>
<script language="JavaScript">
var keepstatic=0 //specify whether menu should stay static 0=non static (works only in IE4+)
var menucolor="#ffffff" //specify menu color
var submenuwidth=170 //specify sub menus' color
</script>
<title>Welcome to Homepage</title>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="600px" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td>
	<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>
	
	</td>
  </tr>
</table>
</body>
</html>

>>>>>>>>>>>>>>>>>>>>>>>>>> file menu.js <<<<<<<<<<<<<<<<<<<<<<<<<<

codice:

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 Georgia"; //default font settings. Don't change. Instead, modify stylesheet in sample.htm
	if (n)  this.menuFont = "bold 12px Georgia";
	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 += "\n";*/
	HTMLstr += "\n";
	if (ie||ns6) HTMLstr += "<div id='MainTable' style='margin-top:0px;margin-bottom:0px;'>\n";
//	if (n)  HTMLstr += "<layer name='MainTable'>\n";
	HTMLstr += "<table cellspacing=0 cellpadding=0 style='background-image:url(bg_menu.gif); background-repeat:repeat-x; height:0px' width='100px' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
	HTMLstr += "<tr style='height:0px;padding-bottom:0px;'>";
	if (n) HTMLstr += "<td style='height:0px;padding-bottom:0px;'>";
	HTMLstr += "\n";
	HTMLstr += "\n";
	HTMLstr += "\n";
	if (n) HTMLstr += "</td>";
	HTMLstr += "</tr>\n";
	HTMLstr += "</table>\n";
	HTMLstr += "\n";
	HTMLstr += "\n";
	HTMLstr += "\n";
	HTMLstr += "\n";
	HTMLstr += "\n";
	if (ie||ns6) HTMLstr+= "</div>\n";
//	if (n)  HTMLstr+= "</layer>\n";
	/*HTMLstr += "\n";*/
}

function addItem(idItem, text, hint, location, altLocation)
{
	var Lookup = "";
	if (HTMLstr.indexOf(Lookup) != -1)
	{
		alert(idParent + " already exist");
		return;
	}
	var MENUitem = "";
	MENUitem += "\n\n";
	if (n)
	{
		MENUitem += "<ilayer name="+idItem+">";
		MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
		MENUitem += text;
		MENUitem += "</a></ilayer>";
	}
	if (ie||ns6)
	{
		MENUitem += "<td>\n";
		MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
		MENUitem += "<a style='margin-bottom:0px; padding-bottom:0px' ";
		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 += text;
		MENUitem += "</a></div></td>";
	}
	MENUitem += "\n\n";
	MENUitem += "\n";

	HTMLstr = HTMLstr.replace("\n", MENUitem);
}

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

	Lookup = "\n";
	if (n)  MENUitem = "<tr><td>"+text+"
</td></tr>\n";
	if (ie||ns6) MENUitem = "<tr><td>"+text+"
</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+22;
		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;
}

L'ulimo file nel prossimo post

**belize** · 15-11-2004, 11:48

>>>>>>>>>>>>>>>>>>>>>>>>> file menucontext.js <<<<<<<<<<<<<<<<<

codice:

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

	menu = new Menu();
	menu.addItem("webmasterid", "<img style=margin-bottom:0px; border=0 src=bot_menu.gif id=Image1 onMouseOver=MM_swapImage('Image1','','bot_menu_2.gif',1) onMouseOut=MM_swapImgRestore()>", "Web Building Sites",  null, null);
	menu.addItem("newsid", "<img style=margin-bottom:0px; border=0 src=bot_menu.gif id=Image1 onMouseOver=MM_swapImage('Image1','','bot_menu_2.gif',1) onMouseOut=MM_swapImgRestore()>", "News Sites",  null, null);
	menu.addItem("freedownloadid", "<img style=margin-bottom:0px; border=0 src=bot_menu.gif id=Image1 onMouseOver=MM_swapImage('Image1','','bot_menu_2.gif',1) onMouseOut=MM_swapImgRestore()>", "Free Downloads",  null, null);
	menu.addItem("searchengineid", "<img style=margin-bottom:0px; border=0 src=bot_menu.gif id=Image1 onMouseOver=MM_swapImage('Image1','','bot_menu_2.gif',1) onMouseOut=MM_swapImgRestore()>", "Search Engines",  null, null);
	menu.addItem("miscid", "<img style=margin-bottom:0px; border=0 src=bot_menu.gif id=Image1 onMouseOver=MM_swapImage('Image1','','bot_menu_2.gif',1) onMouseOut=MM_swapImgRestore()>", "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();
}

Discussione: Problema su menu orizzontale

Strumenti discussione

Ricerca discussione

Visualizza

Problema su menu orizzontale

Permessi di invio