Menu and submenu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>xmenu-xlayer</title> <meta name="KEYWORDS" content=""> <meta name="DESCRIPTION" content=""> <style type="text/css"> <!-- body { background-color: #ffffff; color: #000000; font-size: 12px; font-family: Arial, Helvetica; } p { color: #a1a1a1; font-weight: bold; } a { font-family: Arial, Helvetica; text-decoration: none } a:active { color: #a1a1a1 } a:link { color: #a1a1a1 } a:visited { color: #a1a1a1 } a:hover { color: #cccccc; text-decoration: none; } .orange { background-color: #ff7f00; } .dark_orange { background-color: #ff5500; } a.navigation_links { font-family: Arial, Helvetica, sans serif; font-size:10px; color: #fadada; font-weight: 600; } a:hover.navigation_links { font-family: Arial, Helvetica, sans serif; font-size:10px; color:white; font-weight: 600; } .content { font-family: Arial, Helvetica, sans serif; background-color: #ffffff; color: #000000; font-size: 12px; } --> </style> <!-- Browser.js --> <script language="javascript"> // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2001-31-12 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-01-28 // version: 0.8.0 function Browser( browsers ) { this.browsers = browsers; // browser detection array this.createBooleans(); } Browser.prototype.createBooleans = function() { var name = navigator.appName; var cname = navigator.appCodeName; var usragt = navigator.userAgent; var ver = navigator.appVersion; for ( i = 0; i < this.browsers.length; i++ ) { var browserArray = this.browsers[ i ]; // browsers-array var sCheck = browserArray[ 1 ]; // 'logical expr' that detects the browser var sCurrentVersion = browserArray[ 2 ]; // 'regexp' that gets current version var sBrand = browserArray[ 0 ]; // browser-obj 'property' (is.xx) var availableVersions = browserArray[ 3 ]; // 'versions' to check for if ( eval( sCheck ) ) { // browser recognized eval( "this." + sBrand + " = true" ); // browser-obj property (is.xx) var regexp, ver, sMinorVersion, sMajorVersion; regexp = new RegExp( sCurrentVersion ); regexp.exec( usragt ); // parse navigator.userAgent var sMajorVersion = RegExp.$1; var sMinorVersion = RegExp.$2; for ( j = 0; j < availableVersions.length; j++ ) { if ( parseFloat(availableVersions[ j ]) <= eval( sMajorVersion + "." + sMinorVersion ) ) { // upper versions eval( "this." + sBrand + availableVersions[ j ].substr( 0, 1 ) + availableVersions[ j ].substr( 2, 1 ) + "up = true" ); } if ( parseFloat(availableVersions[ j ]) == eval( sMajorVersion + "." + sMinorVersion ) ) { /// current version eval( "this." + sBrand + availableVersions[ j ].substr( 0, 1 ) + availableVersions[ j ].substr( 2, 1 ) + "= true" ); } } } } } is = new Browser ( [ // Internet Explorer Windows --- [ "iewin", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Microsoft Internet Explorer' ) >= 0 && usragt.indexOf( 'MSIE' ) >= 0 && usragt.indexOf( 'Opera' ) < 0 && usragt.indexOf( 'Windows' ) >= 0", // IE detection expression "MSIE.([0-9]).([0-9])", // regexpr for version (in navigator.userAgent) [ "5", "5.5", "6" ] ], // published versions // Internet Explorer Macintosh --- [ "iemac", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Microsoft Internet Explorer' ) >= 0 && usragt.indexOf( 'MSIE' ) >= 0 && usragt.indexOf('Opera') < 0 && usragt.indexOf('Mac') >= 0", "MSIE.([0-9]).([0-9])", [ "5", "5.1", "5.2" ] ], // Gecko (Mozilla, Galeon, Firebird, Netscape >=6.x) --- [ "gk", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >= 0 && usragt.indexOf( 'Gecko' ) >= 0 && usragt.indexOf( 'Safari' ) < 0", "[rv[:| ]*([0-9]).([0-9])|Galeon\/([0-9]).([0-9])]", [ "0.7", "0.8", "0.9", "1.0", "1.1", "1.2", "1.3", "1.4", "1.5", "1.6" ] ], // Netscape Navigator --- [ "nn", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >=0 && parseInt( ver ) <= 4", "([0-9]).([0-9])", [ "4", "4.5", "4.7", "4.8" ] ], // Opera --- [ "op", "cname.indexOf( 'Mozilla' ) >= 0 && ( name.indexOf( 'Microsoft Internet Explorer' ) >=0 || name.indexOf( 'Opera' ) >= 0 ) && usragt.indexOf( 'Opera' ) >= 0", "Opera.([0-9]).([0-9])", [ "5", "5.1", "6", "7", "7.1", "7.2" ] ], // Safari --- [ "sf", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Netscape' ) >=0 && usragt.indexOf('AppleWebKit' ) >= 0 && usragt.indexOf('Safari') >= 0", "AppleWebKit\/([0-9])", "Konqueror\/([0-9]\.[0-9])", [ "48", "85" ] ], // Konqueror --- [ "kq", "cname.indexOf( 'Mozilla' ) >= 0 && name.indexOf( 'Konqueror' ) >= 0 && usragt.indexOf( 'Konqueror' ) >= 0", "Konqueror\/([0-9]).([0-9]*)", [ "2.2", "3", "3.1" ] ] ] ); </script> <!-- XlayerParent.js --> <script language="javascript"> // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2001-12-20 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-02-06 // version: 1.4.0 function XlayerParent( sLayerId, sImg, sDesc, iWidth, iHeight, sContent ) { // static var -------- if( !XlayerParent.prototype.instances ) XlayerParent.prototype.instances = new Array(); XlayerParent.prototype.instances[ XlayerParent.prototype.instances.length ] = this; this.sId = this.create( sLayerId, sImg, sDesc, iWidth, iHeight ) } XlayerParent.prototype.create = function( sLayerId, sImg, sDesc, iWidth, iHeight ) { this.sParentLayerId = sLayerId; this.sParentLayerXlayerId = sLayerId + "Xlayer" var sLayer = ""; var content_str = ''; if ( sImg ) sContent = '<img src="' + sImg + '" width="' + iWidth + '" height="' + iHeight + '" border="0" >'; elseif ( sDesc ) sContent = sDesc; // nn4up ---------- if ( is.nn4up ) { var sLayer = '<ilayer id="' + sLayerId + '" top=0 left=0 width=' + iWidth + ' height=' + iHeight + ' >' + ( ( sContent )? sContent : "" ) + '</ilayer>'; document.write( sLayer ); return sLayerId; } // iewin5up, iemac5up, gk -------- elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) { var sLayer = '<div id="' + sLayerId + '" style="position:relative; width: ' + iWidth + 'px; height: ' + iHeight + 'px; ">' + ( ( sContent )? sContent : "" ) + '</div>'; document.write( sLayer ); return sLayerId; } else { return null; } } XlayerParent.prototype.getLayer = function( sLayerId ) { var layer = null; if ( sLayerId ) { // id supplied if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) return document.getElementById( sLayerId ); elseif ( is.nn4up ) return document.layers[ sLayerId ]; } elseif ( !sLayerId ) { // null supplied if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) return document.body; elseif ( is.nn4up ) return window; } } XlayerParent.prototype.getX = function( layer ) { var x = 0; if ( is.nn4up ) { if ( layer != window ) x = layer.pageX; } elseif ( is.gk || is.iemac5up || is.iewin5up || is.sf || is.kq3up || is.op6up ) { if ( layer != document.body ) { currentX = 0; object = layer; while ( object ) { currentX += object.offsetLeft; object = object.offsetParent; } x = currentX; } if ( is.iemac5up ) x += parseInt( "0" + document.body.currentStyle.marginLeft, 10 ); } return x; } XlayerParent.prototype.getY = function( layer ) { var y = 0; if ( is.nn4up ) { if ( layer != window ) y = layer.pageY; } elseif ( is.gk || is.iewin || is.iemac5up || is.sf || is.kq3up || is.op6up ) { if ( layer != document.body ) { currentY = 0; object = layer; while ( object ) { currentY += object.offsetTop; object = object.offsetParent; } y = currentY; } if ( is.iemac5up ) y += parseInt( "0" + document.body.currentStyle.marginTop, 10 ); } return y; } XlayerParent.prototype.getW = function( layer ) { var w = 0; if ( is.nn4up ) { if ( layer == window ) return window.innerWidth; elsereturn layer.clip.width; } elseif ( is.gk || is.iemac5up || is.sf || is.kq3up || is.op6up ) { if ( layer == document.body ) return window.innerWidth; elsereturn layer.offsetWidth; } elseif ( is.iewin5up ) { if ( layer == document.body ) return document.body.clientWidth; elsereturn layer.offsetWidth; } } XlayerParent.prototype.getH = function( layer ) { var h = 0; if ( is.nn4up ) { if ( layer == window ) return window.innerHeight; elsereturn layer.clip.height; } elseif ( is.gk || is.iemac5up || is.sf || is.kq3up || is.op6up ) { if ( layer == document.body ) return window.innerHeight; elsereturn layer.offsetHeight; } elseif ( is.iewin5up ) { if ( layer == document.body ) return document.body.clientHeight; elsereturn layer.offsetHeight; } } </script> <!-- Xlayer.js --> <script language="javascript"> // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2001-12-20 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-02-21 // version: 2.5.3 function Xlayer( sParent, xlayerParent, x, y, offsetX, offsetY, w, h, iClipTop, iClipRight, iClipBottom, iClipLeft, iZindex, bVisibility, sBgcolor, fading, events, sText, bBold, sAlign, iTopTextBorder, iRightTextBorder, iBottomTextBorder, iLeftTextBorder, sFgcolor, sHref, sIcon, iIconWidth, iIconHeight, iconBorder, sFontface, iFontsize, src , sSpacer ) { if ( !Xlayer.prototype.instances ) Xlayer.prototype.instances = new Array(); Xlayer.prototype.instances[ Xlayer.prototype.instances.length ] = this; // Store this Instance In static array this.index = Xlayer.prototype.instances.length - 1; this.sParent = sParent; this.parent = null; this.xlayerParent = xlayerParent; this.lyr = null; this.id = this.id || "Xlayer" + this.index; this.x = x || 0; this.y = y || 0; this.offsetX = offsetX || 0; this.offsetY = offsetY || 0; this.w = w || 0; this.h = h || 0; this.iClipTop = iClipTop || 0; this.iClipRight = iClipRight || w; this.iClipBottom = iClipBottom || h; this.iClipLeft = iClipLeft || 0; this.iZindex = iZindex || 0; this.bVisibility = bVisibility; this.sBgcolor = sBgcolor || "black"; this.iOpacity = 0; this.sSpacer = sSpacer; // caption --- this.sText = sText || null; this.bBold = bBold || false; this.sAlign = sAlign || "center"; this.iTopTextBorder = iTopTextBorder; this.iRightTextBorder = iRightTextBorder; this.iBottomTextBorder = iBottomTextBorder; this.iLeftTextBorder = iLeftTextBorder; this.sFgcolor = sFgcolor || "white"; this.sHref = ( is.nn4up && !sHref )? "#" : sHref; // nn4 always need a href to process clicks this.sFontface = sFontface || "Helvetica"; this.iFontsize = iFontsize || 2; this.sIcon = sIcon || null; this.iIconWidth = iIconWidth || 0; this.iIconHeight = iIconHeight || 0; this.iconBorder = iconBorder || 0; // iframe ---- this.iframe = null; this.scrollbars = null; this.src = src || null; this.events = events || null; // array: event, func, event, func, ... this.fading = fading || null; // array: start, stop, steps, delay if ( is.op6up && !is.op7up ) // opera can't create dynamically this.writeDiv(); } Xlayer.prototype.MOUSEOVER = "onmouseover"; Xlayer.prototype.MOUSEOUT = "onmouseout"; Xlayer.prototype.CLICK = "onclick"; Xlayer.prototype.create = function() { this.parent = XlayerParent.prototype.getLayer( this.sParent ); // parent = another layer or document.body this.parentCoordsOnly = XlayerParent.prototype.getLayer( this.xlayerParent.sId ); if ( is.nn4up ) { if ( this.w == "100%" ) this.lyr = new Layer( this.parent.innerWidth, this.parent ); else this.lyr = new Layer( this.w, this.parent ); } elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up ) { this.lyr = document.createElement( "DIV" ); // create layer this.lyr.style.position = "absolute"; this.lyr.style.overflow = "hidden"; this.lyr.id = this.id; this.parent.appendChild( this.lyr ); // insert into DOM } elseif ( is.op6up && !is.op7up ) { // already created on instanciation (no dynamic creation possible) this.lyr = document.getElementById( this.id ); } this.setVisibility( this.bVisibility ); this.setSize( this.w, this.h ); this.setEvents( this.events ); if ( !( is.op6up && !is.op7up ) ) this.setBody( this.getCaption( this.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ) ); this.setBgColor( this.sBgcolor ); this.setFgColor( this.sFgcolor ); this.setPos( this.x, this.y, this.offsetX, this.offsetY ); this.setZindex( this.iZindex ); this.fade( this.fading ); } Xlayer.prototype.writeDiv = function() { document.writeln( '<div id="' + this.id + '" style="position:absolute;">' + this.getCaption( this.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ) + '</div>' ); } Xlayer.prototype.kill = function() { if ( is.nn4up ) { for ( i = 0; i < document.layers.length ; i++ ) // scan trough layers-array in NN-DOM { this.setVisibility( false ); if ( document.layers[ i ].id == this.lyr.id ) { index = i; //document.layers.splice(i, 1) //delete document.layers[i] document.layers[ i ] = null; break; } } } elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up ) { var lyr; lyr = document.getElementById( this.lyr.id ); document.body.removeChild( lyr ); } this.iOpacity = 0; } Xlayer.prototype.setFgColor = function( color ) { if ( this.sText ) { this.sFgcolor = color; if ( is.nn4up ) this.setBody( this.getCaption( this.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ) ); elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) { if ( this.sText ) { document.getElementById( this.id+"d" ).style.color = color; //this.setCaption( this.sText, this.bBold, this.sIcon, this.iIconWidth, this.iIconHeight, this.iconBorder ); } } } } Xlayer.prototype.setBgColor = function( color ) { this.sBgcolor = color; if ( is.nn4up ) this.lyr.document.bgColor = color; elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) this.lyr.style.backgroundColor = color; } Xlayer.prototype.setSize = function( w, h ) { var iOldWidth = this.w; // store old values var iOldHeight = this.h; this.w = w; // store new values this.h = h; if ( is.nn4up ) { if ( w == "100%" ) this.lyr.resizeTo( window.innerWidth, h ); else this.lyr.resizeTo( w, h ); } elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up ) { if ( w == "100%" ) { this.lyr.style.width = "100%"; this.lyr.style.height = h + 'px'; } else { this.lyr.style.width = w + 'px'; this.lyr.style.height = h + 'px'; } this.setClipping( this.iClipTop, ( this.iClipRight + w - iOldWidth ), ( this.iClipBottom + h - iOldHeight ), this.iClipLeft ); if ( is.iewin5up && this.iframe ) // recreate iframe on resize this.setIframe( this.src ); } elseif ( is.op6up && !is.op7up ) { if ( w == "100%" ) { this.lyr.style.pixelWidth = "100%"; this.lyr.style.pixelHeight = h; } else { this.lyr.style.pixelWidth = w; this.lyr.style.pixelHeight = h; } } } Xlayer.prototype.setPos = function( x, y, offsetX, offsetY ) { var parent; if ( this.parentCoordsOnly ) parent = this.parentCoordsOnly; else parent = this.parent; // calc x, y --- if ( x == "centered" ) x = XlayerParent.prototype.getX( parent ) + ( XlayerParent.getW( parent ) / 2 ) - this.w / 2; elseif ( x == "left" ) x = this.xlayerParent.getX( parent ); elseif ( x == "right" ) x = XlayerParent.prototype.getX( parent ) + XlayerParent.prototype.getW( parent ) - this.w; if ( y == "centered" ) y = XlayerParent.prototype.getY( parent ) + ( XlayerParent.prototype.getH( parent ) / 2 ) - this.h / 2; elseif ( y == "top" ) y = XlayerParent.prototype.getY( parent ); elseif ( y == "bottom" ) y = XlayerParent.prototype.getY( parent ) + XlayerParent.prototype.getH( parent ) - this.h; if ( offsetX ) x += offsetX; if ( offsetY ) y += offsetY; this.x = x; this.y = y; // set position --- if ( is.nn4up ) { this.lyr.moveTo( this.x, this.y ); } elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) { this.lyr.style.top = this.y + "px"; this.lyr.style.left = this.x + "px"; } } Xlayer.prototype.setVisibility = function( bVisibility ) { this.bVisibility = bVisibility; if ( this.lyr ) { if ( is.nn4up ) { this.lyr.visibility = ( bVisibility )? "show" : "hide"; } elseif ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) { this.lyr.style.visibility = ( bVisibility )? "visible" : "hidden"; } } } Xlayer.prototype.isVisible = function() { return this.bVisibility; } Xlayer.prototype.setFontsize = function( iFontsize ) { this.iFontsize = iFontsize; } Xlayer.prototype.setFontface = function( sFontface ) { this.sFontface = sFontface; } Xlayer.prototype.setClipping = function( top, right, bottom, left ) { if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up ) { this.lyr.style.clip = "rect(" + top + "px " + right + "px " + bottom + "px " + left + "px)"; } elseif ( is.nn4up ) { this.lyr.clip.top = top; this.lyr.clip.right = right; this.lyr.clip.bottom = bottom; this.lyr.clip.left = left; } this.iClipTop = top; this.iClipRight = right; this.iClipBottom = bottom; this.iClipLeft = left; } Xlayer.prototype.setZindex = function( iZindex ) { this.iZindex = iZindex; if ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op6up ) { this.lyr.style.zIndex = iZindex; } elseif ( is.nn4up ) { this.lyr.zIndex = iZindex; } } Xlayer.prototype.setEvents = function( events ) { if( events ) { for ( i = 0; i < events.length; ) { var e = events[ i++ ]; var func = events[ i++ ]; if ( is.gk || is.sf || is.kq3up || is.op7up ) this.lyr.addEventListener( e.substring( 2, e.length ), this.onEvent( e, func, this.lyr ), false ); elseif ( is.iewin5up || is.iemac5up || is.op6up ) this.lyr[ e.toLowerCase() ] = this.onEvent( e, func, this.lyr );//new Function( func ); elseif ( is.nn4up ) { this.lyr.captureEvents( Event[ e.toUpperCase().substring( 2 ) ] ); this.lyr[ e.toLowerCase() ] = new Function( func ); } } } } Xlayer.prototype.onEvent = function( event, func, xlayer ) { return function( e ) { var e = arguments[ 0 ]; if ( event == Xlayer.prototype.MOUSEOVER || event == Xlayer.prototype.MOUSEOUT ) { if ( !e ) var e = window.event; //ie if ( e.target && e.relatedTarget ) { var target = e.target; var relatedTarget = e.relatedTarget; } elseif ( e.fromElement && e.toElement ) { var target = e.toElement; var relatedTarget = e.fromElement; } if ( Xlayer.prototype.isChildNode( relatedTarget, xlayer ) && Xlayer.prototype.isChildNode( target, xlayer ) ) return false; // ignore events of inner html-entities } return eval( func ); }; } Xlayer.prototype.isChildNode = function( node, parentNode ) { if ( node == parentNode ) { return true; } elseif ( node && node.parentNode ) return Xlayer.prototype.isChildNode( node.parentNode, parentNode ); elsereturn false; } Xlayer.prototype.setBody = function( sHtml ) { if ( is.iewin5up || is.iemac || is.op7up || is.kq3up ) this.lyr.innerHTML = sHtml; elseif ( is.gk || is.sf ) { while ( this.lyr.hasChildNodes() ) this.lyr.removeChild( this.lyr.firstChild ); var range = this.lyr.ownerDocument.createRange(); range.selectNodeContents( this.lyr ); range.deleteContents(); var contextualFrag = range.createContextualFragment( sHtml ); this.lyr.appendChild( contextualFrag ); } elseif( is.nn4up ) { this.lyr.document.open() this.lyr.document.write( sHtml ); this.lyr.document.close(); } elseif ( is.op6up && !is.op7up ) this.sBody = sHtml; } Xlayer.prototype.scroll = function( orientation, step ) { this.orientation = orientation; this.step = step; // scrolling possible (clipping present) if ( ( this.iClipRight < this.w ) || ( this.iClipTop != 0 ) || ( this.iClipLeft > 0 ) || ( this.iClipBottom < this.h ) ) { // scrolling possible if ( orientation == "horiz" ) { if ( this.iClipLeft + step > 0 && this.iClipRight + step < this.w ) { // border reached? this.setPos(this.x - step, this.y); this.setClipping(this.iClipTop, this.iClipRight + step, this.iClipBottom, this.iClipLeft + step); } } elseif ( orientation == "vert" ) { if ( this.iClipTop + step > 0 && this.iClipBottom + step < this.h ) { // border reached? this.setPos( this.x, this.y - step ); this.setClipping( this.iClipTop + step, this.iClipRight, this.iClipBottom + step, this.iClipLeft ); } } } } Xlayer.prototype.setOpacity = function( iOpac ) { if ( is.iewin5up || is.iemac5up ) this.lyr.style.filter = "alpha(opacity=" + iOpac + ")"; elseif ( is.gk ) { this.lyr.style.MozOpacity = iOpac / 100;//opac + "%"; } /* not tested yet else if ( is.kq3up ) { this.lyr.style.KhtmlOpacity = iOpac / 100; } */} Xlayer.prototype.fade = function( fading ) { if ( fading ) { start = fading[ 0 ]; // opacity start value stop = fading[ 1 ]; // stop steps = fading[ 2 ]; // number of steps delay = fading[ 3 ]; // delay in ms this.iOpacity = this.iOpacity + parseInt( ( stop - start ) / steps ); this.setOpacity( this.iOpacity ); if ( this.iOpacity < stop ) setTimeout( "Xlayer.prototype.instances[" + this.index + "].fade( Xlayer.prototype.instances[" + this.index + "].fading )", delay); this.fading = fading; return true; } } Xlayer.prototype.setIframe = function( src, scrollbars ) { this.src = src; if ( scrollbars != null ) { this.scrollbars = ( scrollbars )? "yes" : "no"; } elseif ( this.scrollbars == null ) { this.scrollbars = "yes"; // default for scrollbars: 'yes' } if ( is.nn4up ) { this.lyr.src = src; } elseif ( is.iewin5 ) { // ugly workaround: ie5 basically cannot create dynamically : frame, iframe this.lyr.innerHTML = "<iframe width='100%' height='100%' frameborder='0' scrolling='" + this.scrollbars + "' id='" + this.id + "_iframe" + "'></iframe>"; this.lyr.contentWindow = new Object(); this.lyr.contentWindow.location = new Object(); this.iframe = document.getElementById(this.id + "_iframe"); // store iframe this.lyr.contentWindow.location.iframe = this.iframe; this.lyr.contentWindow.location.iframe.id = ""; this.lyr.contentWindow.location.iframe.src = src } elseif ( is.iewin55up || is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up ) { var iframe; iframe = document.createElement( "IFRAME" ); // create iframe iframe.src = src; iframe.name = this.id + "_iframe"; iframe.scrolling = this.scrollbars; iframe.frameBorder = "0px"; iframe.style.visibility = "inherit"; if ( is.iewin55up ) { iframe.style.width = this.w + "px"; iframe.style.height = this.h + "px"; } elseif ( is.iemac5up || is.gk || is.sf || is.kq3up || is.op7up ) { iframe.style.width = "inherit"; iframe.style.height = "inherit"; } while ( this.lyr.hasChildNodes() ) { // remove existing layer child-nodes this.lyr.removeChild( this.lyr.lastChild ); } this.lyr.appendChild( iframe ) // insert iframe into layer this.iframe = iframe; } } Xlayer.prototype.getCaption = function( sText, bBold, sIcon, iIconWidth, iIconHeight, iIconBorder ) { this.sText = sText; this.sIcon = sIcon; this.iIconWidth = iIconWidth; this.iIconHeight = iIconHeight; var tab_head = '<table style="' + ( ( is.iewin5up )? 'cursor: hand;' : 'cursor: pointer;" ' ) + 'width="' + this. w + '" height="' + this.h + '" border="0" cellpadding="0" cellspacing="0">'; var tab_foot = '</table>'; if ( sText || sIcon ) { // content --- var img = "", desc = "", html ="", tab_body = "", sTextCell = ""; if ( sIcon ) img = '<img src="' + sIcon + '" width="' + iIconWidth + '" height="' + iIconHeight + '">'; if ( sText ) { if ( is.nn4up ) sTextCell = '<font id="' + this.id + 'd" color="' + this.sFgcolor + '" size="' + ( parseInt( "0" + ( this.iFontsize / 5 ), 10 ) ) + '" face="' + this.sFontface + '">' + ( ( bBold )? '<b>' : '' ) + sText + ( ( bBold )? '</b>' : '' ) + '</font>'; elseif ( is.iewin5up || is.gk || is.sf || is.kq3up || is.iemac5up || is.op6up ) sTextCell = '<span id="' + this.id + 'd" style="' + 'color:' + this.sFgcolor + ';' + 'font-size:' + this.iFontsize + 'px;' + 'font-family:' + this.sFontface + ';' + ( ( bBold )? ' font-weight:bold;' : '' ) + 'height:' + this.iFontsize + 'px">' + sText + '</span>'; } if ( this.sHref && is.nn4up ) // nn4 always needs a <a href... sTextCell = "<a href='" + this.sHref + "' style='text-decoration: none;'>" + sTextCell + "</a>"; // text cell ----- var iTextCellWidth = this.w - iIconWidth - iIconBorder; var iTextCellHeight = this.h - this.iTopTextBorder - this.iBottomTextBorder; desc += '<table width="' + iTextCellWidth + '" height="' + this.h + '" cellpadding="0" cellspacing="0" border="0">'; // top text border if ( this.iTopTextBorder > 0 ) desc += '<tr style="line-height: ' + this.iTopTextBorder + 'px"><td colspan="3" height="' + this.iTopTextBorder + '"><img src="' + this.sSpacer + '" width="1" height="' + this.iTopTextBorder + '" border="0"></td></tr>'; desc += '<tr style="line-height: ' + this.iFontsize + 'px">'; // left border if ( this.iLeftTextBorder > 0 ) desc += '<td><img src="' + this.sSpacer + '" width="' + this.iLeftTextBorder + '" height="1" border="0"></td>'; // text cell desc += '<td valign="middle" align="' + this.sAlign + '">' + sTextCell + '</td>'; // right border if ( this.iRightTextBorder > 0 ) desc += '<td><img src="' + this.sSpacer + '" width="' + this.iRightTextBorder + '" height="1" border="0"></td>'; desc += '</tr>'; // bottom text border if ( this.iBottomTextBorder > 0 ) desc += '<tr style="line-height: ' + this.iBottomTextBorder + 'px"><td colspan="3" height="' + this.iBottomTextBorder + '"><img src="' + this.sSpacer + '" width="1" height="' + this.iBottomTextBorder + '" border="0"></td></tr>'; // right border desc += '</table>'; // text & icons --- if ( sIcon && sText ) { tab_body = '<tr>' + '<td nowrap '; if ( is.iemac5 ) { tab_body += 'style="position: absolute; top: 0px; height: ' + this.iFontsize + 'px; width: ' + ( this.w - iIconWidth - iIconBorder ) + 'px; vertical-align: middle;" '; } tab_body += 'width="' + ( this.w - iIconWidth - iIconBorder ) + '" height="' + this.h + '" align="' + this.sAlign + '" valign="middle">' + desc + '</td>' + '<td '; if ( is.iemac5 ) { tab_body += 'style="position: absolute; top: ' + ( ( this.h - iIconHeight ) / 2 ) + 'px; left: ' + ( this.w - iIconWidth - iIconBorder ) + 'px; bottom: ' + iIconHeight + 'px; right:' + ( iIconWidth + iIconBorder ) + 'px;height: ' + iIconHeight + 'px; width: ' + ( iIconWidth + iIconBorder ) + 'px" '; } tab_body += 'width="' + ( iIconWidth + iIconBorder ) + '" height="' + this.h + '" align="center" valign="middle" >' + img + '</td>' + '</tr>'; } // text only --- elseif ( sText && !sIcon ) { tab_body = '<tr><td '; if ( is.iemac5 ) { tab_body += 'style="position: absolute; top: 0; left: 0" '; } tab_body += 'width="' + this.w + '" height="' + this.h + '" align="' + this.sAlign + '" valign="middle">' + desc + '</td></tr>'; } // icon only --- elseif ( sIcon && !sText ) { tab_body = '<tr><td nowrap '; if ( is.iemac5 ) { tab_body += 'style="position: absolute; top: 0; left: 0" '; } tab_body += 'width="' + this.w + '" height="' + this.h + '" align="' + this.sAlign + '" valign="middle">' + sIcon + '</td></tr>'; } var html = tab_head + tab_body + tab_foot; return html; } } </script> <!-- Xmenu.js --> <script language="javascript"> /** * @author Andre Dietisheim (dietisheim@sphere.ch) * @version 2.5.2, 2004-02-10 (created on 2002-04-22) * Copyright (c) 2001-2004 Andre Dietisheim */ function Xmenu( sNavigationName, sNavigation, globals, styles, contents ) { if( !Xmenu.prototype.instances ) Xmenu.prototype.instances = new Array(); Xmenu.prototype.instances[ Xmenu.prototype.instances.length ] = this; // store this instance in static Array this.index = Xmenu.prototype.instances.length - 1; this.sNavigationName = sNavigationName; this.sNavigation = sNavigation; this.iType = globals[ 0 ]; this.iCloseDelay = globals[ 1 ] * 1000; this.bClick = globals[ 2 ]; this.bMenuBelow = globals[ 3 ]; this.bLeftAlign = globals[ 4 ]; this.bKeepExpansionState = globals[ 5 ]; this.bHighlightClickedNodes = globals[ 6 ]; this.sSpacerUrl = globals[ 8 ]; this.styles = styles; this.contents = contents; this.iContent = 0; this.tree = null; this.overNode = null; this.outNode = null; this.lastNode = null; this.absY = 0; this.timeout = null; this.bOpened = false; iParentLayerWidth = ( is.iemac5up )? 0 : globals[ 7 ][ 0 ]; // XparentLayer disturbs Xlayer-events on iemac5 iParentLayerHeight = ( is.iemac5up )? 0 : globals[ 7 ][ 1 ]; this.xlayerParent = new XlayerParent( "XlayerParent" + this.index, this.sSpacerUrl, null, iParentLayerWidth, iParentLayerHeight, null ); this.tree = this.buildTree( 0, 0, false, null, "tree" ); this.nodeFound = null; this.navigationNode = null; if ( this.findNode( this.sNavigation, this.tree ) ) { // node indicated in request found this.navigationNode = eval( "this." + this.nodeFound ); } } Xmenu.prototype.VERTICAL = 0; Xmenu.prototype.HORIZONTAL = 1; Xmenu.prototype.COLLAPSING = 2; Xmenu.prototype.buildTree = function( iAbsX, iAbsY, bSibling, sParent, sPath ) { var node = this.buildNode( iAbsX, iAbsY, bSibling, sParent, sPath ); this.iContent++; if ( this.iContent < this.contents.length && node.iLevel < this.contents[ this.iContent ][ 2 ] ) { // child node.child = this.buildTree( node.absX, node.absY, false, "this." + node.sPath, node.sPath + ".child" ); } if ( this.iContent < this.contents.length && node.iLevel == this.contents[ this.iContent ][ 2 ] ) { // sibling node.sibling = this.buildTree( node.absX, node.absY, true, node.sParent, node.sPath + ".sibling" ); } node.xlayer = this.addXlayer( this.xlayerParent, node, this.styles ) return node; } Xmenu.prototype.buildNode = function( iAbsX, iAbsY, bSibling, sParent, sPath ) { var node = new Object(); node.child = null; node.sibling = null; node.sParent = sParent; node.sPath = sPath; node.sText = this.contents[ this.iContent ][ 0 ]; node.target = this.contents[ this.iContent ][ 1 ]; node.iLevel = this.contents[ this.iContent ][ 2 ]; if ( this.iType == this.VERTICAL ) { if ( !bSibling ) { // child if ( node.iLevel > 1 || ( node.iLevel == 1 && !this.bMenuBelow ) ) // menu below: level 2,3,... || menu right: 1, 2, ... node.absX = iAbsX + this.styles[ node.iLevel ][ 2 ] + this.styles[ node.iLevel + 1 ][ 0 ]; else// menu below: level 0, 1 || menu right: level 0 node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 0 ]; if ( node.iLevel != 1 || ( node.iLevel == 1 && !this.bMenuBelow ) ) // level 0, 2, 3, ... : add yOffset node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 1 ]; else// level 1: add height of last node + yOffset node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 1 ] + this.styles[ node.iLevel ][ 3 ]; } else { // sibling node.absX = iAbsX; node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 3 ]; } } elseif ( this.iType == this.HORIZONTAL ) { if ( !bSibling ) { // child if ( node.iLevel > 1 || ( this.bMenuBelow && node.iLevel == 1 ) ) { // ( level 1 && menu below ), level 2, 3, 4, ... node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 1 ] + this.styles[ node.iLevel ][ 3 ]; if ( !this.bLeftAlign ) // add height of last + yOffset, add xOffset node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 0 ]; else node.absX = this.styles[ node.iLevel + 1 ][ 0 ] + this.cumulateOffsets( 0, node.iLevel ) + ( ( node.iLevel > 0 && !this.bMenuBelow )? this.styles[ 1 ][ 2 ] : 0 ); } else { // level 0, ( level 1 && menu on the right ) node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 1 ]; if ( !this.bLeftAlign ) // add yOffset, add width of last + xOffset node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 0 ] + ( ( node.iLevel > 0 )? this.styles[ node.iLevel + 1 ][ 2 ] : 0 ); else node.absX = this.styles[ node.iLevel + 1 ][ 0 ] + this.cumulateOffsets( 0, node.iLevel ) + ( ( node.iLevel > 0 && !this.bMenuBelow )? this.styles[ 1 ][ 2 ] : 0 ); } } else { // sibling node.absY = iAbsY; node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 2 ]; } } elseif ( this.iType == this.COLLAPSING ) { if ( !bSibling ) { // child node.absX = iAbsX + this.styles[ node.iLevel + 1 ][ 0 ]; node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 1 ]; } else { // sibling node.absX = iAbsX; node.absY = iAbsY + this.styles[ node.iLevel + 1 ][ 3 ]; } } return node; } Xmenu.prototype.cumulateOffsets = function( iStyleIndex, iMaxLevel ) { var iOffset = 0; for ( i = 0; i < iMaxLevel; i++ ) { iOffset += this.styles[ i + 1 ][ iStyleIndex ]; } return iOffset; } Xmenu.prototype.addXlayer = function( xparentLayer, node, styles ) { var parent = null; var x = "left"; var y = "top"; var offsetX = node.absX; var offsetY = node.absY; var w = styles[ node.iLevel + 1 ][ 2 ]; var h = styles[ node.iLevel + 1 ][ 3 ]; var clipTop = 0; var clipRight = w; var clipBottom = h; var clipLeft = 0; var zIndex = node.iLevel; var visibility = false; var fading = styles[ node.iLevel + 1 ][ 4 ]; var events = [ Xlayer.prototype.MOUSEOVER, "Xmenu.prototype.instances[" + this.index + "].onmouseover( Xmenu.prototype.instances[" + this.index + "]." + node.sPath + ")", Xlayer.prototype.MOUSEOUT, "Xmenu.prototype.instances[" + this.index + "].onmouseout( Xmenu.prototype.instances[" + this.index + "]." + node.sPath + ")", Xlayer.prototype.CLICK, "Xmenu.prototype.instances[" + this.index + "].onclick( Xmenu.prototype.instances[" + this.index + "]." + node.sPath + ")" ]; var sText = node.sText; var bgcolor = styles[ node.iLevel + 1 ][ 5 ][ 0 ]; var fgcolor = styles[ node.iLevel + 1 ][ 5 ][ 1 ]; var align = styles[ node.iLevel + 1 ][ 5 ][ 2 ]; var iTopTextBorder = styles[ node.iLevel + 1 ][ 5 ][ 3 ] var iRightTextBorder = styles[ node.iLevel + 1 ][ 5 ][ 4 ] var iBottomTextBorder = styles[ node.iLevel + 1 ][ 5 ][ 5 ] var iLeftTextBorder = styles[ node.iLevel + 1 ][ 5 ][ 6 ] var href = null; var bold = styles[ node.iLevel + 1 ][ 5 ][ 7 ]; var fontface = styles[ node.iLevel + 1 ][ 5 ][ 8 ]; var fontsize = styles[ node.iLevel + 1 ][ 5 ][ 9 ]; if ( styles[ node.iLevel + 1 ][ 5 ][ 11 ] ) { // icon defined var icon = ( node.child || styles[ node.iLevel + 1 ][ 5 ][ 10 ] )? styles[ node.iLevel + 1 ][ 5 ][ 11 ] : this.sSpacerUrl; var icon_w = styles[ node.iLevel + 1 ][ 5 ][ 12 ]; var icon_h = styles[ node.iLevel + 1 ][ 5 ][ 13 ]; var iconBorder = styles[ node.iLevel + 1 ][ 5 ][ 14 ]; } else { // icon not defined var icon = null; var icon_w = 0; var icon_h = 0; var iconBorder = 0; } var src = null; // iframe: src returnnew Xlayer( parent, xparentLayer, x, y, offsetX, offsetY, w, h, clipTop, clipRight, clipBottom, clipLeft, zIndex, visibility, bgcolor, fading, events, sText, bold, align, iTopTextBorder, iRightTextBorder, iBottomTextBorder, iLeftTextBorder, fgcolor, href, icon, icon_w, icon_h, iconBorder, fontface, fontsize, src, this.sSpacerUrl ); } Xmenu.prototype.create = function() { this.createXlayers( null ); this.setVisibSiblings( this.tree, true ); } Xmenu.prototype.createXlayers = function( tree ) { if ( !tree ) { // call without param -> take root node tree = this.tree; } if ( tree.child ) { this.createXlayers( tree.child ); } if ( tree.sibling ) { this.createXlayers( tree.sibling ); } tree.xlayer.create(); } Xmenu.prototype.setOpenListener = function( openListener ) { this.openListener = openListener; } Xmenu.prototype.setCloseListener = function( closeListener ) { this.closeListener = closeListener; } Xmenu.prototype.setLinkClickListener = function( linkClickListener ) { this.linkClickListener = linkClickListener; } Xmenu.prototype.open = function() { if ( this.navigationNode != null ) { this.openLastClicked(); } else { this.setVisibSiblings( this.tree, true ); } this.bOpened = true; this.openListener.onMenuOpen( this ); } Xmenu.prototype.openLastClicked = function() { node = this.navigationNode; this.lastNode = node; if ( node.child != null ) this.setVisibSiblings( node.child, true ); while ( node != null ) { this.highlightClickedNode( node ); if ( node.sParent != null ) { this.setVisibSiblings( eval( node.sParent ).child, true ); node = eval( node.sParent ); } else { this.setVisibSiblings( this.tree, true ); node = null; } } } Xmenu.prototype.findNode = function( sText, node ) { if ( this.nodeFound ) return true; if ( node.child ) this.findNode( sText, node.child ); if ( node.sibling ) this.findNode( sText, node.sibling ); if ( sText == node.sText ) this.nodeFound = node.sPath; if ( this.nodeFound ) return true; elsereturn false; } Xmenu.prototype.close = function() { if ( this.bOpened && !this.bKeepExpansionState ) { this.setVisibChildren( this.tree, false ); this.setVisibSiblings( this.tree, true ); if ( this.iType == this.COLLAPSING ) this.setCollapsePos( this.tree ); // if ( this.bClick && this.lastNode ) // { this.clearHighlightChildren( this.tree ); this.lastNode = null; // } this.bOpened = false; this.closeListener.onMenuClose( this ); } } Xmenu.prototype.onmouseover = function( node ) { this.overNode = node; if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && !this.bClick ) { if ( !this.bOpened ) { // this menu will open this.bOpened = true; this.openListener.onMenuOpen( this ); } if ( this.outNode ) var outNode = this.outNode; else var outNode = this.tree; if ( outNode.iLevel > node.iLevel ) { this.showBranch( node, this.outNode ); // this.setVisibSiblings( eval( outNode.sParent + ".child" ), false ); // this.setVisibSiblings( outNode.child, false ); } elseif ( outNode.iLevel == node.iLevel ) { this.setVisibSiblings( outNode.child, false ); } this.setVisibSiblings( node.child, true ); } if ( this.checkClickPath( node ) ) { // current node is not the node that was clicked (or its parents) this.highlight( node, true ); } return false; } Xmenu.prototype.onmouseout = function( node ) { if ( this.checkClickPath( node ) ) this.highlight( node, false ); var timeout = this.timeout; if ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && !this.bClick ) // close menu if no onmouseover until timeout { this.timeout = setTimeout( "Xmenu.prototype.instances[" + this.index + "].checkOnmouseout()", this.iCloseDelay ); } this.outNode = node; clearTimeout( timeout ); return false; } Xmenu.prototype.checkClickPath = function( node ) { if ( this.bHighlightClickedNodes ) { lastNode = this.lastNode; while ( lastNode != null ) { if ( lastNode == node ) // node clicked found return false; else// continue looking for it lastNode = eval( lastNode.sParent ); } return true; } else { return true; } } Xmenu.prototype.checkOnmouseout = function() { if ( this.overNode == this.outNode && !( this.bKeepExpansionState && this.bClick ) ) { // onmouseover executed since delay? this.close(); } } Xmenu.prototype.onclick = function( node ) { if ( node.target ) { // follow href node.target.open( node.sText, this.sNavigationName, this.sNavigation ); this.sNavigation = node.sText; this.navigationNode = node; // store navigation node this.clearHighlightChildren( this.tree ); this.linkClickListener.onLinkClick( this ); // inform controller } elseif ( ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && this.bClick ) || this.iType == this.COLLAPSING ) { this.highlight( node, true ); if ( !this.bOpened ) { // this menu will open this.bOpened = true; this.openListener.onMenuOpen( this ); } if ( this.iType == this.COLLAPSING ) this.collapse( node ); elseif ( ( this.iType == this.VERTICAL || this.iType == this.HORIZONTAL ) && this.bClick ) this.showBranch( node, this.lastNode ); this.lastNode = node; } return false; } Xmenu.prototype.showBranch = function( node, hideNode ) { // if ( this.bClick && hideNode == node && node.child && node.child.xlayer.isVisible() ) if ( this.bClick && node.child && node.child.xlayer.isVisible() ) { // reclose branch this.setVisibChildren( node.child, false ); this.clearHighlightChildren( node, false ); } else { if ( hideNode ) { // hide old nodes this.setVisibChildren( this.tree, false ); this.clearHighlightChildren( this.tree, false ); } if ( node.child ) this.setVisibSiblings( node.child, true ); while ( node ) { // show new nodes if ( this.bClick ) this.highlightClickedNode( node, true ); if ( node.sParent ) this.setVisibSiblings( eval( node.sParent ).child, true ); else this.setVisibSiblings( this.tree, true ); node = eval( node.sParent ); } } } Xmenu.prototype.clearHighlightChildren = function( node ) { if ( node ) { if ( node.child ) this.clearHighlightChildren( node.child ); if ( node.sibling ) this.clearHighlightChildren( node.sibling ); this.highlight( node, false ); } } Xmenu.prototype.collapse = function( node ) { this.showBranch( node, this.lastNode ); this.setCollapsePos( this.tree ); } Xmenu.prototype.setCollapsePos = function( node ) { if ( node == this.tree ) // start looping this.absY = this.tree.xlayer.y; if ( node.xlayer.isVisible() ) { node.xlayer.setPos( node.xlayer.x, this.absY ); this.absY += node.xlayer.h; } if ( node.child ) this.setCollapsePos( node.child ); if ( node.sibling ) this.setCollapsePos( node.sibling ); } Xmenu.prototype.highlight = function( node, bHighlight ) { var index = ( bHighlight )? 6 : 5; // style for mouseover or mouseout ? node.xlayer.setBgColor( this.styles[ node.iLevel + 1 ][ index ][ 0 ] ); // nn4 crashes, iemac stops rendering if ( !is.nn4up && !is.iemac5up ) node.xlayer.setFgColor( this.styles[ node.iLevel + 1 ][ index ][ 1 ] ); } Xmenu.prototype.highlightClickedNode = function( node ) { if ( node && this.bHighlightClickedNodes ) { node.xlayer.setBgColor( this.styles[ 0 ][ 0 ] ); if ( !is.nn4up && !is.iemac5up ) node.xlayer.setFgColor( this.styles[ 0 ][ 1 ] ); } } Xmenu.prototype.setVisibSiblings = function( node, bVisibility ) { if ( node ) { if ( node.sibling ) this.setVisibSiblings( node.sibling, bVisibility ); node.xlayer.setVisibility( bVisibility ); } } Xmenu.prototype.setVisibChildren = function( node, bVisibility ) { if ( node ) { if ( node.child ) this.setVisibChildren( node.child, bVisibility ); if ( node.sibling ) this.setVisibChildren( node.sibling, bVisibility ); node.xlayer.setVisibility( bVisibility ); } } Xmenu.prototype.isNavigationNodeFound = function() { return this.navigationNode != null; } </script> <!-- Xmenus.js --> <script language="javascript"> // created by: Andre Dietisheim (dietisheim@sphere.ch) // created: 2002-05-11 // modified by: Andre Dietisheim (dietisheim@sphere.ch) // modified: 2004-01-17 // version: 2.1.0 function Xmenus( sNavigationName, sNavigation ) { if( !Xmenus.prototype.instances ) Xmenus.prototype.instances = new Array(); Xmenus.prototype.instances[ Xmenus.prototype.instances.length ] = this; this.index = Xmenus.prototype.instances.length - 1; this.bCompatibleBrowser = ( is.iewin5up || is.iemac5up || is.gk || is.sf || is.kq3up || is.nn4up || is.op6up ); this.iCloseDelay = 1; this.xmenus = new Array(); this.sNavigationName = sNavigationName; this.sNavigation = sNavigation; this.navigationMenu = null; this.lastMenu = null; this.timeout = null; this.bReopenDisabled = false; } Xmenus.prototype.add = function( xmenuConfig ) { if ( this.bCompatibleBrowser ) this.xmenus[ this.xmenus.length ] = new Xmenu( this.sNavigationName, this.sNavigation, xmenuConfig[ 0 ], xmenuConfig[ 1 ], xmenuConfig[ 2 ] ); // else // this.writeDegradationHtml( xmenuConfig ); } Xmenus.prototype.create = function() { if ( !this.bCompatibleBrowser ) return; for ( j = 0; j < this.xmenus.length; j++ ) { this.xmenus[ j ].setOpenListener( this ); this.xmenus[ j ].setCloseListener( this ); this.xmenus[ j ].setLinkClickListener( this ); this.xmenus[ j ].create(); if ( this.xmenus[ j ].isNavigationNodeFound() ) { this.openNavigationMenu( this.xmenus[ j ] ); } } } Xmenus.prototype.openNavigationMenu = function( xmenu ) { this.navigationMenu = xmenu; this.lastMenu = xmenu; xmenu.open(); } Xmenus.prototype.onMenuOpen = function( xmenu ) { // fired by Xmenu on menu open if ( this.lastMenu != null && this.lastMenu != xmenu ) { this.bReopenDisabled = true; this.lastMenu.close(); this.bReopenDisabled = false; } this.bOpened = true; this.lastMenu = xmenu; } Xmenus.prototype.onMenuClose = function( xmenu ) { // fired by Xmenu on menu close if ( !this.bReopenDisabled ) { this.timeout = setTimeout( "Xmenus.prototype.instances[" + this.index + "].reopenAfterClose()", this.iCloseDelay * 1000 ); } this.bOpened = false; } Xmenus.prototype.reopenAfterClose = function() { if ( !this.bOpened && this.navigationMenu != null ) { //no other menu is opened -> open navigation menu this.navigationMenu.open(); } } Xmenus.prototype.onLinkClick = function( xmenu ) { // fired by Xmenu on click on a link // this.navigationMenu.clearHighlightChildren( this.navigationMenu.tree ); this.openNavigationMenu( xmenu ); } Xmenus.prototype.writeDegradationHtml = function( xmenuConfig ) { var content = xmenuConfig[ 2 ]; for ( i = 0; i < content.length; i++ ) { if ( content[ i ][ 2 ] == 0 && content[ i ][ 1 ] ) document.write( '<a href="' + content[ i ][ 1 ].sSrc + '">' + content[ i ][ 0 ] + '</a><br>' );; } } </script> <!-- Debug.js --> <script language="javascript"> function Debug() { this.outputElementName = "debug"; this.sText = ""; } debug = new Debug(); Debug.prototype.writeHtml = function( iColumns, iRows ) { sTextAreaHtml = "<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\">" + "<tr>" + "<td colspan=\"3\">" + "<form>" + "<textarea type=\"text\" name=\"" + this.outputElementName + "\" id=\"debug\" cols=\"" + iColumns + "\" rows=\"" + iRows + "\">" + "</textarea><br>" + "<input type=\"button\" value=\"select all\" onClick=\"javascript:document.getElementById( 'debug' ).select()\">" + "<input type=\"reset\" value=\"clear\">" + "</form>" + "</td>" + "</tr>" + "</table>"; document.write( sTextAreaHtml ); } Debug.prototype.flushBuffer = function() { var outputElement = this.getOutput(); if ( outputElement ) { outputElement.value = this.sText + "\n" + outputElement.value ; } } Debug.prototype.bufferedWrite = function( sText ) { this.sText = sText + "\n" + this.sText; } Debug.prototype.write = function( sText ) { var outputElement = this.getOutput(); if ( outputElement ) { outputElement.value = sText + "\n" + outputElement.value; } } Debug.prototype.getOutput = function() { var outputElement = null; if ( is.nn4up ) { outputElement = document.forms[ "\"" + this.outputElementName + "\"" ]; } elseif ( is.gk || is.iewin5up || is.iemac5up || is.sf ) { outputElement = document.getElementById( this.outputElementName ); } return outputElement; } </script> <!-- XmenuConfig.js --> <script language="javascript"> function WinTarget( sSrc ) { this.sSrc = sSrc; } WinTarget.prototype.createHref = function( sSrc, sText, sNavigationName, sNavigation ) { if ( sSrc == "#" ) { // create link to same page poping up current menu-entry sSrc = location + ""; // window.document.URL sSrc = sSrc.replace( new RegExp( sNavigationName + "=[^&]*", "" ), sNavigationName + "=" + escape( sText ) ); if ( sSrc.indexOf( sNavigationName + "=" ) < 0 ) sSrc = sSrc + "?" + sNavigationName + "=" + escape( sText ); } return sSrc; } WinTarget.prototype.open = function( sText, sNavigationName, sNavigation ) { window.location = this.createHref( this.sSrc, sText, sNavigationName, sNavigation ); } function NewWinTarget( sSrc, iX, iY, iWidth, iHeight ) { this.win = null; this.sSrc = sSrc; this.iX = iX; this.iY = iY; this.iWidth = iWidth; this.iHeight = iHeight; } NewWinTarget.prototype.open = function() { var sOpts = "toolbar=yes,location=yes,status=yes,menubar=yes,resizable=yes,scrollbars=yes"; if ( document.body && document.body.offsetWidth ) sOpts += ",width=" + this.iWidth; elseif ( window.innerWidth ) sOpts += ",innerWidth=" + this.iWidth + ","; if ( document.body && document.body.offsetHeight ) sOpts += ",height=" + this.iHeight elseif ( window.innerHeight ) sOpts += ",innerHeight=" + this.iHeight sOpts +=",top=" + this.iY; sOpts += ",left=" + this.iX; this.win = top.open( this.sSrc, "", sOpts ); } function FrameTarget( sSrc, sId ) { this.sSrc = sSrc; this.sId = sId; } FrameTarget.prototype.open = function() { var target = top.frames[ this.sId ]; if ( target ) target.document.location.href = this.sSrc; } function IframeTarget( sSrc, sId ) { this.sSrc = sSrc; this.sId = sId; } IframeTarget.prototype.open = function() { if ( !this.ns47up ) { var target = top.frames[ this.sSrc ]; if ( target ) target.src = this.sSrc; } } </script> <!-- XmenusConf.js --> <script language="javascript"> var pastaVertical = [ // globals ----------------- [ Xmenu.prototype.VERTICAL, 1, // delay in sec. before closing menu false, // onclick / onmouseover true, // horizontal & vertical menu: menu appears below/right of the root-node false, // horizontal menu: each hierarchy starts on same X false, // keep expansion state true, // highlight clicked nodes [ 20, 1 ], // XlayerParent width, height "img/spacer.gif"// spacer url ], // styles ------------------ [ [ "#ff4400", "#ffaaaa" ], // onclick-menu: color of clicked node [ 0, 8, 100, 25, null, [ "#ef6f00", "white", "center", 0, 0, 0, 0, true, "Arial, Helvetica, sans serif", 14, false, "img/arrow_horiz.gif", 3, 5, 10 ],[ "#ff5500", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 2, null, 1, 20, 0 ] ], // xlayer style: [xOffset, yOffset, width, height, fading: [start_val, stop_val, steps, delay(ms)], style onmouseout: [bgcolor, fgcolor, align, bold, fontFace, fontSize, img, img_width, img_height, tile(horiz/vert)], onmouseover: [ bgcolor, fgcolor, align, fontFace, fontSize ]] [ 0, 1, 100, 30, null, [ "#ef7f00", "white", "left", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 12, false, "img/arrow_horiz.gif", 3, 5, 10 ],[ "#ff8e00", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ], [ -8, 0, 100, 20, null, [ "#ff8e00", "white", "left", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 10, false, "img/arrow_horiz.gif", 3, 5, 10 ],[ "#ffa000", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ], [ -4, 0, 100, 20, null, [ "#ffb200", "white", "left", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 10, false, "img/arrow_horiz.gif", 3, 5, 10 ],[ "#ffc400", "#ffccbb", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ] ], // content ---------- [ [ "pasta", null, 0 ], // content: [text, href, hierarchyLevel] [ "spaghetti", null, 1 ], [ "bolognese", null, 2 ], [ "formaggio", new WinTarget( "#" ), 3 ], [ "carbonara", new WinTarget( "#" ), 2 ], [ "pesto", null, 2 ], [ "rosso", new WinTarget( "#" ), 3 ], [ "tortelloni", new WinTarget( "#" ), 1 ], [ "tagliatelle", null, 1 ], [ "alla panna", null, 2 ], [ "arrabiato", new WinTarget( "#" ), 2 ], [ "formaggio", new WinTarget( "#" ), 3 ] ] ]; var pastaHorizontal = [ // globals ----------------- [ Xmenu.prototype.HORIZONTAL, 1, // delay in sec. before closing menu false, // classic menu: onclick / onmouseover true, // horizontal & vertical menu: menu appears below/right of the root-node false, // horizontal menu: each hierarchy starts on same X false, // keep expansion state true, // highlight clicked nodes [ 20, 1 ], // XlayerParent width, height "img/spacer.gif"// spacer url ], // styles ------------------ [ [ "#ff4400", "#ffaaaa" ], // onclick-menu: color of clicked node [ 0, 8, 100, 25, null, [ "#ef6f00", "white", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 14, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ff5500", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 2, null, 1, 20, 0 ] ], // xlayer style: [xOffset, yOffset, width, height, fading: [start_val, stop_val, steps, delay(ms)], style onmouseout: [bgcolor, fgcolor, align, bold, fontFace, fontSize, img, img_width, img_height, tile(horiz/vert)], onmouseover: [ bgcolor, fgcolor, align, fontFace, fontSize ]] [ 0, 1, 100, 30, null, [ "#ef7f00", "white", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 12, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ff8e00", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ], [ 0, 0, 100, 20, null, [ "#ff8e00", "white", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 10, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ffa000", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ], [ 0, 0, 100, 20, null, [ "#ffa000", "white", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 10, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ffb200", "#ffccbb", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ] ], // content ---------- [ [ "pasta", null, 0 ], // content: [text, href, hierarchyLevel] [ "spaghetti", null, 1 ], [ "bolognese", null, 2 ], [ "formaggio", new WinTarget( "#" ), 3 ], [ "carbonara", new WinTarget( "#" ), 2 ], [ "pesto", null, 2 ], [ "rosso", new WinTarget( "#" ), 3 ], [ "tortelloni", new WinTarget( "#" ), 1 ], [ "tagliatelle", null, 1 ], [ "alla panna", null, 2 ], [ "arrabiato", null, 2 ], [ "formaggio", new WinTarget( "#" ), 3 ] ] ]; var pastaVerticalOnclickHighlight = [ // globals ----------------- [ Xmenu.prototype.VERTICAL, 1, // delay in sec. before closing menu true, // classic menu: onclick / onmouseover true, // horizontal & vertical menu: menu appears below/right of the root-node false, // horizontal menu: each hierarchy starts on same X false, // keep expansion state true, // onclick menu: highlight clicked nodes [ 20, 1 ], // XlayerParent width, height "img/spacer.gif"// spacer url ], // styles ------------------ [ [ "#ff4400", "#ffaaaa" ], // onclick-menu: color of clicked node [ 0, 8, 100, 25, null, [ "#ef6f00", "white", "center", 0, 0, 0, 0, true, "Arial, Helvetica, sans serif", 14, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ff5500", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif, sans serif", 2, null, 1, 20, 0 ] ], // xlayer style: [xOffset, yOffset, width, height, fading: [start_val, stop_val, steps, delay(ms)], style onmouseout: [bgcolor, fgcolor, align, bold, fontFace, fontSize, img, img_width, img_height, tile(horiz/vert)], onmouseover: [ bgcolor, fgcolor, align, fontFace, fontSize ]] [ 0, 1, 150, 24, null, [ "#ff7f00", "white", "left", 0, 0, 0, 0, true, "Arial, Helvetica, sans serif", 12, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ff8e00", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ], ], // content ---------- [ [ "gallery", null, 0 ], // content: [text, href, hierarchyLevel] [ " face-art.ch", new NewWinTarget( "http://www.face-art.ch", 50, 50, 1024, 768 ), 1 ], [ " swissbusinesshub.org", new NewWinTarget( "http://www.swissbusinesshub.org", 50, 50, 800, 600 ), 1 ], [ " ensta.fr", new NewWinTarget( "http://www.ensta.fr/uer/uei/fr/index.html", 50, 50, 800, 600 ), 1 ] ] ]; var pastaCollapsingFading = [ // globals ----------------- [ Xmenu.prototype.COLLAPSING, 1, // delay in sec. before closing menu true, // vertical or horizontal menu: onclick / onmouseover true, // horizontal & vertical menu: menu appears below/right of the root-node true, // horizontal menu: each hierarchy starts on same X false, // keep expansion state true, // highlight clicked nodes [ 20, 1 ], // XlayerParent width, height "img/spacer.gif"// spacer url ], // styles ------------------ [ [ "#ff4400", "#ffaaaa" ], // onclick-menu: color of clicked node [ 11, 8, 100, 25, null, [ "#ff7f00", "white", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 12, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ff7c00", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ], [ 0, 0, 100, 20, null, [ "#ff8e00", "white", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 10, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ffa000", "#ffbbaa", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ], [ 0, 0, 100, 20, null, [ "#ffa000", "white", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 10, false, "img/arrow_vert.gif", 5, 3, 10 ],[ "#ffb200", "#ffccbb", "center", 0, 0, 0, 10, true, "Arial, Helvetica, sans serif", 1, "img/spacer.gif", 1, 1, 0 ] ] ], // content ---------- [ [ "spaghetti", null, 0 ], [ "bolognese", null, 1 ], [ "formaggio", new WinTarget( "#" ), 2 ], [ "carbonara", new WinTarget( "#" ), 1 ], [ "pesto", null, 1 ], [ "rosso", new WinTarget( "#" ), 2 ], [ "tortelloni", new WinTarget( "#" ), 0 ], [ "tagliatelle", null, 0 ], [ "alla panna", null, 1 ], [ "formaggio", new WinTarget( "#" ), 2 ], [ "arrabiato", new WinTarget( "#" ), 1 ] ] ]; </script> <script language="javascript"> var menus = new Xmenus( 'sNavigation', '' ); function onLoad() { menus.create() } function onResize() { window.location.reload(); } </script></head> <body onload="onLoad()" onresize="onResize()"> <table border="0" cellpadding="0" cellspacing="0" height="33" width="553"> <tbody><tr> <td class="orange" height="33" valign="top" width="100"> <script language="javascript"> menus.add( pastaHorizontal ); </script> </td> <td class="orange" height="33" valign="top" width="100"> <script language="javascript"> menus.add( pastaVertical ); </script> <td class="orange" height="33" valign="top" width="100"> <script language="javascript"> menus.add( pastaVerticalOnclickHighlight ); </script> </tbody> </table> <b>Xmenu-xlayer</b> is a versatile, javascript driven DHTML menu that works on <ul class="content"><li>Internet Explorer Windows 5 and later (5, 5.5, 6)<br></li> <li>Gecko (Mozilla, Mozilla-Firebird, Galeon, Netscape 6, 7, etc.)<br></li> <li>Opera 6, 7<br></li><li>Internet Explorer Macintosh 5 and later (5, 5.1, 5.2)<br></li> <li>Safari<br></li><li>Konqueror 3.x<br></li><li>Netscape 4.x<br></li> </ul> It comes in 3 basic modes: <ul class="content"> <li>horizontal<br></li> <li>vertical<br></li> <li>collapsing<br></li> </ul> and may be configured to fold/unfold on clicks or mouseovers. There are plenty of other configuration options that allow you to change colors, fonts, sizes, offsets, behaviours, etc. <b>Xmenu-xlayer</b> is very easy to implement, it doesn't need any absolute coordinates - just add it to your layout and it calculates its positon on its own. The whole code is released into the community under LGPL and may be freely distributed. <script language="javascript"> menus.add( pastaCollapsingFading ); </script> </body></html> Related examples in the same category
