Библиотека Javascript. SE@RCHER

смотреть оглавление

примерразмер кода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Слой виден через линк Меню из горизонтальных линков для показа слоев</TITLE><META http-equiv=Content-Type content="text/html; charset=windows-1251"><style>HTML {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; BACKGROUND-COLOR: #fff}BODY {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #000; PADDING-TOP: 0px; BACKGROUND-COLOR: #fff}BODY {	WIDTH: 97%}#header {	PADDING-BOTTOM: 20px; COLOR: #000; BACKGROUND-COLOR: #fff}#leftcol {	PADDING-RIGHT: 3px; MARGIN-TOP: 0px; PADDING-LEFT: 3px; FLOAT: left; PADDING-BOTTOM: 3px; MARGIN-LEFT: 10px; WIDTH: 160px; COLOR: #000; PADDING-TOP: 3px; BACKGROUND-COLOR: #dedfde}#rightcol {	PADDING-RIGHT: 3px; MARGIN-TOP: 0px; PADDING-LEFT: 3px; FLOAT: right; PADDING-BOTTOM: 3px; WIDTH: 150px; COLOR: #000; MARGIN-RIGHT: 0px; PADDING-TOP: 3px; BACKGROUND-COLOR: #fff; TEXT-ALIGN: right}#content {	MARGIN-LEFT: 210px; WIDTH: 600px; COLOR: #000; BACKGROUND-COLOR: #fff}#footer {	CLEAR: both; MARGIN: 10px; WIDTH: 95%; TEXT-ALIGN: center}P {	FONT: 0.9em arial, sans-serif}.comments {	BORDER-RIGHT: #bdbf00 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #bdbf00 1px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; FONT: bold 0.8em arial, sans-serif; BORDER-LEFT: #bdbf00 1px solid; WIDTH: 400px; PADDING-TOP: 0px; BORDER-BOTTOM: #bdbf00 1px solid; BACKGROUND-COLOR: #ffffcc}LEGEND.main {	MARGIN-TOP: 1.5em; MARGIN-BOTTOM: 1.5em; FONT: bold 1em arial, sans-serif}LEGEND {	FONT-WEIGHT: bold}TEXTAREA {	BORDER-RIGHT: #bdbf00 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #bdbf00 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 0.9em arial, sans-serif; BORDER-LEFT: #bdbf00 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #bdbf00 1px solid}TEXTAREA.tabber {	BORDER-RIGHT: #bdbf00 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #bdbf00 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 0.9em arial, sans-serif; BORDER-LEFT: #bdbf00 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #bdbf00 1px solid}INPUT {	BORDER-RIGHT: #bdbf00 1px solid; BORDER-TOP: #bdbf00 1px solid; BORDER-LEFT: #bdbf00 1px solid; BORDER-BOTTOM: #bdbf00 1px solid}INPUT.not {	DISPLAY: none}FIELDSET.signUp {	BORDER-RIGHT: #bdbf00 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #bdbf00 1px solid; PADDING-LEFT: 1em; PADDING-BOTTOM: 1em; MARGIN: 1em 0px; BORDER-LEFT: #bdbf00 1px solid; COLOR: #000; PADDING-TOP: 0px; BORDER-BOTTOM: #bdbf00 1px solid; BACKGROUND-COLOR: #ffffcc}#subscribe {	FONT: bold 0.9em arial, sans-serif; MARGIN-LEFT: auto; WIDTH: 288px; MARGIN-RIGHT: auto; TEXT-ALIGN: center}#getScript {	FONT: bold 0.9em arial, sans-serif; MARGIN-LEFT: auto; WIDTH: 288px; MARGIN-RIGHT: auto; TEXT-ALIGN: center}SMALL {	FONT-SIZE: 0.9em; FONT-FAMILY: arial, sans-serif}.popUp {	MARGIN: 10px 25px 0px; FONT: 0.8em arial, sans-serif}.mp_backlinks {	FONT: bold 1.4em "Georgia", "Times New Roman", Times, serif; PADDING-TOP: 20px}.demo {	FONT: 1em/1.2em arial, sans-serif}.footer {	FONT-SIZE: 0.8em}.footer2 {	FONT: 0.9em arial, sans-serif; PADDING-TOP: 20px; TEXT-ALIGN: center}H4 {	FONT: bold 0.8em arial, sans-serif}EM.date {	FONT-WEIGHT: normal; FONT-SIZE: 0.9em}H6 {	MARGIN: 0px; FONT: bold 0.9em/12px arial, sans-serif; COLOR: #fff; BACKGROUND-COLOR: #000099; TEXT-ALIGN: center}.linkitem {	FONT-SIZE: 12px; COLOR: #000; FONT-FAMILY: verdana, arial, helvetica, sans-serif}.catitem {	FONT-SIZE: 12px; COLOR: #000; FONT-FAMILY: verdana, arial, helvetica, sans-serif}A:link {	COLOR: #0000ff; TEXT-DECORATION: underline}A:visited {	COLOR: #000099; TEXT-DECORATION: underline}A:hover {	COLOR: #ff0000; TEXT-DECORATION: underline}EM.comm {	FONT-SIZE: 0.8em; FONT-STYLE: normal; FONT-FAMILY: arial, sans-serif}.tabberlive .tabbertabhide {	DISPLAY: none}.tabber {	}.tabberlive {	MARGIN-TOP: 1em; WIDTH: 98%}UL.tabbernav {	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 3px; MARGIN: 0px; FONT: bold 12px arial, sans-serif; PADDING-TOP: 3px; BORDER-BOTTOM: #778 1px solid}UL.tabbernav LI {	DISPLAY: inline; MARGIN: 0px; FONT-FAMILY: arial, sans-serif; LIST-STYLE-TYPE: none}UL.tabbernav LI A {	BORDER-RIGHT: #778 1px solid; PADDING-RIGHT: 0.5em; BORDER-TOP: #778 1px solid; PADDING-LEFT: 0.5em; BACKGROUND: #dde; PADDING-BOTTOM: 3px; MARGIN-LEFT: 3px; BORDER-LEFT: #778 1px solid; PADDING-TOP: 0.2em; BORDER-BOTTOM: medium none; TEXT-DECORATION: none}UL.tabbernav LI A:link {	COLOR: #448}UL.tabbernav LI A:hover {	BORDER-LEFT-COLOR: #00009c; BACKGROUND: #00009c; BORDER-BOTTOM-COLOR: #00009c; COLOR: #fff; BORDER-TOP-COLOR: #00009c; BORDER-RIGHT-COLOR: #00009c}UL.tabbernav LI.tabberactive A {	BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #fff}UL.tabbernav LI.tabberactive A:hover {	BACKGROUND: white; COLOR: #000; BORDER-BOTTOM: white 1px solid}.tabberlive .tabbertab {	BORDER-RIGHT: #aaa 1px solid; PADDING-RIGHT: 2em; BORDER-TOP: 0px; PADDING-LEFT: 2em; PADDING-BOTTOM: 2em; BORDER-LEFT: #aaa 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #aaa 1px solid}.tabberlive .tabbertab H2 {	DISPLAY: none}.tabberlive .tabbertab H3 {	DISPLAY: none}.tabberlive#tab2 .tabbertab {	OVERFLOW: auto; HEIGHT: 200px}</style><SCRIPT type=text/javascript>function tabberObj(argsObj) {  var arg;  this.div = null;  this.classMain = "tabber";  this.classMainLive = "tabberlive";  this.classTab = "tabbertab";  this.classTabDefault = "tabbertabdefault";  this.classNav = "tabbernav";  this.classTabHide = "tabbertabhide";  this.classNavActive = "tabberactive";  this.titleElements = ['h2','h3','h4','h5','h6'];  this.titleElementsStripHTML = true;  this.removeTitle = true;  this.addLinkId = false;  this.linkIdFormat = '<tabberid>nav<tabnumberone>';  for (arg in argsObj) { this[arg] = argsObj[arg]; }  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');  this.tabs = new Array();  if (this.div) {    this.init(this.div);    this.div = null;  }}tabberObj.prototype.init = function(e) {  var  childNodes,  i, i2,  t,  defaultTab=0,  DOM_ul,  DOM_li,  DOM_a,  aId,  headingElement;  if (!document.getElementsByTagName) { return false; }  if (e.id) {    this.id = e.id;  }  this.tabs.length = 0;  childNodes = e.childNodes;  for(i=0; i < childNodes.length; i++) {    if(childNodes[i].className &&       childNodes[i].className.match(this.REclassTab)) {      t = new Object();      t.div = childNodes[i];      this.tabs[this.tabs.length] = t;      if (childNodes[i].className.match(this.REclassTabDefault)) {	defaultTab = this.tabs.length-1;      }    }  }  DOM_ul = document.createElement("ul");  DOM_ul.className = this.classNav;  for (i=0; i < this.tabs.length; i++) {    t = this.tabs[i];    t.headingText = t.div.title;    if (this.removeTitle) { t.div.title = ''; }    if (!t.headingText) {      for (i2=0; i2<this.titleElements.length; i2++) {	headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];	if (headingElement) {	  t.headingText = headingElement.innerHTML;	  if (this.titleElementsStripHTML) {	    t.headingText.replace(/<br>/gi," ");	    t.headingText = t.headingText.replace(/<[^>]+>/g,"");	  }	  break;	}      }    }    if (!t.headingText) {      t.headingText = i + 1;    }    DOM_li = document.createElement("li");    t.li = DOM_li;    DOM_a = document.createElement("a");    DOM_a.appendChild(document.createTextNode(t.headingText));    DOM_a.href = "javascript:void(null);";    DOM_a.title = t.headingText;    DOM_a.onclick = this.navClick;    DOM_a.tabber = this;    DOM_a.tabberIndex = i;    if (this.addLinkId && this.linkIdFormat) {      aId = this.linkIdFormat;      aId = aId.replace(/<tabberid>/gi, this.id);      aId = aId.replace(/<tabnumberzero>/gi, i);      aId = aId.replace(/<tabnumberone>/gi, i+1);      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));      DOM_a.id = aId;    }    DOM_li.appendChild(DOM_a);    DOM_ul.appendChild(DOM_li);  }  e.insertBefore(DOM_ul, e.firstChild);  e.className = e.className.replace(this.REclassMain, this.classMainLive);  this.tabShow(defaultTab);  if (typeof this.onLoad == 'function') {    this.onLoad({tabber:this});  }  return this;};tabberObj.prototype.navClick = function(event) {  var  rVal,  a,  self,  tabberIndex,  onClickArgs;  a = this;  if (!a.tabber) { return false; }  self = a.tabber;  tabberIndex = a.tabberIndex;  a.blur();  if (typeof self.onClick == 'function') {    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};    if (!event) { onClickArgs.event = window.event; }    rVal = self.onClick(onClickArgs);    if (rVal === false) { return false; }  }  self.tabShow(tabberIndex);  return false;};tabberObj.prototype.tabHideAll = function() {  var i; /* counter */  for (i = 0; i < this.tabs.length; i++) {    this.tabHide(i);  }};tabberObj.prototype.tabHide = function(tabberIndex) {  var div;  if (!this.tabs[tabberIndex]) { return false; }  div = this.tabs[tabberIndex].div;  if (!div.className.match(this.REclassTabHide)) {    div.className += ' ' + this.classTabHide;  }  this.navClearActive(tabberIndex);  return this;};tabberObj.prototype.tabShow = function(tabberIndex) {  var div;  if (!this.tabs[tabberIndex]) { return false; }  this.tabHideAll();  div = this.tabs[tabberIndex].div;  div.className = div.className.replace(this.REclassTabHide, '');  this.navSetActive(tabberIndex);  if (typeof this.onTabDisplay == 'function') {    this.onTabDisplay({'tabber':this, 'index':tabberIndex});  }  return this;};tabberObj.prototype.navSetActive = function(tabberIndex) {  this.tabs[tabberIndex].li.className = this.classNavActive;  return this;};tabberObj.prototype.navClearActive = function(tabberIndex) {  this.tabs[tabberIndex].li.className = '';  return this;};function tabberAutomatic(tabberArgs) {  var    tempObj,    divs,    i;  if (!tabberArgs) { tabberArgs = {}; }  tempObj = new tabberObj(tabberArgs);  divs = document.getElementsByTagName("div");  for (i=0; i < divs.length; i++) {    if (divs[i].className &&	divs[i].className.match(tempObj.REclassMain)) {      tabberArgs.div = divs[i];      divs[i].tabber = new tabberObj(tabberArgs);    }  }  return this;}function tabberAutomaticOnLoad(tabberArgs) {  var oldOnLoad;  if (!tabberArgs) { tabberArgs = {}; }  oldOnLoad = window.onload;  if (typeof window.onload != 'function') {    window.onload = function() {      tabberAutomatic(tabberArgs);    };  } else {    window.onload = function() {      oldOnLoad();      tabberAutomatic(tabberArgs);    };  }}if (typeof tabberOptions == 'undefined') {    tabberAutomaticOnLoad();} else {  if (!tabberOptions['manualStartup']) {    tabberAutomaticOnLoad(tabberOptions);  }}</SCRIPT><STYLE type=text/css>A.MenuLink {	WIDTH: 100%; COLOR: #1d2123; TEXT-DECORATION: none}A.MenuLink:hover {	COLOR: #aa0000; BACKGROUND-COLOR: #ffff99; TEXT-DECORATION: underline}DIV.FirstMenuElement {	BORDER-RIGHT: #475156 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #475156 1px solid; DISPLAY: none; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; FONT: 12px Geneva, Arial, Helvetica, sans-serif; BORDER-LEFT: #475156 1px solid; WIDTH: 130px; PADDING-TOP: 3px; BORDER-BOTTOM: #475156 1px solid; POSITION: absolute; BACKGROUND-COLOR: #82a6c4; TEXT-ALIGN: center}DIV.FirstMenuElementOver {	BORDER-RIGHT: #475156 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #475156 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; FONT: 12px Geneva, Arial, Helvetica, sans-serif; BORDER-LEFT: #475156 1px solid; WIDTH: 130px; PADDING-TOP: 3px; BORDER-BOTTOM: #475156 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffff99; TEXT-ALIGN: center}DIV.MenuElement {	BORDER-RIGHT: #475156 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #475156 1px solid; DISPLAY: none; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; FONT: 12px Geneva, Arial, Helvetica, sans-serif; BORDER-LEFT: #475156 1px solid; WIDTH: 150px; PADDING-TOP: 3px; BORDER-BOTTOM: #475156 1px solid; POSITION: absolute; BACKGROUND-COLOR: #efefff}DIV.MenuElementOver {	BORDER-RIGHT: #475156 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #475156 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; FONT: 12px Geneva, Arial, Helvetica, sans-serif; BORDER-LEFT: #475156 1px solid; WIDTH: 150px; PADDING-TOP: 3px; BORDER-BOTTOM: #475156 1px solid; POSITION: absolute; BACKGROUND-COLOR: #ffff99}</STYLE></HEAD><BODY><DIV id=header>     <DIV id=content><DIV class=tabbertab title=Notes><H2>Примечания</H2>Здесь контент 2</DIV><DIV class=tabbertab title="Source Code"><H2>Код</H2><P>Paste this source code into the designated areas.</P><DIV class=tabber id=tab1-1><DIV class=tabbertab title="External JavaScript File"><H2>Пример</H2><P>Paste this code into an external JavaScript file named: <EM>vb_menu.js</EM></P><BUTTON onclick="document.getElementById('source_textarea').focus();document.getElementById('source_textarea').select()">Select code</BUTTON><BR><TEXTAREA id=source_textarea style="FONT-SIZE: 0.9em" name=source_textarea rows=16 readOnly wrap=off cols=65>with (document) {// this we need for IE for MACif(typeof Array.prototype.push=="undefined"){	Array.prototype.push=function(){		var i=0; b=this.length,a=arguments;		for(i;i<a.length;i++)			this[b+i]=a[i];		return this.length	};	Array.prototype.pop=function(){		var len = this.length;		var lastVal = "";		if(len>0){			len--;			lastVal = this[len];			this.length = len;		}		return lastVal;	};	}}// ----------------------------- Square object starts here ---function S_IsIn(x,y){	if((x>=this.sqStartX && x<=this.sqEndX) && (y>=this.sqStartY && y<=this.sqEndY)){		return true;	}else{		return false;	}}// to be used for debuging (if you need less file size you can remove it)function S_ToString(){	return "[ id:"+this.id +"|StartX:"+this.sqStartX+"|StartY:"+this.sqStartY+"|EndX:"+this.sqEndX+"|EndY"+this.sqEndY+" ]";}// to get a copy of this square objectfunction S_GetCopy(){	return new Square(this.id,this.sqStartX,this.sqStartY,(this.sqEndX-this.sqStartX),(this.sqEndY-this.sqStartY));}// constructor of object Squarefunction Square(id,sqX,sqY,sqWidth,sqHeight){	// properties	this.id = id;	this.sqStartX = sqX;	this.sqStartY = sqY;	this.sqEndX = sqWidth+sqX;	this.sqEndY = sqHeight+sqY;	// methods	this.IsIn = S_IsIn;	this.ToString = S_ToString;	this.GetCopy = S_GetCopy;}// ----------------------------- Square object ends here ---// ----------------------------- Polygon object starts here ---// to be used for debuging (if you need less file size you can remove it)function P_ToString(){	var result = "";	var len = this.squares.length;	for(var i=0;i<len;i++){		result += this.squares[i].ToString();	}	return "Length:"+len+"; "+result;}// check if this square is already in polygonfunction P_IsInPolygon(id){	var len = this.squares.length;	if(len>1){		for(var i=0;i<len;i++){			var currId = this.squares[i].id;			if(id==currId){				return true;			}		}	}	return false;}// set the polygon (consists of two squares)function P_Set(square_1,square_2){	if(!this.IsInPolygon(square_1.id)){		this.id = square_1.id;		this.squares[0] = square_1;		this.squares[1] = square_2;	}}// check if x and y is withinn this polygonfunction P_IsIn(x,y){	for(var i=0;i<this.squares.length;i++){		if(this.squares[i].IsIn(x,y)) return true;	}	return false}// to get a copy of the object Polygonfunction P_GetCopy(){	var polygon = new Polygon();	polygon.Set(this.squares[0].GetCopy(),this.squares[1].GetCopy());	return polygon;}// constructor of object Polygonfunction Polygon(){	// properties	this.squares = new Array(new Square(0,0,0,0,0),new Square(0,0,0,0,0)); // array of squares	this.id;	// methods	this.Set = P_Set;	this.IsInPolygon = P_IsInPolygon;	this.IsIn = P_IsIn;	this.ToString = P_ToString;	this.GetCopy = P_GetCopy;}// ----------------------------- Polygon object ends here ---// ----------------------------- Link object starts here ---// constructor of object Linkfunction Link(text,url,target,id,parent){	// properties	this.text = text;	this.url = url;	this.target = target;	this.id = id;	this.parent = parent;}// ----------------------------- Link object ends here ---// ----------------------------- LinkBox object starts here ---// pushes a link into LinkBox objectfunction LB_PushLink(level,linkObj){	this.links.push(linkObj);	this.id = linkObj.parent;	this.level = level;}// constructor of object LinkBoxfunction LinkBox(){	// properties	this.links = new Array(); // array of Link objects	this.id = 0;	this.level = 0;	// methods	this.PushLink = LB_PushLink;}// ----------------------------- LinkBox object ends here ---// ----------------------------- MenuCreator object starts here ---function MC_DocMoveHandler(e) {	var x = (mc.isNS || mc.isMO)? e.pageX:event.clientX + self.document.body.scrollLeft;	var y = (mc.isNS || mc.isMO)? e.pageY:event.clientY + self.document.body.scrollTop;	if(mc.is_shown){		if( !mc.polygon.IsIn(x,y) ){			mc.Hide();		}	}}function MC_InitMouseHandlers() {	document.onmousemove = this.DocMoveHandler;	if (this.isNS || this.isMO){		document.captureEvents(Event.MOUSEMOVE);	}}// draw invisible boxesfunction MC_Draw(){	if(this.ok){		var all = "";		var text;		var url;		var target;		var id;		// var parent;		var len = this.boxes.length;		var level = 0;		var start;		// if this.write_first_level == false then the first level will be enetered manually		if(this.write_first_level) start = 0;		else start = 1;		for(var i=start;i<len;i++){		var css = "";			level = this.boxes[i].level;			for(var j=0;j<this.boxes[i].links.length;j++){				text = this.boxes[i].links[j].text;				url = this.boxes[i].links[j].url;				target = this.boxes[i].links[j].target;				id = this.boxes[i].links[j].id;				if(target!="") target = " TARGET="+target;				var linkTagStart = "";				var linkTagEnd = "";				if(url!=""){					linkTagStart = "<a href='"+url+"'"+target+" class='MenuLink'>";					linkTagEnd = "</a>";				}				if(level==1) css = " class='FirstMenuElement'";				else css = " class='MenuElement'";				all += "<div id='link_"+id+"' onmouseover='mc.Show(this);mc.OverStyle(this)' onmouseout='mc.NormalStyle(this)'"+css+">"+					   linkTagStart+text+linkTagEnd+"</div>\n<img id='img_"+id+"' name='img_"+id+"' src='menu_arrow.gif' style='position:absolute;display:none'>";			}		}		document.write(all);		// make first level visible and place it in proper place		this.ShowFirstLevel();		// initialise mousemove event		this.InitMouseHandlers();	}}// places the first level boxes on the screen at the tags <div id="MenuLine" style="position:relative"></div>function MC_ShowFirstLevel(){	if(this.write_first_level){		var links = this.boxes[0].links;		var len = links.length;		var leftShift = 0;		var topShift = 0;		var posObj = document.getElementById("MenuLine");		if(this.isIE || this.isMO){			var posObjIe = document.getElementById("MenuLineIE");			if(posObjIe!=null) posObj = posObjIe;		}		for(var i=0;i<len;i++){			var id = links[i].id;			var linkObj = document.getElementById("link_"+id);			linkObj.style.display="block";			var posX = parseInt(posObj.offsetLeft)+parseInt(this.posBodyLeft);			var posY = parseInt(posObj.offsetTop)+parseInt(this.posBodyTop);			linkObj.style.left = posX+leftShift;			linkObj.style.top = posY+topShift;			if(this.is_vertical) topShift += linkObj.offsetHeight;			else leftShift += linkObj.offsetWidth;		}	}else{		var links = this.boxes[0].links;		var len = links.length;		var idArray = new Array(len);		for(var i=0;i<len;i++){			idArray[i] = links[i].id;		}		var br_type  = (this.isIE || this.isMO) ? "IE" : "";		var elements = document.getElementsByName("MenuBox"+br_type);		// in case MenuBoxIE is not defined		if(elements==null){			elements = document.getElementsByName("MenuBox");		}		for(var j=0;j<elements.length;j++){			elements[j].id = "link_"+idArray[j];		}	}}// removes all boxes from the screenfunction MC_HideAll(){	var len1 = this.boxes.length;	for(var i=0;i<len1;i++){		var box = this.boxes[i];		if(box.level>1){			var len2 = box.links.length;			for(var j=0;j<len2;j++){				var id = box.links[j].id;				var div = document.getElementById("link_"+id);				if(div!=null) div.style.display="none";				var img = document.getElementById("img_"+id);				if(img!=null) img.style.display="none";			}		}	}	this.polygonsLine = new Array(this.polygon);}// shows boxfunction MC_Show(obj){	if(this.ok){		var box = this.GetBoxById(this.IsolateId(obj.id));		if(box!=null){			if(this.currentBox.level!=0 && this.currentBox.level!=(box.level-1) && this.currentBox.id!=box.id){				if(box.level==2) this.HideAll();				else this.Hide();			}			this.is_shown = true;			this.currentBox = box;			var len = box.links.length;			var vertShift = 0;			var initX = 0;			var initY = 0;			for(var i=0;i<len;i++){				var id = box.links[i].id;				var subObj = document.getElementById("link_"+id);				var coordY = this.CalculateY(obj,box.level,vertShift);				var coordX = this.CalculateX(obj,box.level);				if(this.isNS){					coordX = coordX + this.posBodyLeft;					coordY = coordY + this.posBodyTop;				}				var winWidth = document.getElementsByTagName("body")[0].offsetWidth;				subObj.style.display="block";				subObj.style.top = coordY;				var correction = this.CenterCorrection(subObj.offsetWidth,obj.offsetWidth,box.level);				if((coordX + obj.offsetWidth) > winWidth && box.level>2){					coordX -= obj.offsetWidth*2 - this.pad;				}				subObj.style.left = coordX + correction;				vertShift += subObj.offsetHeight;				if(this.HasChildren(id)) this.AddImage(coordX+correction,coordY,subObj.offsetWidth,id);				if(i==0){					initX = coordX;					initY = coordY;				}			}			this.polygon = new Polygon();			this.polygon.Set(new Square(box.id,initX-this.pad,initY-this.pad,subObj.offsetWidth+this.pad,vertShift+this.pad),							 new Square(box.id,obj.offsetLeft,obj.offsetTop,obj.offsetWidth,obj.offsetHeight+this.pad));			if(!this.IsInPolygonsLine(this.polygon.id))				this.polygonsLine.push(this.polygon.GetCopy());		}	}}// to center the boxfunction MC_CenterCorrection(boxWidth,trigetWidth,level){	if(!this.is_vertical && level==2 && this.is_centered){		return (trigetWidth/2)-(boxWidth/2);	}	return 0;}// check if box has childrenfunction MC_HasChildren(id){	for(var i=0;i<this.boxes.length;i++){		if(this.boxes[i].id==id) return true;	}	return false}// add an arrow imagefunction MC_AddImage(coordX,coordY,width,id){	var imgObj = document.getElementById("img_"+id);	imgObj.style.display="block";	imgObj.style.top = coordY+5;	imgObj.style.left = coordX+(width-12);}// calculates Y coordinatefunction MC_CalculateY(obj,level,vertShift){	var i;	if(!this.is_vertical && level==2) i = obj.offsetTop + obj.offsetHeight + vertShift;	else i = obj.offsetTop + vertShift;	return i;}// calculates X coordinatefunction MC_CalculateX(obj,level){	var i;	if(!this.is_vertical && level==2) i = obj.offsetLeft;	else  i = obj.offsetLeft + obj.offsetWidth-10;	return i;}// hides box when the mouse is out of itfunction MC_Hide(){	if(this.ok){		var box = this.GetBoxById(this.currentBox.id);		if(box!=null){			this.is_shown = false;			var len = box.links.length;			for(var i=0;i<len;i++){				var id = box.links[i].id;				var subObj = document.getElementById("link_"+id);				if(subObj!=null) subObj.style.display="none";				var imgObj = document.getElementById("img_"+id);				if(imgObj!=null) imgObj.style.display="none";			}			len = this.polygonsLine.length;			if(len>1){				this.polygon = this.polygonsLine[len-2];				this.currentBox = this.GetBoxById(this.polygon.id);				this.is_shown = true;				this.polygonsLine.pop();			}		}	}}// changes the style when mouseoverfunction MC_OverStyle(obj){	if(obj.className=="MenuElement") obj.className = "MenuElementOver";	else if(obj.className=="FirstMenuElement") obj.className = "FirstMenuElementOver";}// changes the style back when mouseoutfunction MC_NormalStyle(obj){	if(obj.className=="MenuElementOver") obj.className = "MenuElement";	else if(obj.className=="FirstMenuElementOver") obj.className = "FirstMenuElement";}// to be used for debugging (if you need less file size you can remove it)function MC_ToString(){	var boxesInfo = "";	for(var i=0;i<this.boxes.length;i++){		boxesInfo += " [ ";		for(var j=0;j<this.boxes[i].links.length;j++){			boxesInfo += " (text:"+this.boxes[i].links[j].text+						 ", url:"+this.boxes[i].links[j].url+						 ", target:"+this.boxes[i].links[j].target+						 ", id:"+this.boxes[i].links[j].id+						 ", parent:"+this.boxes[i].links[j].parent+") \n";		}		boxesInfo += " ] id:"+this.boxes[i].id+" level:"+this.boxes[i].level+"\n";	}	return  "boxes:{"+boxesInfo+"}";}// give integer onlyfunction MC_IsolateId(id){	if(id.indexOf("link_")==0) id=id.substr(5);	return id;}// get box object by its idfunction MC_GetBoxById(id){	var len = this.boxes.length;	for(var i=0;i<len;i++){		if(this.boxes[i].id==id){			return this.boxes[i];		}	}	return null;}// add a link to the menufunction MC_Add(text,url,target){	if(target=="undefined") target = "";	if(url=="undefined") url = "";	var level = 0;	this.id++;	this.boxes[this.currBoxCount].PushLink(this.level,new Link(text,url,target,this.id,this.parent));}// start adding boxfunction MC_Start(){	this.level++;	this.boxCount++;	this.parent = this.id;	this.boxes[this.boxCount] = new LinkBox();	this.parentsLine.push(this.parent);	this.boxesLine.push(this.boxCount);	this.currBoxCount = this.boxCount;}// end adding boxfunction MC_End(){	this.level--;	this.parentsLine.pop();	var len = this.parentsLine.length;	if(len>0) this.parent = this.parentsLine[len-1];	else this.parent = 0;	if(this.parent=="undefined") this.parent = 0;	this.boxesLine.pop();	var i = this.boxesLine.length-1;	this.currBoxCount = this.boxesLine[i];}// check if this polygon is already in the array of current polygonsfunction MC_IsInPolygonsLine(id){	var len = this.polygonsLine.length;	for(var i=0;i<len;i++){		var curr = this.polygonsLine[i]		if(curr.id==id) return true;	}	return false;}// make it verticalfunction MC_Vertical(){	this.is_vertical = true;}// center the boxfunction MC_Center(){	this.is_centered = true;}// do not write first level linksfunction MC_DoNotWriteFirstLevel(){	this.write_first_level = false;}function MC_SetBodyMargins(){	var posBody = document.getElementsByTagName("BODY");	var posBodyTop = 0;	var posBodyLeft = 0;	if(this.isNS || this.isMO){		this.posBodyTop = posBody[0].offsetTop;		this.posBodyLeft = posBody[0].offsetLeft;	}else{		this.posBodyTop = posBody[0].topMargin;		this.posBodyLeft = posBody[0].leftMargin;	}}function MC_DetectBrowser(){	// browser detection	var appVer = parseInt(navigator.appVersion);	if(navigator.userAgent.indexOf("Netscape")>=0){		this.isNS = true; // is Netscape 6+		this.isIE = false;		if(navigator.userAgent.indexOf("Netscape/6")<0){ // if is NS7+ is like Mozilla			this.isNS = false;			this.isMO = true;		}	}else{		if(navigator.userAgent.indexOf("Opera")>=0){			this.isOP = true; // is Opera			this.isIE = false;		}else{			if(navigator.appName.indexOf("Netscape")>=0){				this.isMO = true; // is Mozilla				this.isIE = false;			}		}	}	if(((this.isNS || this.isMO) && appVer<5) || ((this.isOP || this.isIE) && appVer<4)) this.ok=false;}// constructorfunction MenuCreator(){	// properties	this.img   = new Image(9,9);	this.img.src   = "menu_arrow.gif";	this.boxes = new Array(); // array of Box objects	this.is_vertical = false; // is the first level vertical, if false it is horisontal	this.is_centered = false; // is the first level centered	this.currentBox = new LinkBox(); // currently shown box	this.is_shown = false; // is there shown box	this.write_first_level = true; // to write or not wirst level	this.isNS = false;	this.isOP = false;	this.isMO = false;	this.isIE = true;	this.ok = true;	this.id = 0;	this.parent = 0;	this.boxCount = -1;	this.level = 0;	this.currBoxCount = 0;	this.boxesLine =  new Array(); // array of box numbers	this.parentsLine = new Array(); // array of parents	this.polygon = new Polygon(); // empty Polygon object	this.polygonsLine = new Array(); // array of Polygons used	this.pad = 10; // pad arrownd the polygon	// methods	this.Add = MC_Add;	this.Start = MC_Start;	this.End = MC_End;	this.IsolateId = MC_IsolateId;	this.ToString = MC_ToString;	this.Draw = MC_Draw;	this.Show = MC_Show;	this.Hide = MC_Hide;	this.InitMouseHandlers = MC_InitMouseHandlers;	this.GetBoxById = MC_GetBoxById;	this.ShowFirstLevel = MC_ShowFirstLevel;	this.CalculateX = MC_CalculateX;	this.CalculateY = MC_CalculateY;	this.IsInPolygonsLine = MC_IsInPolygonsLine;	this.InitMouseHandlers = MC_InitMouseHandlers;	this.DocMoveHandler = MC_DocMoveHandler;	this.AddImage = MC_AddImage;	this.HasChildren = MC_HasChildren;	this.HideAll = MC_HideAll;	this.CenterCorrection = MC_CenterCorrection;	this.OverStyle = MC_OverStyle;	this.NormalStyle = MC_NormalStyle;	this.Vertical = MC_Vertical;	this.Center = MC_Center;	this.DoNotWriteFirstLevel = MC_DoNotWriteFirstLevel;	this.DetectBrowser = MC_DetectBrowser;	this.SetBodyMargins = MC_SetBodyMargins;	this.DetectBrowser();	this.SetBodyMargins();

Пример

Paste this code into an external JavaScript file named: theMenu.js

// Creating and Managing objectvar mc = new MenuCreator();// Your menu starts heremc.Start();mc.Add("Search Engines");	mc.Start();	mc.Add("MSN","http://msn.com/","_blank");	mc.Add("Yahoo","http://yahoo.com","_blank");		mc.Start();		mc.Add("Yahoo Canada","http://ca.yahoo.com/","_blank");		mc.Add("Yahoo France","http://fr.yahoo.com/","_blank");		mc.End();	mc.Add("Google","http://google.com","_blank");		mc.Start();		mc.Add("Google Images","http://www.google.com/imghp","_blank");		mc.Add("Google Groups","http://www.google.com/grphp","_blank");			mc.Start();			mc.Add("Programming","http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&group=comp.programming","_blank");			mc.Add("Databases","http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&group=comp.databases","_blank");				mc.Start();				mc.Add("Oracle","http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&group=comp.databases.oracle","_blank");				mc.Add("MSSQL Server","http://groups.google.com/groups?hl=en&lr=&ie=UTF-8&group=comp.databases.ms-sqlserver","_blank");				mc.End();			mc.End();		mc.Add("Google Web Directory","http://www.google.com/dirhp","_blank");		mc.Add("Google News","http://news.google.com/","_blank");		mc.End();	mc.End();mc.Add("Discussions","http://products.bg","_blank");	mc.Start();	mc.Add("Tek Tips","http://www.tek-tips.com","_blank");	mc.Add("Java Sun Forums","http://forum.java.sun.com/","_blank");	mc.Add("PHP Builder","http://www.phpbuilder.com/board/","_blank");		mc.Start();		mc.Add("General Help","http://www.phpbuilder.com/board/forumdisplay.php?s=&forumid=2","_blank");		mc.Add("Newbies","http://www.phpbuilder.com/board/forumdisplay.php?s=&forumid=3","_blank");		mc.Add("Database","http://www.phpbuilder.com/board/forumdisplay.php?s=&forumid=6","_blank");		mc.End();	mc.End();mc.Add("Microsoft","http://www.microsoft.com/","_blank");	mc.Start();	mc.Add("Windows","http://www.microsoft.com/windows/","_blank");	mc.Add("Development");		mc.Start();		mc.Add("Visual Studio","http://msdn.microsoft.com/vstudio/","_blank");		mc.Add("Books","http://msdn.microsoft.com/vstudio/using/Books/default.aspx","_blank");		mc.End();	mc.End();mc.Add("Miscellaneous");	mc.Start();	mc.Add("Hosting","http://www.ecohosting.net","_blank");	mc.Add("Weather");		mc.Start();		mc.Add("Yahoo Weather","http://weather.yahoo.com/","_blank");		mc.Add("Canada Weather","http://www.canada.com/weather/","_blank");		mc.End();	mc.Add("News");		mc.Start();		mc.Add("Canada.com","http://www.canada.com/","_blank");		mc.Add("BBC","http://www.bbc.com","_blank");		mc.Add("CNN","http://www.cnn.com","_blank");		mc.End();	mc.End();mc.Add("Email Me","mailto:");mc.End();mc.Draw();

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

A.MenuLink{ 	color:#1D2123;	 width:100%; 	text-decoration: none;}/* Menu Link when the mouse is over */A.MenuLink:hover{ 	color:#AA0000; 	background-color:#FFFF99; 	text-decoration: underline;}/* First menu link element */DIV.FirstMenuElement{ 	font: 12px Geneva, Arial, Helvetica, sans-serif; 	position:absolute; 	padding:3px; 	width:130px; 	text-align: center; 	background-color:#82A6C4;  border: solid #475156 1px; 	display:none;}/* First menu link element when the mouse is over */DIV.FirstMenuElementOver{ 	font: 12px Geneva, Arial, Helvetica, sans-serif; 	position:absolute; 	width:130px; 	padding:3px; 	text-align: center; 	background-color:#FFFF99;  border: solid #475156 1px;}/* Menu link element */DIV.MenuElement { 	font: 12px Geneva, Arial, Helvetica, sans-serif; 	position:absolute; 	padding:3px; 	width:150px; 	background-color:#EFEFFF;  border: solid #475156 1px; 	display:none;}/* Menu link element when the mouse is over */DIV.MenuElementOver { 	font: 12px Geneva, Arial, Helvetica, sans-serif; 	position:absolute; 	padding:3px; 	width:150px; 	background-color:#FFFF99;  border: solid #475156 1px;}

Head

Paste this code into the HEAD section of your HTML document.

<script type="text/javascript" src="vb_menu.js"></script>

Body

Paste this code into the BODY section of your HTML document

<div id="MenuLine" style="position:relative;"></div><script language="JavaScript" src="theMenu.js"></script>